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/RequestDetails/RequestDetails.tsx | 159 ++++++++++-------------
 1 file changed, 72 insertions(+), 87 deletions(-)

(limited to 'src/components/RequestDetails')

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>
-  )
+  );
 }
-- 
cgit v1.2.3