From 51a2ac628822e96459b3d570eada953ac8927d43 Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Wed, 19 Jan 2022 21:27:21 +0100
Subject: Added boostrap

---
 src/components/App/App.module.scss               |  56 +----
 src/components/App/App.tsx                       | 118 ++++++++---
 src/components/Content/Content.tsx               |  74 +++++--
 src/components/Details/Details.tsx               | 254 ++++++++++++++++-------
 src/components/RequestSummary/RequestSummary.tsx |  49 +++--
 5 files changed, 362 insertions(+), 189 deletions(-)

(limited to 'src/components')

diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss
index 2036eb9..9837cdf 100644
--- a/src/components/App/App.module.scss
+++ b/src/components/App/App.module.scss
@@ -1,55 +1,3 @@
-.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;
-}
-
-.header {
-  font-size: 1.2em;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: space-between;
-  background: black;
-  color: white;
-  padding: 1em;
-
-  a {
-    color: white;
-  }
-}
-
-.sidebar {
-  width: calc((6 / 16) * 100%);
-  height: 100%;
-  grid-area: sidebar;
-  border-right: 1px solid black;
-  overflow-y: auto;
-
-  li {
-    border-bottom: 1px solid gray;
-  }
-}
-
-.details {
-  width: calc((10 / 16) * 100%);
-  overflow: hidden;
-  height: 100%;
-}
-
-.noRequest, .noRequestSelected {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.content {
+  flex: 1 0 auto;
 }
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index e361aa5..61f88f6 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -6,6 +6,8 @@ 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 classNames from "classnames";
 
 interface Config {
   url: string
@@ -50,29 +52,59 @@ export default function App() {
   ), [selectedRequestIndex, calls]);
 
   return config && (
-    <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>
+    <>
+      <Navbar
+        bg="dark"
+        variant="dark"
+        expand
+      >
+        <Container fluid>
+          <Navbar.Brand>
+            {statusMap[readyState]} TTUN
+          </Navbar.Brand>
+          <Navbar.Text>
+            <a href={config.url} target="_blank">{config.url}</a>
+          </Navbar.Text>
+        </Container>
+      </Navbar>
+      <Container>
 
-        <div className={styles.details}>
+      </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=''>
           {
             selectedRequest !== null
               ? (
@@ -83,8 +115,44 @@ export default function App() {
                 </div>
               )
           }
-        </div>
-      </main>
-    </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>
   );
 }
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index a7b5949..cb5e6bc 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -13,6 +13,21 @@ import {
 } from "react";
 import ReactJson from 'react-json-view';
 import styles from './Content.module.scss';
+import {Col, Container, Row} from "react-bootstrap";
+
+function getHeader(headers: { [key: string]: string }, key: string, unit?: string): string | null {
+  console.log(headers, key)
+  try {
+    const [_, value] = Object
+      .entries(headers)
+      .find(([headerKey]) => headerKey.toLowerCase() === key.toLowerCase())
+    return unit !== undefined
+      ? `${value}${unit}`
+      : value
+  } catch {
+    return null;
+  }
+}
 
 interface ContentProps {
   data: RequestPayload | ResponsePayload
@@ -20,17 +35,29 @@ interface ContentProps {
   raw?: boolean
 }
 
-export default function Content({ raw, setRaw, ...props }: ContentProps): JSX.Element {
+export default function Content({ raw, setRaw, data }: ContentProps): JSX.Element {
   return (
-    <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}>
+    <>
+      <Container fluid className="border-bottom">
+        <Row className="py-3">
+            <Col>
+              <input id='raw' type='checkbox' checked={raw} onChange={() => setRaw(!raw)}/>
+              <label htmlFor='raw' className="ps-1">Raw</label>
+            </Col>
+          <Col xs="auto">
+            {
+              [
+                getHeader(data.headers, 'content-length', 'bytes'),
+                getHeader(data.headers, 'content-type'),
+              ].filter(x => x !== null).join('; ')
+            }
+          </Col>
+        </Row>
+      </Container>
+      <Row>
         {(() => {
           try {
-            return ContentBody({ ...props, raw })
+            return ContentBody({ data, raw })
           } catch {
             return (
               <div className={styles.renderError}>
@@ -40,8 +67,28 @@ export default function Content({ raw, setRaw, ...props }: ContentProps): JSX.El
             )
           }
         })()}
-      </div>
-    </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>
   )
 };
 
@@ -51,12 +98,7 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) {
         return '';
       }
 
-      const [_, type] = (
-        Object
-          .entries(data.headers)
-          .find(([key]) => key.toLowerCase() === 'content-type')
-      );
-
+      const type = getHeader(data.headers, 'content-type');
       return type.toLowerCase().split(';')[0];
     }, [data, raw]);
 
