From 871a85d9343cf49646d13dc455c062efadcb959a Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Sat, 12 Feb 2022 11:33:52 +0100
Subject: Beatified code

---
 src/components/Content/Content.tsx | 167 +++++++++++++++++++++----------------
 1 file changed, 94 insertions(+), 73 deletions(-)

(limited to 'src/components/Content/Content.tsx')

diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index c7a5f58..56a802f 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -1,120 +1,141 @@
 import * as React from "react";
-import {Dispatch, SetStateAction, useContext, useMemo} from "react";
-import {RequestPayload, ResponsePayload, Headers} 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";
+import { Dispatch, SetStateAction, useContext, useMemo } from "react";
+import { RequestPayload, ResponsePayload, Headers } 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: Headers, key: string, unit?: string): string | null {
+function getHeader(
+  headers: Headers,
+  key: string,
+  unit?: string
+): string | null {
   try {
-    const [_, value] = headers.find(([headerKey]) => headerKey.toLowerCase() === key.toLowerCase())
-    return unit !== undefined
-      ? `${value}${unit}`
-      : value
+    const [_, value] = headers.find(
+      ([headerKey]) => headerKey.toLowerCase() === key.toLowerCase()
+    );
+    return unit !== undefined ? `${value}${unit}` : value;
   } catch {
     return null;
   }
 }
 
 interface ContentProps {
-  data: RequestPayload | ResponsePayload
-  setRaw: Dispatch<SetStateAction<boolean>>
-  raw?: boolean
+  data: RequestPayload | ResponsePayload;
+  setRaw: Dispatch<SetStateAction<boolean>>;
+  raw?: boolean;
 }
 
-export default function Content({ raw, setRaw, data }: ContentProps): JSX.Element {
+export default function Content({
+  raw,
+  setRaw,
+  data,
+}: ContentProps): JSX.Element {
   return (
     <div className={styles.content}>
       <Container fluid className="border-bottom">
         <Row className="py-3">
-            <Col className="form-check form-switch ms-3">
-              <input className="form-check-input" id='raw' type='checkbox' checked={raw} role="switch" onChange={() => setRaw(!raw)}/>
-              <label htmlFor='raw' className="form-check-label">Raw</label>
-            </Col>
+          <Col className="form-check form-switch ms-3">
+            <input
+              className="form-check-input"
+              id="raw"
+              type="checkbox"
+              checked={raw}
+              role="switch"
+              onChange={() => setRaw(!raw)}
+            />
+            <label htmlFor="raw" className="form-check-label">
+              Raw
+            </label>
+          </Col>
           <Col xs="auto">
-            {
-              [
-                getHeader(data.headers, 'content-length', 'bytes'),
-                getHeader(data.headers, 'content-type'),
-              ].filter(x => x !== null).join('; ')
-            }
+            {[
+              getHeader(data.headers, "content-length", "bytes"),
+              getHeader(data.headers, "content-type"),
+            ]
+              .filter((x) => x !== null)
+              .join("; ")}
           </Col>
         </Row>
       </Container>
       <Row className={styles.body}>
         {(() => {
           try {
-            return ContentBody({ data, raw })
+            return ContentBody({ data, raw });
           } catch {
             return (
               <div className={styles.renderError}>
                 <p>Body could not be rendered</p>
-                <Button variant="link" onClick={() => setRaw(true)}>View raw</Button>
+                <Button variant="link" onClick={() => setRaw(true)}>
+                  View raw
+                </Button>
               </div>
-            )
+            );
           }
         })()}
       </Row>
-    </div >
-  )
-};
-
-function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) {
-    const { darkMode } = useContext(DarkModeContext);
-    const contentType = useMemo(() => {
-      if (raw) {
-        return '';
-      }
-
-      const type = getHeader(data.headers, 'content-type');
-      return type.toLowerCase().split(';')[0];
-    }, [data, raw]);
+    </div>
+  );
+}
 
+function ContentBody({ data, raw = false }: Omit<ContentProps, "setRaw">) {
+  const { darkMode } = useContext(DarkModeContext);
+  const contentType = useMemo(() => {
     if (raw) {
-      return (
-        <pre className="mb-0">
-          <code>
-            {atob(data.body)}
-          </code>
-        </pre>
-      )
+      return "";
     }
 
-    if (['application/pdf', 'text/html'].includes(contentType)) {
-      return <iframe
+    const type = getHeader(data.headers, "content-type");
+    return type.toLowerCase().split(";")[0];
+  }, [data, raw]);
+
+  if (raw) {
+    return (
+      <pre className="mb-0">
+        <code>{atob(data.body)}</code>
+      </pre>
+    );
+  }
+
+  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'
-        sandbox=''
+        srcDoc={contentType === "text/html" ? atob(data.body) : undefined}
+        loading="lazy"
+        sandbox=""
       />
-    }
+    );
+  }
 
-    if (contentType.startsWith('application/json')) {
-      return <ReactJson
+  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',
+          padding: "1em",
+          width: "100%",
+          height: "100%",
+          overflowY: "auto",
         }}
       />
-    }
+    );
+  }
 
-    if (contentType.startsWith('audio')) {
-      return <audio src={`data:${contentType};base64,${data.body}`} />
-    }
+  if (contentType.startsWith("audio")) {
+    return <audio src={`data:${contentType};base64,${data.body}`} />;
+  }
 
-    if (contentType.startsWith('video')) {
-      return <video src={`data:${contentType};base64,${data.body}`} />
-    }
+  if (contentType.startsWith("video")) {
+    return <video src={`data:${contentType};base64,${data.body}`} />;
+  }
 
-    if (contentType.startsWith('image')) {
-      return <img src={`data:${contentType};base64,${data.body}`} alt=''/>
-    }
+  if (contentType.startsWith("image")) {
+    return <img src={`data:${contentType};base64,${data.body}`} alt="" />;
+  }
 
-    throw new Error('Not Rendered');
-};
+  throw new Error("Not Rendered");
+}
-- 
cgit v1.2.3