Beatified codev1.3.0

11 files changed, 487 insertions, 415 deletions

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>
+    )
   );
 }
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");
+}
diff --git a/src/components/Icons/Filter.tsx b/src/components/Icons/Filter.tsx
index a14183d..07796df 100644
--- a/src/components/Icons/Filter.tsx
+++ b/src/components/Icons/Filter.tsx
@@ -1,10 +1,16 @@
 import * as React from "react";
 
 export function Filter() {
-  return <svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" fill="currentColor" className="bi bi-filter"
-              viewBox="0 0 16 16">
-    <path
-      d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
-  </svg>;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      className="bi bi-filter"
+      viewBox="0 0 16 16"
+    >
+      <path d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z" />
+    </svg>
+  );
 }
diff --git a/src/components/Icons/Moon.tsx b/src/components/Icons/Moon.tsx
index 7e3e680..303da04 100644
--- a/src/components/Icons/Moon.tsx
+++ b/src/components/Icons/Moon.tsx
@@ -1,11 +1,16 @@
 import * as React from "react";
 
 export function Moon() {
-  return <svg xmlns="http://www.w3.org/2000/svg"
-              width="16" height="16" fill="currentColor"
-              className="bi bi-moon"
-              viewBox="0 0 16 16">
-    <path
-      d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z"/>
-  </svg>;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      className="bi bi-moon"
+      viewBox="0 0 16 16"
+    >
+      <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z" />
+    </svg>
+  );
 }
diff --git a/src/components/Icons/Sliders.tsx b/src/components/Icons/Sliders.tsx
index 9feef34..36c632f 100644
--- a/src/components/Icons/Sliders.tsx
+++ b/src/components/Icons/Sliders.tsx
@@ -1,10 +1,19 @@
 import * as React from "react";
 
 export function Sliders() {
-  return <svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" fill="currentColor"
-              className="bi bi-sliders" viewBox="0 0 16 16">
-    <path fill-rule="evenodd"
-          d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z"/>
-  </svg>;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      className="bi bi-sliders"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z"
+      />
+    </svg>
+  );
 }
diff --git a/src/components/Icons/Sun.tsx b/src/components/Icons/Sun.tsx
index 93a5187..f1e37a6 100644
--- a/src/components/Icons/Sun.tsx
+++ b/src/components/Icons/Sun.tsx
@@ -1,9 +1,16 @@
 import * as React from "react";
 
 export function Sun() {
-  return <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-              fill="currentColor" className="bi bi-sun" viewBox="0 0 16 16">
-    <path
-      d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
-  </svg>;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      className="bi bi-sun"
+      viewBox="0 0 16 16"
+    >
+      <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+    </svg>
+  );
 }
diff --git a/src/components/Icons/Trash.tsx b/src/components/Icons/Trash.tsx
index b1fb2c3..6c0039b 100644
--- a/src/components/Icons/Trash.tsx
+++ b/src/components/Icons/Trash.tsx
@@ -2,12 +2,19 @@ import * as React from "react";
 
 export default function Trash() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-         fill="currentColor" className="bi bi-trash" viewBox="0 0 16 16">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      className="bi bi-trash"
+      viewBox="0 0 16 16"
+    >
+      <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
       <path
-        d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
-      <path fill-rule="evenodd"
-            d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+        fill-rule="evenodd"
+        d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
+      />
     </svg>
-  )
+  );
 }
diff --git a/src/components/RequestDetails/RequestDetails.tsx b/src/components/RequestDetails/RequestDetails.tsx
index 34e572c..693f691 100644
--- a/src/components/RequestDetails/RequestDetails.tsx
+++ b/src/components/RequestDetails/RequestDetails.tsx
@@ -1,94 +1,87 @@
 import * as React from "react";
-import {useCallback, useMemo, useState} from "react";
-import {RequestResponse, Headers} from "../../hooks/useRequests";
+import { useCallback, useMemo, useState } from "react";
+import { RequestResponse, Headers } from "../../hooks/useRequests";
 import styles from "./RequestDetails.module.scss";
 import RequestSummary from "../RequestSummary/RequestSummary";
 import Content from "../Content/Content";