diff --git a/src/components/Details/Details.tsx b/src/components/Details/Details.tsx
index e91c98c..c96aa7b 100644
--- a/src/components/Details/Details.tsx
+++ b/src/components/Details/Details.tsx
@@ -10,6 +10,16 @@ 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";
 
 
 interface TimingProps {
@@ -39,17 +49,31 @@ interface HeadersProps {
 
 function Headers({ title, headers }: HeadersProps) {
   return (
-    <div className={styles.headers}>
-      <h2>{ title }</h2>
-      {
-        Object.entries(headers).map(([key, value]) => (
-          <>
-            <div>{key}</div>
-            <div>{value}</div>
-          </>
-        ))
-      }
-    </div>
+    <Card className="m-3">
+        <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>
+          {
+            Object.entries(headers).map(([key, value]) => (
+              <tr>
+                <td>{key}</td>
+                <td>{value}</td>
+              </tr>
+            ))
+          }
+          </tbody>
+        </Table>
+    </Card>
   )
 }
 
@@ -75,73 +99,147 @@ export default function Details({ requestResponse }: DetailsProps) {
   ), [requestResponse]);
 
   return (
-    <div className={styles.details}>
-      <div className={styles.header}>
-        <RequestSummary requestResponse={requestResponse} className={styles.summary}/>
-
-        <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'
-            })}
+    <>
+      <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)}
           >
-            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>
+            <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>
   )
 }
diff --git a/src/components/RequestSummary/RequestSummary.tsx b/src/components/RequestSummary/RequestSummary.tsx
index af928c0..ea28f3e 100644
--- a/src/components/RequestSummary/RequestSummary.tsx
+++ b/src/components/RequestSummary/RequestSummary.tsx
@@ -3,31 +3,48 @@ 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 {
+  selected?: boolean
   requestResponse: RequestResponse
-  className?: string
 }
 
 function isBetween(value: number, min: number, max: number) {
   return value >= min && value <= max
 }
 
-export default function RequestSummary({ requestResponse: { request, response }, className = ''}: RequestSummaryProps) {
-  const statusCode = response?.status ?? 0
+function calcBadgeVariant(statusCode: number | undefined): string {
+  if (statusCode === undefined) {
+    return 'secondary';
+  } else if (isBetween(statusCode, 100, 199)) {
+    return 'info';
+  } else if (isBetween(statusCode, 200, 299)) {
+    return 'success';
+  } else if (isBetween(statusCode, 300, 399)) {
+    return 'primary';
+  } else if (isBetween(statusCode, 400, 499)) {
+    return 'danger';
+  } else if (isBetween(statusCode, 500, 599)) {
+    return 'warning';
+  }
+}
+
+export default function RequestSummary({ requestResponse: { request, response }, selected = false }: RequestSummaryProps) {
   return (
-    <div className={classNames(styles.requestSummary, className)}>
-      <span className={styles.method}>{ request.method }</span>
-      <p>{ request.path }</p>
-      <span className={classNames(styles.statusCode, {
-        [styles.info]: isBetween(statusCode, 100, 199),
-        [styles.success]: isBetween(statusCode, 200, 299),
-        [styles.redirect]: isBetween(statusCode, 300, 399),
-        [styles.clientError]: isBetween(statusCode, 400, 499),
-        [styles.serverError]: isBetween(statusCode, 500, 599)
-      })}>
-        { response?.status ?? 'Loading...'}
-      </span>
-    </div>
+    <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'>
+        <Badge
+          className={classNames({
+            'border': selected,
+          })}
+          bg={calcBadgeVariant(response?.status)}
+        >
+          { response?.status ?? 'Loading...'}
+        </Badge>
+      </Col>
+    </Row>
   )
 }
-- 
cgit v1.2.3