From a087494f6809a7a8ea8e6c27a105d8c8f0f3839e Mon Sep 17 00:00:00 2001 From: Tom van der Lee Date: Wed, 4 Sep 2024 10:27:24 +0200 Subject: Updated the libraries --- package.json | 27 +- src/components/App/App.tsx | 18 +- src/components/Content/Content.tsx | 19 +- src/components/Frames/Frames.tsx | 3 +- src/components/RequestList/RequestList.tsx | 4 +- src/components/RequestSummary/RequestSummary.tsx | 3 +- src/contexts/DarkMode.tsx | 41 -- src/contexts/Settings.tsx | 65 +++ src/index.scss | 1 - src/index.tsx | 6 +- src/types.ts | 4 + vite.config.js | 12 - vite.config.mjs | 12 + yarn.lock | 622 +++++++++++++---------- 14 files changed, 471 insertions(+), 366 deletions(-) delete mode 100644 src/contexts/DarkMode.tsx create mode 100644 src/contexts/Settings.tsx delete mode 100644 vite.config.js create mode 100644 vite.config.mjs 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 ? : , 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) { - 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) { ); } - if (["application/pdf", "text/html"].includes(contentType)) { + if ( + contentType !== undefined && + ["application/pdf", "text/html"].includes(contentType) + ) { return (