-import {getHost} from "../../utils";
-import {Button, Card, Col, Container, Nav, Row, Table} from "react-bootstrap";
-
+import { getHost } from "../../utils";
+import { Button, Card, Col, Container, Nav, Row, Table } from "react-bootstrap";
 
 interface TimingProps {
   timing: number;
 }
 
-
 function Timing({ timing }: TimingProps) {
-  const value = useMemo(() => (Math.round(timing * 1000) / 1000), [timing]);
+  const value = useMemo(() => Math.round(timing * 1000) / 1000, [timing]);
   const showSeconds = useMemo(() => value > 1, [value]);
 
-  return !Number.isNaN(value)
-    ? (
-      <>
-        {`${showSeconds ? value : value * 1000}${ showSeconds ? 's' : 'ms' }`}
-      </>
-    )
-    : null;
+  return !Number.isNaN(value) ? (
+    <>{`${showSeconds ? value : value * 1000}${showSeconds ? "s" : "ms"}`}</>
+  ) : null;
 }
 
 interface HeadersProps {
-  title: string
-  headers: Headers
+  title: string;
+  headers: Headers;
 }
 
 function Headers({ title, headers }: HeadersProps) {
   return (
     <Card className="m-3">
-        <Table
-          striped
-          responsive
-          borderless
-          hover
-          className='mb-0'
-        >
-          <thead>
+      <Table striped responsive borderless hover className="mb-0">
+        <thead>
+          <tr>
+            <th colSpan={2} className="bg-dark text-white rounded-top">
+              {title}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {headers.map(([key, value]) => (
             <tr>
-              <th colSpan={2} className="bg-dark text-white rounded-top">{ title }</th>
+              <td>{key}</td>
+              <td>{value}</td>
             </tr>
-          </thead>
-          <tbody>
-          {
-            headers.map(([key, value]) => (
-              <tr>
-                <td>{key}</td>
-                <td>{value}</td>
-              </tr>
-            ))
-          }
-          </tbody>
-        </Table>
+          ))}
+        </tbody>
+      </Table>
     </Card>
-  )
+  );
 }
 
 interface DetailsProps {
-  requestResponse: RequestResponse | null
+  requestResponse: RequestResponse | null;
 }
 
