Fixed issue with json viewer

5 files changed, 56 insertions, 10 deletions

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index bbab612..3f50f22 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import {ReactElement, useEffect, useMemo, useState} from "react";
+import {ReactElement, useContext, useEffect, useMemo, useState} from "react";
 import useRequests, {
   ReadyState,
   RequestResponse
@@ -16,6 +16,7 @@ import {Sliders} from "../Icons/Sliders";
 import {Sun} from "../Icons/Sun";
 import {Moon} from "../Icons/Moon";
 import Trash from "../Icons/Trash";
+import {DarkModeContext} from "../../contexts/DarkMode";
 
 interface Config {
   url: string
@@ -49,7 +50,7 @@ const statusTextMap: ReadyStateMap = {
 }
 
 export default function App() {
-  const { darkMode, toggle } = useDarkMode();
+  const { darkMode, toggle } = useContext(DarkModeContext);
   const [config, setConfig]= useState<Config | null>(null)
 
   const { calls, readyState, clear } = useRequests({
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index 95ee444..1341e4f 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -1,9 +1,10 @@
 import * as React from "react";
-import {Dispatch, SetStateAction, useMemo} from "react";
+import {Dispatch, SetStateAction, useContext, useMemo} from "react";
 import {RequestPayload, ResponsePayload} from "~hooks/useRequests";
 import ReactJson from 'react-json-view';
 import styles from './Content.module.scss';
 import {Button, Col, Container, Row} from "react-bootstrap";
+import {DarkModeContext} from "../../contexts/DarkMode";
 
 function getHeader(headers: { [key: string]: string }, key: string, unit?: string): string | null {
   console.log(headers, key)
@@ -63,6 +64,7 @@ export default function Content({ raw, setRaw, data }: ContentProps): JSX.Elemen
 };
 
 function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) {
+    const { darkMode } = useContext(DarkModeContext);
     const contentType = useMemo(() => {
       if (raw) {
         return '';
@@ -84,6 +86,7 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) {
 
     if (['application/pdf', 'text/html'].includes(contentType)) {
       return <iframe
+        className="bg-white"
         src={`data:${contentType};base64,${data.body}`}
         srcDoc={contentType === 'text/html' ? atob(data.body) : undefined}
         loading='lazy'
@@ -94,10 +97,12 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) {
     if (contentType.startsWith('application/json')) {
       return <ReactJson
         src={JSON.parse(atob(data.body))}
+        theme={darkMode ? "monokai" : undefined}
         style={{
           padding: '1em',
           width: '100%',
           height: '100%',
+          overflowY: 'auto',
         }}
       />
     }
diff --git a/src/contexts/DarkMode.tsx b/src/contexts/DarkMode.tsx
new file mode 100644
index 0000000..6dc1c31
--- /dev/null
+++ b/src/contexts/DarkMode.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import {
+  Context,
+  createContext,
+  ReactElement,
+  ReactNode, 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>;
+interface DarkModeProviderProps {
+  children: ReactNode
+}
+
+export default function DarkModeProvider({ children }: DarkModeProviderProps) {
+  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/hooks/useDarkMode.tsx b/src/hooks/useDarkMode.tsx
index fe4ce95..18aea68 100644
--- a/src/hooks/useDarkMode.tsx
+++ b/src/hooks/useDarkMode.tsx
@@ -7,12 +7,6 @@ export interface UseDarkMode {
 }
 
 export default function useDarkMode() {
-  const themeConfig = useMemo(() => new ThemeConfig(), []);
-  const [darkMode, setDarkMode] = useState(() => themeConfig.getTheme() === 'dark')
-
-  useEffect(() => {
-    themeConfig.setTheme(darkMode ? 'dark' : 'light');
-  }, [darkMode])
 
   return {
     darkMode,
diff --git a/src/index.tsx b/src/index.tsx
index a6c4952..037092d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,5 +3,10 @@ import * as ReactDOM from "react-dom";
 import App from "./components/App/App";
 
 import './index.scss';
+import DarkModeProvider from "./contexts/DarkMode";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render((
+  <DarkModeProvider>
+    <App />
+  </DarkModeProvider>
+), document.getElementById("root"));