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 ++++++++++++++-----------------------
 2 files changed, 81 insertions(+), 81 deletions(-)

(limited to 'src/components/App')

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