-type Tab = 'headers' | 'request' | 'response'
+type Tab = "headers" | "request" | "response";
 
 export default function RequestDetails({ requestResponse }: DetailsProps) {
-  const [tab, selectTab] = useState<Tab>('headers');
+  const [tab, selectTab] = useState<Tab>("headers");
   const [raw, setRaw] = useState(false);
 
-  const resend = useCallback(async () => requestResponse !== null && fetch(
-    `http://${getHost()}/resend/`,
-    {
-      method: 'POST',
-      body: JSON.stringify({
-        ...requestResponse.request,
-        id: undefined
-      })
-    }
-  ), [requestResponse]);
+  const resend = useCallback(
+    async () =>
+      requestResponse !== null &&
+      fetch(`http://${getHost()}/resend/`, {
+        method: "POST",
+        body: JSON.stringify({
+          ...requestResponse.request,
+          id: undefined,
+        }),
+      }),
+    [requestResponse]
+  );
 
   return requestResponse !== null ? (
     <div className={styles.details}>
       <div className={styles.header}>
         <Row>
           <Col>
-            <Container fluid style={{ fontSize: '1.5em' }} className="py-3">
-              <RequestSummary requestResponse={requestResponse} className={styles.summary}/>
+            <Container fluid style={{ fontSize: "1.5em" }} className="py-3">
+              <RequestSummary
+                requestResponse={requestResponse}
+                className={styles.summary}
+              />
             </Container>
           </Col>
         </Row>
@@ -100,14 +93,10 @@ export default function RequestDetails({ requestResponse }: DetailsProps) {
               onSelect={(tab) => selectTab(tab as Tab)}
             >
               <Nav.Item>
-                <Nav.Link eventKey="headers">
-                  Headers
-                </Nav.Link >
+                <Nav.Link eventKey="headers">Headers</Nav.Link>
               </Nav.Item>
               <Nav.Item>
-                <Nav.Link eventKey="request">
-                  Request
-                </Nav.Link>
+                <Nav.Link eventKey="request">Request</Nav.Link>
               </Nav.Item>
               <Nav.Item>
                 <Nav.Link
@@ -121,46 +110,42 @@ export default function RequestDetails({ requestResponse }: DetailsProps) {
           </Col>
           <Col className="border-bottom px-3 " xs="auto">
             <Timing timing={requestResponse.response?.timing ?? NaN} />
-            <Button variant="outline-primary" onClick={() => resend()} className="ms-3">
+            <Button
+              variant="outline-primary"
+              onClick={() => resend()}
+              className="ms-3"
+            >
               Resend
             </Button>
           </Col>
         </Row>
       </div>
       <div className={styles.content}>
-        {
-          tab === 'headers' && (
-            <>
+        {tab === "headers" && (
+          <>
+            <Headers
+              title="request headers"
+              headers={requestResponse.request.headers}
+            />
+            {requestResponse.response && (
               <Headers
-                title="request headers"
-                headers={requestResponse.request.headers}
+                title="response headers"
+                headers={requestResponse.response.headers}
               />
-              {
-                requestResponse.response && (
-                  <Headers
-                    title="response headers"
-                    headers={requestResponse.response.headers}
-                  />
-                )
-              }
-            </>
-          )
-        }
-        {
-          tab === 'request' && (
-            <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/>
-          )
-        }
-        {
-          tab === 'response' && requestResponse.response !== undefined && (
-            <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/>
-          )
-        }
+            )}
+          </>
+        )}
+        {tab === "request" && (
+          <Content data={requestResponse.request} raw={raw} setRaw={setRaw} />
+        )}
+        {tab === "response" && requestResponse.response !== undefined && (
+          <Content data={requestResponse.response} raw={raw} setRaw={setRaw} />
+        )}
       </div>
     </div>
   ) : (
     <div className={styles.noRequestSelected}>
       <p>Select a request to inspect it</p>
     </div>
-  )
+  );
 }
diff --git a/src/components/RequestList/RequestList.module.scss b/src/components/RequestList/RequestList.module.scss
index 47f36c8..8022978 100644
--- a/src/components/RequestList/RequestList.module.scss
+++ b/src/components/RequestList/RequestList.module.scss
@@ -16,5 +16,4 @@
   overflow-y: hidden;
   display: flex;
   flex-flow: column nowrap;
-
 }
diff --git a/src/components/RequestList/RequestList.tsx b/src/components/RequestList/RequestList.tsx
index 95c5b75..6980738 100644
--- a/src/components/RequestList/RequestList.tsx
+++ b/src/components/RequestList/RequestList.tsx
@@ -11,26 +11,29 @@ import classNames from "classnames";
 import styles from "./RequestList.module.scss";
 import RequestSummary from "../RequestSummary/RequestSummary";
 import * as React from "react";
-import {useCallback, useContext, useMemo, useState} from "react";
-import {Method, RequestResponse} from "../../hooks/useRequests";
-import {DarkModeContext} from "../../contexts/DarkMode";
-import {Filter} from "../Icons/Filter";
+import { useCallback, useContext, useMemo, useState } from "react";
+import { Method, RequestResponse } from "../../hooks/useRequests";
+import { DarkModeContext } from "../../contexts/DarkMode";
+import { Filter } from "../Icons/Filter";
 
 interface ListProps {
-  requests: RequestResponse[],
-  selectedRequestIndex: number | null
-  setSelectedRequestIndex: (index: number) => void
+  requests: RequestResponse[];
+  selectedRequestIndex: number | null;
+  setSelectedRequestIndex: (index: number) => void;
 }
 
 type EnabledMethods = {
-  [method in Method]: boolean
-}
-
+  [method in Method]: boolean;
+};
 
