Updated the libraries

13 files changed, 459 insertions, 354 deletions

diff --git a/package.json b/package.json
index 51a2660..948e21f 100644
--- a/package.json
+++ b/package.json
@@ -10,23 +10,22 @@
   },
   "license": "MIT",
   "dependencies": {
-    "bootstrap": "^5.1.3",
-    "bootstrap-darkmode": "5.0.0-beta.1",
-    "bootstrap-icons": "^1.7.2",
-    "classnames": "^2.3.1",
-    "dayjs": "^1.10.7",
-    "react": "^17.0.2",
-    "react-bootstrap": "^2.1.1",
-    "react-dom": "^17.0.2",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
+    "classnames": "^2.5.1",
+    "dayjs": "^1.11.13",
+    "react": "^18.3.1",
+    "react-bootstrap": "^2.10.4",
+    "react-dom": "^18.3.1",
     "react-json-view": "^1.21.3"
   },
   "devDependencies": {
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.7",
-    "@vitejs/plugin-react": "^1.2.0",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "babel-preset-nano-react-app": "^0.1.0",
-    "sass": "^1.45.2",
-    "typescript": "^3.8.3",
-    "vite": "^2.6.7"
+    "sass": "^1.78.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.3"
   }
 }
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/