Added ui

13 files changed, 654 insertions, 133 deletions

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 5e17388..ad36add 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -13,7 +13,8 @@ import Moon from "~/components/Icons/Moon";
 import Trash from "~/components/Icons/Trash";
 import { DarkModeContext } from "~/contexts/DarkMode";
 import RequestList from "~/components/RequestList/RequestList";
-import { ReadyState, RequestResponse } from "~/types";
+import { Call, ReadyState } from "~/types";
+import { ConnectionContext } from "~/contexts/Connection";
 
 interface Config {
   url: string;
@@ -48,29 +49,14 @@ const statusTextMap: ReadyStateMap = {
 
 export default function App() {
   const { darkMode, toggle } = useContext(DarkModeContext);
-  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 { config, selectedCall, setSelectedCall, readyState, clear } =
+    useContext(ConnectionContext);
 
   useEffect(() => {
     const url = new URL(config?.url ?? "https://loading...");
     document.title = `${statusIconMap[readyState]} ${url.host} | TTUN`;
   }, [readyState, config?.url]);
 
-  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,
@@ -80,7 +66,7 @@ export default function App() {
     null,
     {
       onClick: () => {
-        setSelectedRequestIndex(null);
+        setSelectedCall(null);
         clear();
       },
       icon: <Trash />,
@@ -106,14 +92,15 @@ export default function App() {
                 </a>
               </Navbar.Text>
               <Navbar.Toggle aria-controls="settings" />
-              <Navbar.Collapse id="settings" className="ms-2">
+              <Navbar.Collapse id="settings" className="ms-2" role="button">
                 <Nav>
                   <NavDropdown align="end" title={<Sliders />}>
-                    {settingsMenu.map((item) => {
+                    {settingsMenu.map((item, index) => {
                       if (item !== null) {
                         const { onClick, icon, label } = item;
                         return (
                           <NavDropdown.Item
+                            key={label}
                             onClick={onClick}
                             className="d-flex align-items-center"
                           >
@@ -122,7 +109,7 @@ export default function App() {
                           </NavDropdown.Item>
                         );
                       } else {
-                        return <NavDropdown.Divider />;
+                        return <NavDropdown.Divider key={`item-${index}`} />;
                       }
                     })}
                   </NavDropdown>
@@ -134,14 +121,10 @@ export default function App() {
 
         <main className={styles.main}>
           <div className={classNames("border-end", styles.sidebar)}>
-            <RequestList
-              requests={calls}
-              selectedRequestIndex={selectedRequestIndex}
-              setSelectedRequestIndex={setSelectedRequestIndex}
-            />
+            <RequestList />
           </div>
           <div className={styles.details}>
-            <RequestDetails requestResponse={selectedRequest} />
+            <RequestDetails />
           </div>
         </main>
       </div>
diff --git a/src/components/Frames/Frames.module.scss b/src/components/Frames/Frames.module.scss
new file mode 100644
index 0000000..821f0b8
--- /dev/null
+++ b/src/components/Frames/Frames.module.scss
@@ -0,0 +1,9 @@
+.arrow {
+  &.outbound {
+    color: green;
+  }
+
+  &.inbound {
+    color: red;
+  }
+}
diff --git a/src/components/Frames/Frames.tsx b/src/components/Frames/Frames.tsx
new file mode 100644
index 0000000..83c4c96
--- /dev/null
+++ b/src/components/Frames/Frames.tsx
@@ -0,0 +1,75 @@
+import { Frame } from "~/types";
+import React, { PropsWithChildren, useContext } from "react";
+import { Col, ListGroup, Row } from "react-bootstrap";
+import classNames from "classnames";
+import styles from "./Frames.module.scss";
+import dayjs from "dayjs";
+import ReactJson from "react-json-view";
+import { DarkModeContext } from "~/contexts/DarkMode";
+
+function isJson(data: any): boolean {
+  try {
+    JSON.parse(data);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+interface FramesProps {
+  frames: Frame[];
+}
+
+export default function Frames({
+  frames,
+}: PropsWithChildren<FramesProps>): JSX.Element {
+  const { darkMode } = useContext(DarkModeContext);
+  return (
+    <ListGroup variant="flush" as="ul" className={"flex-grow-1"}>
+      {frames.length > 0 ? (
+        frames.map((frame) => {
+          // Inbound relative to the client
+          const inbound = frame.type !== "websocket_inbound";
+
+          const body =
+            frame.type !== "websocket_disconnect"
+              ? atob(frame.payload.body)
+              : null;
+
+          return (
+            <ListGroup.Item
+              as="li"
+              key={frame.payload.id}
+              className={classNames({
+                "border-bottom": true,
+              })}
+            >
+              <Row>
+                <Col className="flex-grow-0 d-flex align-items-center text-nowrap text-muted">
+                  {dayjs(frame.payload?.timestamp).format("HH:mm:ss.SSS")}
+                </Col>
+                <Col
+                  className={classNames(
+                    styles.arrow,
+                    "flex-grow-0 d-flex align-items-center flex-nowrap",
+                    {
+                      [styles.inbound]: inbound,
+                      [styles.outbound]: !inbound,
+                    }
+                  )}
+                >
+                  {inbound ? "▼" : "▲"}
+                </Col>
+                <Col className="flex-grow-1">{body}</Col>
+              </Row>
+            </ListGroup.Item>
+          );
+        })
+      ) : (
+        <div className={styles.noRequest}>
+          <p>No messages</p>
+        </div>
+      )}
+    </ListGroup>
+  );
+}
diff --git a/src/components/Icons/Sliders.tsx b/src/components/Icons/Sliders.tsx
index 66d6fac..3c9b38b 100644
--- a/src/components/Icons/Sliders.tsx
+++ b/src/components/Icons/Sliders.tsx
@@ -11,7 +11,7 @@ export default function Sliders() {
       viewBox="0 0 16 16"
     >
       <path