-export default function RequestList({ requests, selectedRequestIndex, setSelectedRequestIndex }: ListProps) {
-  const {darkMode} = useContext(DarkModeContext)
+export default function RequestList({
+  requests,
+  selectedRequestIndex,
+  setSelectedRequestIndex,
+}: ListProps) {
+  const { darkMode } = useContext(DarkModeContext);
   const [showFilterOptions, setShowFilterOptions] = useState(false);
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useState("");
   const [enableRegex, setEnableRegex] = useState(false);
 
   const [methods, setMethods] = useState<EnabledMethods>({
@@ -49,7 +52,7 @@ export default function RequestList({ requests, selectedRequestIndex, setSelecte
       PUT: enabled,
       PATCH: enabled,
       DELETE: enabled,
-    }
+    };
 
     if (!enabled) {
       methods[method] = true;
@@ -58,146 +61,168 @@ export default function RequestList({ requests, selectedRequestIndex, setSelecte
     setMethods(methods);
   }, []);
 
-  const enabledMethods: Method[] = useMemo(() => (Object
-      .entries(methods)
-      .filter(([method, enabled]) => enabled)
-      .map(([method]) => method)
-  ), [methods]);
+  const enabledMethods: Method[] = useMemo(
+    () =>
+      Object.entries(methods)
+        .filter(([method, enabled]) => enabled)
+        .map(([method]) => method),
+    [methods]
+  );
 
   const methodLabel = useMemo(() => {
     if (enabledMethods.length == 1) {
-      return enabledMethods[0]
+      return enabledMethods[0];
     } else if (enabledMethods.length === 5) {
-      return 'ANY'
+      return "ANY";
     } else {
-      return 'CUSTOM'
+      return "CUSTOM";
     }
   }, [enabledMethods]);
 
-
-
   const filteredRequests = useMemo(() => {
-    let searchRegex = new RegExp('');
+    let searchRegex = new RegExp("");
     try {
       searchRegex = new RegExp(
-        enableRegex
-          ? search
-          : search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'),
-        'i');
-    } catch {
-
-    }
+        enableRegex ? search : search.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"),
+        "i"
+      );
+    } catch {}
 
     return (
-      (
-        requests
-          .map((request, index) => [index, request])
-          .reverse() as [number, RequestResponse][]
-      )
-        .filter(([index, request]) => (
-          enabledMethods.length > 0 === null || enabledMethods.includes(request.request.method)
-        ))
-        .filter(([index, request]) => (
-          search === '' || searchRegex.test(`${request.request.method} ${request.request.path}`)
-        ))
+      requests.map((request, index) => [index, request]).reverse() as [
+        number,
+        RequestResponse
+      ][]
     )
-  }, [requests, search, enabledMethods, enableRegex])
+      .filter(
+        ([index, request]) =>
+          enabledMethods.length > 0 === null ||
+          enabledMethods.includes(request.request.method)
+      )
+      .filter(
+        ([index, request]) =>
+          search === "" ||
+          searchRegex.test(`${request.request.method} ${request.request.path}`)
+      );
+  }, [requests, search, enabledMethods, enableRegex]);
 
   return (
-    <div className={classNames(styles.listContainer, 'd-flex')}>
-      <ListGroup variant="flush"
-                 className={classNames('flex-grow-0', 'border-bottom')}>
+    <div className={classNames(styles.listContainer, "d-flex")}>
+      <ListGroup
+        variant="flush"
+        className={classNames("flex-grow-0", "border-bottom")}
+      >
         <ListGroup.Item>
           <InputGroup>
             <DropdownButton variant="primary" title={methodLabel}>
-              <Dropdown.Item
-                onClick={() => toggleMethods(null)}>ANY</Dropdown.Item>
-              <Dropdown.Divider/>
-              <Dropdown.Item
-                onClick={() => toggleMethods('GET')}>GET</Dropdown.Item>
-              <Dropdown.Item
-                onClick={() => toggleMethods('POST')}>POST</Dropdown.Item>
-              <Dropdown.Item
-                onClick={() => toggleMethods('PUT')}>PUT</Dropdown.Item>
-              <Dropdown.Item
-                onClick={() => toggleMethods('PATCH')}>PATCH</Dropdown.Item>
-              <Dropdown.Item
-                onClick={() => toggleMethods('DELETE')}>DELETE</Dropdown.Item>
+              <Dropdown.Item onClick={() => toggleMethods(null)}>
+                ANY
+              </Dropdown.Item>
+              <Dropdown.Divider />
+              <Dropdown.Item onClick={() => toggleMethods("GET")}>
+                GET
+              </Dropdown.Item>
+              <Dropdown.Item onClick={() => toggleMethods("POST")}>
+                POST
+              </Dropdown.Item>
+              <Dropdown.Item onClick={() => toggleMethods("PUT")}>
+                PUT
+              </Dropdown.Item>
+              <Dropdown.Item onClick={() => toggleMethods("PATCH")}>
+                PATCH
+              </Dropdown.Item>
+              <Dropdown.Item onClick={() => toggleMethods("DELETE")}>
+                DELETE
+              </Dropdown.Item>
             </DropdownButton>
-            <Form.Control type="text" className='border-secondary'
-                          value={search} placeholder="Search..."
-                          onChange={({target}) => setSearch(target.value)}/>
+            <Form.Control
+              type="text"
+              className="border-secondary"
+              value={search}
+              placeholder="Search..."
+              onChange={({ target }) => setSearch(target.value)}
+            />
             <Button
-              variant={showFilterOptions ? 'secondary' : 'outline-secondary'}
-              onClick={() => setShowFilterOptions(true)}>
-              <Filter/>
+              variant={showFilterOptions ? "secondary" : "outline-secondary"}
+              onClick={() => setShowFilterOptions(true)}
+            >
+              <Filter />
             </Button>
           </InputGroup>
         </ListGroup.Item>
       </ListGroup>
       <ListGroup
-        variant='flush'
+        variant="flush"
         as="ul"
-        className={classNames(styles.list, 'flex-grow-1')}
+        className={classNames(styles.list, "flex-grow-1")}
       >
-        {
-          filteredRequests.length > 0
-            ? (
-              filteredRequests.map(([index, requestResponse]) => {
-                const selected = selectedRequestIndex === index;
-                return (
-                  <ListGroup.Item
-                    as="li"
-                    onClick={() => setSelectedRequestIndex(index)}
-                    key={`request-${index}`}
-                    className={classNames({
-                      'bg-primary': selected,
-                      'text-light': selected,
-                      'border-bottom': true
-                    })}
-                  >
-                    <RequestSummary
-                      requestResponse={requestResponse}
-                      selected={selected}
-                    />
-                  </ListGroup.Item>
-                )
-              })
-            )
-            : (
-              <div className={styles.noRequest}>
-                <p>No requests</p>
-              </div>
-            )
-        }
+        {filteredRequests.length > 0 ? (
+          filteredRequests.map(([index, requestResponse]) => {
+            const selected = selectedRequestIndex === index;
+            return (
+              <ListGroup.Item
+                as="li"
+                onClick={() => setSelectedRequestIndex(index)}
+                key={`request-${index}`}
+                className={classNames({
+                  "bg-primary": selected,
+                  "text-light": selected,
+                  "border-bottom": true,
+                })}
+              >
+                <RequestSummary
+                  requestResponse={requestResponse}
+                  selected={selected}
+                />
+              </ListGroup.Item>
+            );
+          })
+        ) : (
+          <div className={styles.noRequest}>
+            <p>No requests</p>
+          </div>
+        )}
       </ListGroup>
-      <Offcanvas className={
-        classNames({
-          'bg-dark': darkMode
-        })
-      }
-                 show={showFilterOptions}
-                 onHide={() => setShowFilterOptions(false)}>
+      <Offcanvas
+        className={classNames({
+          "bg-dark": darkMode,
+        })}
+        show={showFilterOptions}
+        onHide={() => setShowFilterOptions(false)}
+      >
         <Offcanvas.Header closeButton>
-          <Offcanvas.Title>
-            Filter Options
-          </Offcanvas.Title>
+          <Offcanvas.Title>Filter Options</Offcanvas.Title>
         </Offcanvas.Header>
         <Offcanvas.Body>
           <Form.Group className="mb-4">
             <Form.Label className="fw-bold">Search</Form.Label>
-            <Form.Control type="text" value={search} placeholder="Search..."
-                          onChange={({target}) => setSearch(target.value)}/>
-            <Form.Check className="mt-2" type='switch' label='Regex search' checked={enableRegex} onChange={() => setEnableRegex(!enableRegex)} />
+            <Form.Control
+              type="text"
+              value={search}
+              placeholder="Search..."
+              onChange={({ target }) => setSearch(target.value)}
+            />
+            <Form.Check
+              className="mt-2"
+              type="switch"
+              label="Regex search"
+              checked={enableRegex}
+              onChange={() => setEnableRegex(!enableRegex)}
+            />
           </Form.Group>
           <Form.Group>
             <Form.Label className="fw-bold">Method</Form.Label>
             {Object.entries(methods).map(([method, enabled]) => (
-              <Form.Check type='switch' label={method} checked={enabled} onChange={() => setMethods({...methods, [method]: !enabled})} />
+              <Form.Check
+                type="switch"
+                label={method}
+                checked={enabled}
+                onChange={() => setMethods({ ...methods, [method]: !enabled })}
+              />
             ))}
           </Form.Group>
         </Offcanvas.Body>
       </Offcanvas>
     </div>
-  )
+  );
 }
