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/App/App.tsx | 189 +++++++++++++++++++++++----------------------
 1 file changed, 96 insertions(+), 93 deletions(-)

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

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index e08c84f..1d231ae 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,81 +1,88 @@
 import * as React from "react";
-import {ReactElement, useContext, useEffect, useMemo, useState} from "react";
+import { ReactElement, useContext, useEffect, useMemo, useState } from "react";
 import useRequests, {
   ReadyState,
-  RequestResponse
+  RequestResponse,
 } from "../../hooks/useRequests";
 
-import styles from './App.module.scss';
+import styles from "./App.module.scss";
 import RequestDetails from "../RequestDetails/RequestDetails";
-import {getHost} from "../../utils";
-import {Container, ListGroup, Nav, Navbar, NavDropdown} from "react-bootstrap";
+import { getHost } from "../../utils";
+import {
+  Container,
+  ListGroup,
+  Nav,
+  Navbar,
+  NavDropdown,
+} from "react-bootstrap";
 import classNames from "classnames";
-import {Sliders} from "../Icons/Sliders";
-import {Sun} from "../Icons/Sun";
-import {Moon} from "../Icons/Moon";
+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";
+import { DarkModeContext } from "../../contexts/DarkMode";
 import RequestList from "../RequestList/RequestList";
 
 interface Config {
-  url: string
+  url: string;
 }
 
 interface SettingsMenu {
-  icon: ReactElement,
-  label: string,
-  onClick: () => void,
+  icon: ReactElement;
+  label: string;
+  onClick: () => void;
 }
 
 type ReadyStateMap = {
-  [ReadyState.CONNECTING]: string,
-  [ReadyState.OPEN]: string,
-  [ReadyState.CLOSING]: string,
-  [ReadyState.CLOSED]: string,
-}
+  [ReadyState.CONNECTING]: string;
+  [ReadyState.OPEN]: string;
+  [ReadyState.CLOSING]: string;
+  [ReadyState.CLOSED]: string;
+};
 
 const statusIconMap: ReadyStateMap = {
-  [ReadyState.CONNECTING]: '🔴',
-  [ReadyState.OPEN]: '🟢',
-  [ReadyState.CLOSING]: '🔴',
-  [ReadyState.CLOSED]: '🔴',
-}
+  [ReadyState.CONNECTING]: "🔴",
+  [ReadyState.OPEN]: "🟢",
+  [ReadyState.CLOSING]: "🔴",
+  [ReadyState.CLOSED]: "🔴",
+};
 
 const statusTextMap: ReadyStateMap = {
-  [ReadyState.CONNECTING]: 'Connecting...',
-  [ReadyState.OPEN]: 'Connected',
-  [ReadyState.CLOSING]: 'Closing...',
-  [ReadyState.CLOSED]: 'Closed',
-}
+  [ReadyState.CONNECTING]: "Connecting...",
+  [ReadyState.OPEN]: "Connected",
+  [ReadyState.CLOSING]: "Closing...",
+  [ReadyState.CLOSED]: "Closed",
+};
 
 export default function App() {
   const { darkMode, toggle } = useContext(DarkModeContext);
-  const [config, setConfig]= useState<Config | null>(null)
+  const [config, setConfig] = useState<Config | null>(null);
 
   const { calls, readyState, clear } = useRequests({
     onConnect: async () => {
-      const response = await fetch(`http://${getHost()}/config/`)
-      const config = await response.json()
-      setConfig(config)
-    }
+      const response = await fetch(`http://${getHost()}/config/`);
+      const config = await response.json();
+      setConfig(config);
+    },
   });
 
   useEffect(() => {
-    const url = new URL(config?.url ?? 'https://loading...');
+    const url = new URL(config?.url ?? "https://loading...");
     document.title = `${statusIconMap[readyState]} ${url.host} | TTUN`;
-  }, [readyState, config?.url])
+  }, [readyState, config?.url]);
 
