From 2f27e222add9bf10b55971ab915ac411e81d24f0 Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Sun, 23 Jan 2022 19:25:56 +0100
Subject: Rewritten ui to use boostrap

---
 src/components/App/App.module.scss                 |  35 ++-
 src/components/App/App.tsx                         | 127 +++++------
 src/components/Content/Content.module.scss         |  29 ---
 src/components/Content/Content.tsx                 |  50 ++---
 src/components/Details/Details.module.scss         |  66 ------
 src/components/Details/Details.tsx                 | 237 +++++++--------------
 .../RequestSummary/RequestSummary.module.scss      |  24 ---
 src/components/RequestSummary/RequestSummary.tsx   |   1 -
 8 files changed, 172 insertions(+), 397 deletions(-)
 delete mode 100644 src/components/RequestSummary/RequestSummary.module.scss

(limited to 'src/components')

diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss
index 9837cdf..088a4f6 100644
--- a/src/components/App/App.module.scss
+++ b/src/components/App/App.module.scss
@@ -1,3 +1,34 @@
-.content {
-  flex: 1 0 auto;
+.app {
+  display: flex;
+  flex-flow: column nowrap;
+  grid-template-rows: auto 1fr;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.main {
+  display: flex;
+  flex-flow: row nowrap;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: calc((6 / 16) * 100%);
+  height: 100%;
+  overflow-y: auto;
+}
+
+.details {
+  width: calc((10 / 16) * 100%);
+  overflow: hidden;
+  height: 100%;
+}
+
+.noRequest, .noRequestSelected {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 61f88f6..cb82abc 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,12 +1,15 @@
 import * as React from "react";
-import useRequests, {RequestResponse, ReadyState} from "../../hooks/useRequests";
 import {useEffect, useMemo, useState} from "react";
+import useRequests, {
+  ReadyState,
+  RequestResponse
+} from "../../hooks/useRequests";
 
 import styles from './App.module.scss';
 import Details from "../Details/Details";
 import RequestSummary from "../RequestSummary/RequestSummary";
 import {getHost} from "../../utils";
-import {Container, Navbar, Col, Row, Nav, ListGroup} from "react-bootstrap";
+import {Container, ListGroup, Navbar} from "react-bootstrap";
 import classNames from "classnames";
 
 interface Config {
@@ -52,11 +55,12 @@ export default function App() {
   ), [selectedRequestIndex, calls]);
 
   return config && (
-    <>
+    <div className={styles.app}>
       <Navbar
         bg="dark"
         variant="dark"
         expand
+        as="header"
       >
         <Container fluid>
           <Navbar.Brand>
@@ -67,44 +71,45 @@ export default function App() {
           </Navbar.Text>
         </Container>
       </Navbar>
-      <Container>
 
-      </Container>
-      <Row className={classNames(styles.content, 'gx-0', 'overflow-hidden')}>
-        <Col className='border-end overflow-auto' xs={4}>
-          <ListGroup variant='flush'>
-            {
-              calls.length > 0
-                ? (
-                  calls.slice(0).reverse().map((requestResponse, index) => {
-                    const selected = selectedRequestIndex === calls.length - index - 1;
-                    return (
-                      <ListGroup.Item
-                        onClick={() => setSelectedRequestIndex(calls.length - index - 1)}
-                        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>
-        </Col>
-        <Col xs={8} className=''>
+      <main className={styles.main}>
+        <ListGroup
+          variant='flush'
+          as="ul"
+          className={classNames("border-end", styles.sidebar)}
+        >
+          {
+            calls.length > 0
+              ? (
+                calls.slice(0).reverse().map((requestResponse, index) => {
+                  const selected = selectedRequestIndex === calls.length - index - 1;
+                  return (
+                    <ListGroup.Item
+                      as="li"
+                      onClick={() => setSelectedRequestIndex(calls.length - index - 1)}
+                      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>
+        <div className={styles.details}>
           {
             selectedRequest !== null
               ? (
@@ -115,44 +120,8 @@ export default function App() {
                 </div>
               )
           }
-        </Col>
-      </Row>
-    </>
-    // <div className={styles.app}>
-    //   <header className={styles.header}>
-    //     {statusMap[readyState]} TTUN
-    //     <a href={config.url} target="_blank">{config.url}</a>
-    //   </header>
-    //   <main className={styles.main}>
-    //     <ul className={styles.sidebar}>
-    //       {
-    //         calls.length > 0
-    //           ? calls.slice(0).reverse().map((requestResponse, index) => (
-    //             <li onClick={() => setSelectedRequestIndex(calls.length - index - 1)} key={`request-${index}`}>
-    //               <RequestSummary requestResponse={requestResponse} />
-    //             </li>
-    //           ))
-    //           : (
-    //             <div className={styles.noRequest}>
-    //               <p>No requests</p>
-    //             </div>
-    //           )
-    //       }
-    //     </ul>
-    //
-    //     <div className={styles.details}>
-    //       {
-    //         selectedRequest !== null
-    //           ? (
-    //             <Details requestResponse={selectedRequest} />
-    //           ) : (
-    //             <div className={styles.noRequestSelected}>
-    //               <p>Select a request to inspect it</p>
-    //             </div>
-    //           )
-    //       }
-    //     </div>
-    //   </main>
-    // </div>
+        </div>
+      </main>
+    </div>
   );
 }
diff --git a/src/components/Content/Content.module.scss b/src/components/Content/Content.module.scss
index 8908516..4720afd 100644
--- a/src/components/Content/Content.module.scss
+++ b/src/components/Content/Content.module.scss
@@ -6,33 +6,10 @@
   overflow: hidden;
 }
 
-.header {
-  flex-shrink: 0;
-  flex-grow: 0;
-  width: 100%;
-  display: flex;
-  padding: 0.5em;
-  background-color: black;
-  color: white;
-}
-
 .body {
   flex-grow: 1;
   flex-shrink: 1;
   overflow-y: auto;
-
-  pre {
-    width: 100%;
-    height: 100%;
-    padding: 1em;
-    font-family: monospace;
-    overflow: auto;
-  }
-
-  iframe {
-    height: 100%;
-    width: 100%;
-  }
 }
 
 .renderError {
@@ -42,10 +19,4 @@
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
-
-  a {
-    margin-top: 1em;
-    text-decoration: underline;
-    color: blue;
-  }
 }
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index cb5e6bc..0e63f30 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -1,19 +1,9 @@
-import styles from "~components/Details/Details.module.scss";
 import * as React from "react";
-import classNames from "classnames";
+import {Dispatch, SetStateAction, useMemo} from "react";
 import {RequestPayload, ResponsePayload} from "~hooks/useRequests";
-import {
-  Dispatch,
-  forwardRef, SetStateAction,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState
-} from "react";
 import ReactJson from 'react-json-view';
 import styles from './Content.module.scss';
-import {Col, Container, Row} from "react-bootstrap";
+import {Button, Col, Container, Row} from "react-bootstrap";
 
 function getHeader(headers: { [key: string]: string }, key: string, unit?: string): string | null {
   console.log(headers, key)
@@ -37,7 +27,7 @@ interface ContentProps {
 
 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>
@@ -54,7 +44,7 @@ export default function Content({ raw, setRaw, data }: ContentProps): JSX.Elemen
           </Col>
         </Row>
       </Container>
-      <Row>
+      <Row className={styles.body}>
         {(() => {
           try {
             return ContentBody({ data, raw })
@@ -62,33 +52,13 @@ export default function Content({ raw, setRaw, data }: ContentProps): JSX.Elemen
             return (
               <div className={styles.renderError}>
                 <p>Body could not be rendered</p>
-                <a onClick={() => setRaw(true)}>View raw</a>
+                <Button variant="link" onClick={() => setRaw(true)}>View raw</Button>
               </div>
             )
           }
         })()}
       </Row>
-    </>
-    // <div className={styles.content}>
-    //   <div className={styles.header}>
-    //     <input id='raw' type='checkbox' checked={raw} onChange={() => setRaw(!raw)}/>
-    //     <label htmlFor='raw'>Raw</label>
-    //   </div>
-    //   <div className={styles.body}>
-    //     {(() => {
-    //       try {
-    //         return ContentBody({ ...props, raw })
-    //       } catch {
-    //         return (
-    //           <div className={styles.renderError}>
-    //             <p>Body could not be rendered</p>
-    //             <a onClick={() => setRaw(true)}>View raw</a>
-    //           </div>
-    //         )
-    //       }
-    //     })()}
-    //   </div>
-    // </div>
+    </div >
   )
 };
 
@@ -103,7 +73,13 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) {
     }, [data, raw]);
 
     if (raw) {
-      return <pre>{atob(data.body)}</pre>
+      return (
+        <pre className="mb-0">
+          <code>
+            {atob(data.body)}
+          </code>
+        </pre>
+      )
     }
 
     if (['application/pdf', 'text/html'].includes(contentType)) {
diff --git a/src/components/Details/Details.module.scss b/src/components/Details/Details.module.scss
index 32197f0..146b5d8 100644
--- a/src/components/Details/Details.module.scss
+++ b/src/components/Details/Details.module.scss
@@ -16,69 +16,3 @@
   flex-shrink: 1;
   overflow-y: auto;
 }
-
-.summary {
-  font-size: 2em;
-}
-
-.tabs {
-  display: flex;
-  border-bottom: 1px solid black;
-
-  &:last-child {
-    flex-grow: 1;
-  }
-}
-
-.tab {
-  background-color: white;
-  border: none;
-  border-top: 1px solid black;
-  border-right: 1px solid black;
-  border-radius: 0;
-  color: black;
-  font-size: 1.2em;
-  padding: 0.5em;
-
-  &.selected {
-    background-color: black;
-    color: white;
-  }
-}
-
-.emptySpace {
-  flex-grow: 1;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  font-size: 1.2em;
-  padding: 0.5em;
-}
-
-.resend {
-  margin-left: 1em;
-}
-
-.headers {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  border: 1px solid black;
-  margin: 1em;
-  overflow-x: auto;
-
-  h2 {
-    grid-column: 1/ span 2;
-    background-color: black;
-    color: white;
-    padding: 0.5em;
-  }
-
-  > div {
-    line-break: auto;
-    padding: 0.5em;
-
-    &:nth-of-type(4n), &:nth-of-type(4n - 1) {
-      background-color: lightgray;
-    }
-  }
-}
diff --git a/src/components/Details/Details.tsx b/src/components/Details/Details.tsx
index c96aa7b..d4bb07a 100644
--- a/src/components/Details/Details.tsx
+++ b/src/components/Details/Details.tsx
@@ -1,25 +1,11 @@
 import * as React from "react";
-import {
-  RequestPayload,
-  RequestResponse,
-  ResponsePayload
-} from "~hooks/useRequests";
-import {useCallback, useEffect, useMemo, useState} from "react";
+import {useCallback, useMemo, useState} from "react";
+import {RequestResponse} from "~hooks/useRequests";
 import styles from "./Details.module.scss";
 import RequestSummary from "../RequestSummary/RequestSummary";
-import classNames from 'classnames';
 import Content from "../Content/Content";
 import {getHost} from "../../utils";
-import {
-  Button,
-  Card,
-  Col,
-  Container,
-  Nav,
-  NavItem,
-  Row,
-  Table
-} from "react-bootstrap";
+import {Button, Card, Col, Container, Nav, Row, Table} from "react-bootstrap";
 
 
 interface TimingProps {
@@ -99,147 +85,80 @@ export default function Details({ requestResponse }: DetailsProps) {
   ), [requestResponse]);
 
   return (
-    <>
-      <Row>
-        <Col>
-          <Container fluid style={{ fontSize: '1.5em' }} className="py-3">
-            <RequestSummary requestResponse={requestResponse} className={styles.summary}/>
-          </Container>
-        </Col>
-      </Row>
-      <Row className="gx-0 d-flex">
-        <Col>
-          <Nav
-            variant="tabs"
-            activeKey={tab}
-            onSelect={(tab) => selectTab(tab as Tab)}
-          >
-            <Nav.Item>
-              <Nav.Link eventKey="headers">
-                Headers
-              </Nav.Link >
-            </Nav.Item>
-            <Nav.Item>
-              <Nav.Link eventKey="request">
-                Request
-              </Nav.Link>
-            </Nav.Item>
-            <Nav.Item>
-              <Nav.Link
-                eventKey="response"
-                disabled={requestResponse.response === undefined}
-              >
-                Response
-              </Nav.Link>
-            </Nav.Item>
-          </Nav>
-        </Col>
-        <Col className="border-bottom px-3 " xs="auto">
-          <Timing timing={requestResponse.response?.timing ?? NaN} />
-          <Button variant="outline-primary" onClick={() => resend()} className="ms-3">
-            Resend
-          </Button>
-        </Col>
-      </Row>
-      <Row>
-        <Col>
-          {
-            tab === 'headers' && (
-              <>
-                <Headers
-                  title="Request Headers"
-                  headers={requestResponse.request.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}/>
-            )
-          }
-        </Col>
-      </Row>
-    </>
-    // <div className={styles.details}>
-    //   <div className={styles.header}>
-    //
-    //     <div className={styles.tabs}>
-    //       <button
-    //         onClick={() => selectTab('headers')}
-    //         className={classNames(styles.tab, {
-    //           [styles.selected]: tab === 'headers'
-    //         })}
-    //       >
-    //         Headers
-    //       </button>
-    //       <button
-    //         onClick={() => selectTab('request')}
-    //         className={classNames(styles.tab, {
-    //           [styles.selected]: tab === 'request'
-    //         })}
-    //       >
-    //         Request
-    //       </button>
-    //       <button
-    //         onClick={() => selectTab('response')}
-    //         className={classNames(styles.tab, {
-    //           [styles.selected]: tab === 'response'
-    //         })}
-    //         disabled={requestResponse.response === undefined}
-    //       >
-    //         Response
-    //       </button>
-    //
-    //       <div className={styles.emptySpace}>
-    //         <Timing timing={requestResponse.response?.timing ?? NaN} />
-    //         <button className={styles.resend} onClick={() => resend()}>Resend</button>
-    //       </div>
-    //     </div>
-    //   </div>
-    //   <div className={styles.content}>
-    //     {
-    //       tab === 'headers' && (
-    //         <>
-    //           <Headers
-    //             title="Request Headers"
-    //             headers={requestResponse.request.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}/>
-    //       )
-    //     }
-    //   </div>
-    // </div>
+    <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>
+          </Col>
+        </Row>
+        <Row className="gx-0 d-flex">
+          <Col>
+            <Nav
+              variant="tabs"
+              activeKey={tab}
+              onSelect={(tab) => selectTab(tab as Tab)}
+            >
+              <Nav.Item>
+                <Nav.Link eventKey="headers">
+                  Headers
+                </Nav.Link >
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link eventKey="request">
+                  Request
+                </Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link
+                  eventKey="response"
+                  disabled={requestResponse.response === undefined}
+                >
+                  Response
+                </Nav.Link>
+              </Nav.Item>
+            </Nav>
+          </Col>
+          <Col className="border-bottom px-3 " xs="auto">
+            <Timing timing={requestResponse.response?.timing ?? NaN} />
+            <Button variant="outline-primary" onClick={() => resend()} className="ms-3">
+              Resend
+            </Button>
+          </Col>
+        </Row>
+      </div>
+      <div className={styles.content}>
+        {
+          tab === 'headers' && (
+            <>
+              <Headers
+                title="request headers"
+                headers={requestResponse.request.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}/>
+          )
+        }
+      </div>
+    </div>
   )
 }
diff --git a/src/components/RequestSummary/RequestSummary.module.scss b/src/components/RequestSummary/RequestSummary.module.scss
deleted file mode 100644
index e1752b3..0000000
--- a/src/components/RequestSummary/RequestSummary.module.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.requestSummary {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  padding: 1em;
-  grid-gap: 1em;
-  align-items: center;
-}
-
-.method {
-}
-
-.statusCode {
-  padding: 0.2em;
-  border-radius: 0.4em;
-  background-color: darkgray;
-
-  &.info, &.success, &.redirect {
-    background-color: forestgreen;
-  }
-
-  &.clientError, &.serverError {
-    background-color: red;
-  }
-}
diff --git a/src/components/RequestSummary/RequestSummary.tsx b/src/components/RequestSummary/RequestSummary.tsx
index ea28f3e..b3e7ddc 100644
--- a/src/components/RequestSummary/RequestSummary.tsx
+++ b/src/components/RequestSummary/RequestSummary.tsx
@@ -2,7 +2,6 @@ import {RequestResponse} from "~hooks/useRequests";
 import * as React from "react";
 import classNames from "classnames";
 
-import styles from './RequestSummary.module.scss';
 import {Badge, Card, Col, Row} from "react-bootstrap";
 
 interface RequestSummaryProps {
-- 
cgit v1.2.3