From f69a7786da3ba21373574ee6c96371769a72ac42 Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Tue, 25 Jan 2022 22:03:00 +0100
Subject: Fixed issue with json viewer

---
 src/components/App/App.tsx         | 5 +++--
 src/components/Content/Content.tsx | 7 ++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

(limited to 'src/components')

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',
         }}
       />
     }
-- 
cgit v1.2.3