10 files changed, 94 insertions, 70 deletions

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index ad36add..85119e6 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,25 +1,19 @@
 import * as React from "react";
-import { ReactElement, useContext, useEffect, useMemo, useState } from "react";
-import useRequests from "~/hooks/useRequests";
+import { ReactElement, useContext, useEffect } from "react";
 
 import styles from "~/components/App/App.module.scss";
 import RequestDetails from "~/components/RequestDetails/RequestDetails";
-import { getHost } from "~/utils";
 import { Container, Nav, Navbar, NavDropdown } from "react-bootstrap";
 import classNames from "classnames";
 import Sliders from "~/components/Icons/Sliders";
 import Sun from "~/components/Icons/Sun";
 import Moon from "~/components/Icons/Moon";
 import Trash from "~/components/Icons/Trash";
-import { DarkModeContext } from "~/contexts/DarkMode";
+import { SettingsContext } from "~/contexts/Settings";
 import RequestList from "~/components/RequestList/RequestList";
-import { Call, ReadyState } from "~/types";
+import { ReadyState } from "~/types";
 import { ConnectionContext } from "~/contexts/Connection";
 
-interface Config {
-  url: string;
-}
-
 interface SettingsMenu {
   icon: ReactElement;
   label: string;
@@ -48,8 +42,8 @@ const statusTextMap: ReadyStateMap = {
 };
 
 export default function App() {
-  const { darkMode, toggle } = useContext(DarkModeContext);
-  const { config, selectedCall, setSelectedCall, readyState, clear } =
+  const { darkMode, setSetting } = useContext(SettingsContext);
+  const { config, setSelectedCall, readyState, clear } =
     useContext(ConnectionContext);
 
   useEffect(() => {
@@ -59,7 +53,7 @@ export default function App() {
 
   const settingsMenu: (SettingsMenu | null)[] = [
     {
-      onClick: toggle,
+      onClick: () => setSetting("darkMode", !darkMode),
       icon: darkMode ? <Sun /> : <Moon />,
       label: darkMode ? "Light mode" : "Dark mode",
     },
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index e670376..94fca32 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -4,7 +4,7 @@ import { Headers, RequestPayload, ResponsePayload } from "~hooks/useRequests";
 import ReactJson from "react-json-view";
 import styles from "~/components/Content/Content.module.scss";
 import { Button, Col, Container, Row } from "react-bootstrap";
-import { DarkModeContext } from "~/contexts/DarkMode";
+import { SettingsContext } from "~/contexts/Settings";
 
 function getHeader(
   headers: Headers,
@@ -80,14 +80,14 @@ export default function Content({
 }
 
 function ContentBody({ data, raw = false }: Omit<ContentProps, "setRaw">) {
-  const { darkMode } = useContext(DarkModeContext);
+  const { darkMode } = useContext(SettingsContext);
   const contentType = useMemo(() => {
     if (raw) {
       return "";
     }
 
     const type = getHeader(data.headers, "content-type");
-    return type.toLowerCase().split(";")[0];
+    return type?.toLowerCase().split(";")[0];
   }, [data, raw]);
 
   if (raw) {
@@ -98,7 +98,10 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, "setRaw">) {
     );
   }
 
-  if (["application/pdf", "text/html"].includes(contentType)) {
+  if (
+    contentType !== undefined &&
+    ["application/pdf", "text/html"].includes(contentType)
+  ) {
     return (
       <iframe
         className="bg-white"
@@ -110,7 +113,7 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, "setRaw">) {
     );
   }
 
-  if (contentType.startsWith("application/json")) {
+  if (contentType?.startsWith("application/json")) {
     return (
       <ReactJson
         src={JSON.parse(atob(data.body))}
@@ -125,15 +128,15 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, "setRaw">) {
     );
   }
 
-  if (contentType.startsWith("audio")) {
+  if (contentType?.startsWith("audio")) {
     return <audio src={`data:${contentType};base64,${data.body}`} />;
   }
 
-  if (contentType.startsWith("video")) {
+  if (contentType?.startsWith("video")) {
     return <video src={`data:${contentType};base64,${data.body}`} />;
   }
 
-  if (contentType.startsWith("image")) {
+  if (contentType?.startsWith("image")) {
     return <img src={`data:${contentType};base64,${data.body}`} alt="" />;
   }
 
diff --git a/src/components/Frames/Frames.tsx b/src/components/Frames/Frames.tsx
index 83c4c96..1d31d92 100644
--- a/src/components/Frames/Frames.tsx
+++ b/src/components/Frames/Frames.tsx
@@ -5,7 +5,7 @@ import classNames from "classnames";
 import styles from "./Frames.module.scss";
 import dayjs from "dayjs";
 import ReactJson from "react-json-view";
-import { DarkModeContext } from "~/contexts/DarkMode";
+import { SettingsContext } from "~/contexts/Settings";
 
 function isJson(data: any): boolean {
   try {
@@ -23,7 +23,6 @@ interface FramesProps {
 export default function Frames({
   frames,
 }: PropsWithChildren<FramesProps>): JSX.Element {
-  const { darkMode } = useContext(DarkModeContext);
   return (
     <ListGroup variant="flush" as="ul" className={"flex-grow-1"}>
       {frames.length > 0 ? (
diff --git a/src/components/RequestList/RequestList.tsx b/src/components/RequestList/RequestList.tsx
index 82a6b21..8217229 100644
--- a/src/components/RequestList/RequestList.tsx
+++ b/src/components/RequestList/RequestList.tsx
@@ -12,7 +12,7 @@ import styles from "~/components/RequestList/RequestList.module.scss";
 import RequestSummary from "~/components/RequestSummary/RequestSummary";
 import * as React from "react";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { DarkModeContext } from "~/contexts/DarkMode";
+import { SettingsContext } from "~/contexts/Settings";
 import Filter from "~/components/Icons/Filter";
 import { Call, Method } from "~/types";
 import { ConnectionContext } from "~/contexts/Connection";
@@ -22,7 +22,7 @@ type EnabledMethods = {
 };
 
 export default function RequestList() {
-  const { darkMode } = useContext(DarkModeContext);
+  const { darkMode } = useContext(SettingsContext);
   const {
     calls: requests,
     selectedCall,
diff --git a/src/components/RequestSummary/RequestSummary.tsx b/src/components/RequestSummary/RequestSummary.tsx
index 4e97676..64ff475 100644
--- a/src/components/RequestSummary/RequestSummary.tsx
+++ b/src/components/RequestSummary/RequestSummary.tsx
@@ -4,10 +4,11 @@ import classNames from "classnames";
 
 import { Badge, Col, Row } from "react-bootstrap";
 import dayjs from "dayjs";
+import { Call } from "~/types";
 
 interface RequestSummaryProps {
   selected?: boolean;
-  requestResponse: Calls;
+  requestResponse: Call;
   showTime?: boolean;
 }
 
diff --git a/src/contexts/DarkMode.tsx b/src/contexts/DarkMode.tsx
deleted file mode 100644
index fd536b2..0000000
--- a/src/contexts/DarkMode.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from "react";
-import {
-  Context,
-  createContext,
-  PropsWithChildren,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { ThemeConfig } from "bootstrap-darkmode";
-
-interface DarkModeApi {
-  darkMode: boolean;
-  toggle: () => void;
-}
-
-export const DarkModeContext = createContext<Partial<DarkModeApi>>(
-  {}
-) as Context<DarkModeApi>;
-
-export default function DarkModeProvider({ children }: PropsWithChildren<any>) {
-  const themeConfig = useMemo(() => new ThemeConfig(), []);
-  const [darkMode, setDarkMode] = useState(
-    () => themeConfig.getTheme() === "dark"
-  );
-
-  useEffect(() => {
-    themeConfig.setTheme(darkMode ? "dark" : "light");
-  }, [darkMode]);
-
-  return (
-    <DarkModeContext.Provider
-      value={{
-        darkMode,
-        toggle: () => setDarkMode((dm) => !dm),
-      }}
-    >
-      {children}
-    </DarkModeContext.Provider>
-  );
-}
diff --git a/src/contexts/Settings.tsx b/src/contexts/Settings.tsx
new file mode 100644
index 0000000..2bbebcc
--- /dev/null
+++ b/src/contexts/Settings.tsx
@@ -0,0 +1,65 @@
+import * as React from "react";
+import {
+  Context,
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { Settings } from "~/types";
+
+interface SettingsApi {
+  darkMode: boolean;
+  setSetting: (key: keyof Settings, value: any) => void;
+}
+
+export const SettingsContext = createContext<Partial<SettingsApi>>(
+  {}
+) as Context<SettingsApi>;
+
+export default function SettingsProvider({ children }: PropsWithChildren<any>) {
+  // const themeConfig = useMemo(() => new ThemeConfig(), []);
+  const [settings, setSettings] = useState<Settings>(() => {
+    const stored = localStorage.getItem("settings");
+
+    if (stored) {
+      return JSON.parse(stored);
+    }
+
+    return {
+      darkMode:
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches,
+    };
+  });
+
+  const setSetting = useCallback(
+    (key: keyof Settings, value: any) => {
+      const newSetting = {
+        ...settings,
+        [key]: value,
+      };
+      setSettings(newSetting);
+      localStorage.setItem("settings", JSON.stringify(newSetting));
+    },
+    [settings]
+  );
+
+  useEffect(() => {
+    document
+      .querySelector("html")
+      ?.setAttribute("data-bs-theme", settings.darkMode ? "dark" : "light");
+  }, [settings.darkMode]);
+
+  return (
+    <SettingsContext.Provider
+      value={{
+        darkMode: settings.darkMode,
+        setSetting,
+      }}
+    >
+      {children}
+    </SettingsContext.Provider>
+  );
+}
diff --git a/src/index.scss b/src/index.scss
index 1572e11..23e87b0 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,6 +1,5 @@
 @import "../node_modules/bootstrap/scss/bootstrap";
 @import "../node_modules/bootstrap-icons/font/bootstrap-icons";
-@import "../node_modules/bootstrap-darkmode/scss/darktheme";
 
 * {
   box-sizing: border-box;
diff --git a/src/index.tsx b/src/index.tsx
index a2c18e3..c1a4211 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,7 +3,7 @@ import * as ReactDOM from "react-dom";
 import App from "~/components/App/App";
 
 import "~/index.scss";
-import DarkModeProvider from "./contexts/DarkMode";
+import SettingsProvider from "./contexts/Settings";
 
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -11,10 +11,10 @@ import ConnectionProvider from "~/contexts/Connection";
 dayjs.extend(localizedFormat);
 
 ReactDOM.render(
-  <DarkModeProvider>
+  <SettingsProvider>
     <ConnectionProvider>
       <App />
     </ConnectionProvider>
-  </DarkModeProvider>,
+  </SettingsProvider>,
   document.getElementById("root")
 );
diff --git a/src/types.ts b/src/types.ts
index 0e11bee..122fcf3 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,3 +1,7 @@
+export interface Settings {
+  darkMode: boolean;
+}
+
 export type Headers = [string, string][];
 export type Method =
   | "GET"