diff --git a/src/components/RequestSummary/RequestSummary.tsx b/src/components/RequestSummary/RequestSummary.tsx
index b3e7ddc..db2f69c 100644
--- a/src/components/RequestSummary/RequestSummary.tsx
+++ b/src/components/RequestSummary/RequestSummary.tsx
@@ -1,49 +1,54 @@
-import {RequestResponse} from "~hooks/useRequests";
+import { RequestResponse } from "~hooks/useRequests";
 import * as React from "react";
 import classNames from "classnames";
 
-import {Badge, Card, Col, Row} from "react-bootstrap";
+import { Badge, Card, Col, Row } from "react-bootstrap";
 
 interface RequestSummaryProps {
-  selected?: boolean
-  requestResponse: RequestResponse
+  selected?: boolean;
+  requestResponse: RequestResponse;
 }
 
 function isBetween(value: number, min: number, max: number) {
-  return value >= min && value <= max
+  return value >= min && value <= max;
 }
 
 function calcBadgeVariant(statusCode: number | undefined): string {
   if (statusCode === undefined) {
-    return 'secondary';
+    return "secondary";
   } else if (isBetween(statusCode, 100, 199)) {
-    return 'info';
+    return "info";
   } else if (isBetween(statusCode, 200, 299)) {
-    return 'success';
+    return "success";
   } else if (isBetween(statusCode, 300, 399)) {
-    return 'primary';
+    return "primary";
   } else if (isBetween(statusCode, 400, 499)) {
-    return 'danger';
+    return "danger";
   } else if (isBetween(statusCode, 500, 599)) {
-    return 'warning';
+    return "warning";
   }
 }
 
-export default function RequestSummary({ requestResponse: { request, response }, selected = false }: RequestSummaryProps) {
+export default function RequestSummary({
+  requestResponse: { request, response },
+  selected = false,
+}: RequestSummaryProps) {
   return (
     <Row>
-      <Col className='flex-grow-0 d-flex align-items-center'>{request.method}</Col>
-      <Col className='flex-grow-1'>{ request.path }</Col>
-      <Col className='flex-grow-0 d-flex align-items-center'>
+      <Col className="flex-grow-0 d-flex align-items-center">
+        {request.method}
+      </Col>
+      <Col className="flex-grow-1">{request.path}</Col>
+      <Col className="flex-grow-0 d-flex align-items-center">
         <Badge
           className={classNames({
-            'border': selected,
+            border: selected,
           })}
           bg={calcBadgeVariant(response?.status)}
         >
-          { response?.status ?? 'Loading...'}
+          {response?.status ?? "Loading..."}
         </Badge>
       </Col>
     </Row>
-  )
+  );
 }