-  const [selectedRequestIndex, setSelectedRequestIndex] = useState<number | null>(null);
-  const selectedRequest = useMemo<RequestResponse | null>(() => (
-    selectedRequestIndex === null
-      ? null
-      : calls[selectedRequestIndex]
-  ), [selectedRequestIndex, calls]);
+  const [selectedRequestIndex, setSelectedRequestIndex] = useState<
+    number | null
+  >(null);
+  const selectedRequest = useMemo<RequestResponse | null>(
+    () => (selectedRequestIndex === null ? null : calls[selectedRequestIndex]),
+    [selectedRequestIndex, calls]
+  );
 
   const settingsMenu: (SettingsMenu | null)[] = [
     {
       onClick: toggle,
-      icon: darkMode ? <Sun />: <Moon />,
+      icon: darkMode ? <Sun /> : <Moon />,
       label: darkMode ? "Light mode" : "Dark mode",
     },
     null,
@@ -85,40 +92,32 @@ export default function App() {
         clear();
       },
       icon: <Trash />,
-      label: "Clear"
-    }
+      label: "Clear",
+    },
   ];
 
-  return config && (
-    <div className={styles.app}>
-      <Navbar
-        bg="dark"
-        variant="dark"
-        expand
-        as="header"
-      >
-        <Container fluid>
-          <div>
-            <Navbar.Brand>
-              TTUN
-            </Navbar.Brand>
-            <Navbar.Text>
-              {`${statusIconMap[readyState]} ${statusTextMap[readyState]}`}
-            </Navbar.Text>
-          </div>
-          <div className="d-flex">
-            <Navbar.Text>
-              <a href={config.url} target="_blank">{config.url}</a>
-            </Navbar.Text>
-            <Navbar.Toggle aria-controls="settings"/>
-            <Navbar.Collapse id="settings" className="ms-2">
-              <Nav>
-                <NavDropdown
-                  align="end"
-                  title={<Sliders/>}
-                >
-                  {
-                    settingsMenu.map((item) => {
+  return (
+    config && (
+      <div className={styles.app}>
+        <Navbar bg="dark" variant="dark" expand as="header">
+          <Container fluid>
+            <div>
+              <Navbar.Brand>TTUN</Navbar.Brand>
+              <Navbar.Text>
+                {`${statusIconMap[readyState]} ${statusTextMap[readyState]}`}
+              </Navbar.Text>
+            </div>
+            <div className="d-flex">
+              <Navbar.Text>
+                <a href={config.url} target="_blank">
+                  {config.url}
+                </a>
+              </Navbar.Text>
+              <Navbar.Toggle aria-controls="settings" />
+              <Navbar.Collapse id="settings" className="ms-2">
+                <Nav>
+                  <NavDropdown align="end" title={<Sliders />}>
+                    {settingsMenu.map((item) => {
                       if (item !== null) {
                         const { onClick, icon, label } = item;
                         return (
@@ -129,27 +128,31 @@ export default function App() {
                             {icon}
                             <span className="ms-3">{label}</span>
                           </NavDropdown.Item>
-                        )
+                        );
                       } else {
-                        return <NavDropdown.Divider />
+                        return <NavDropdown.Divider />;
                       }
-                    })
-                  }
-                </NavDropdown>
-              </Nav>
-            </Navbar.Collapse>
-          </div>
-        </Container>
-      </Navbar>
+                    })}
+                  </NavDropdown>
+                </Nav>
+              </Navbar.Collapse>
+            </div>
+          </Container>
+        </Navbar>
 
-      <main className={styles.main}>
-        <div className={classNames("border-end", styles.sidebar)}>
-          <RequestList requests={calls} selectedRequestIndex={selectedRequestIndex} setSelectedRequestIndex={setSelectedRequestIndex}/>
-        </div>
-        <div className={styles.details}>
-          <RequestDetails requestResponse={selectedRequest} />
-        </div>
-      </main>
-    </div>
+        <main className={styles.main}>
+          <div className={classNames("border-end", styles.sidebar)}>
+            <RequestList
+              requests={calls}
+              selectedRequestIndex={selectedRequestIndex}
+              setSelectedRequestIndex={setSelectedRequestIndex}
+            />
+          </div>
+          <div className={styles.details}>
+            <RequestDetails requestResponse={selectedRequest} />
+          </div>
+        </main>
+      </div>
+    )
   );
 }
-- 
cgit v1.2.3