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 @@