From 648b804e72d4831e41e02dfd7d6b5a9ac7660b58 Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Fri, 30 Aug 2024 11:19:30 +0200
Subject: Added ui

---
 src/components/App/App.tsx                       | 39 ++++-------
 src/components/Frames/Frames.module.scss         |  9 +++
 src/components/Frames/Frames.tsx                 | 75 ++++++++++++++++++++++
 src/components/Icons/Sliders.tsx                 |  2 +-
 src/components/Icons/Trash.tsx                   |  2 +-
 src/components/RequestDetails/RequestDetails.tsx | 82 +++++++++++++++---------
 src/components/RequestList/RequestList.tsx       | 48 +++++++-------
 src/components/RequestSummary/RequestSummary.tsx |  2 +-
 8 files changed, 173 insertions(+), 86 deletions(-)
 create mode 100644 src/components/Frames/Frames.module.scss
 create mode 100644 src/components/Frames/Frames.tsx

(limited to 'src/components')

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
-        fill-rule="evenodd"
+        fillRule="evenodd"
         d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z"
       />
     </svg>
diff --git a/src/components/Icons/Trash.tsx b/src/components/Icons/Trash.tsx
index 6c0039b..cf03546 100644
--- a/src/components/Icons/Trash.tsx
+++ b/src/components/Icons/Trash.tsx
@@ -12,7 +12,7 @@ export default function Trash() {
     >
       <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
       />
     </svg>
diff --git a/src/components/RequestDetails/RequestDetails.tsx b/src/components/RequestDetails/RequestDetails.tsx
index 9000220..22b3fe2 100644
--- a/src/components/RequestDetails/RequestDetails.tsx
+++ b/src/components/RequestDetails/RequestDetails.tsx
@@ -1,11 +1,13 @@
 import * as React from "react";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useContext, useMemo, useState } from "react";
 import styles from "~/components/RequestDetails/RequestDetails.module.scss";
 import RequestSummary from "~/components/RequestSummary/RequestSummary";
 import Content from "~/components/Content/Content";
 import { getHost } from "~/utils";
 import { Button, Card, Col, Container, Nav, Row, Table } from "react-bootstrap";
-import { Headers, RequestResponse } from "~/types";
+import { Call, Headers, selectedCall } from "~/types";
+import { ConnectionContext } from "~/contexts/Connection";
+import Frames from "~/components/Frames/Frames";
 
 interface TimingProps {
   timing: number;
@@ -49,37 +51,35 @@ function HeaderTable({ title, headers }: HeaderTableProps) {
   );
 }
 
-interface DetailsProps {
-  requestResponse: RequestResponse | null;
-}
+type Tab = "headers" | "request" | "response" | "messages";
 
-type Tab = "headers" | "request" | "response";
+export default function RequestDetails() {
+  const { selectedCall } = useContext(ConnectionContext);
 
-export default function RequestDetails({ requestResponse }: DetailsProps) {
   const [tab, selectTab] = useState<Tab>("headers");
   const [raw, setRaw] = useState(false);
 
   const resend = useCallback(
     async () =>
-      requestResponse !== null &&
+      selectedCall !== null &&
       fetch(`http://${getHost()}/resend/`, {
         method: "POST",
         body: JSON.stringify({
-          ...requestResponse.request,
+          ...selectedCall.request,
           id: undefined,
         }),
       }),
-    [requestResponse]
+    [selectedCall]
   );
 
-  return requestResponse !== null ? (
+  return selectedCall !== null ? (
     <div className={styles.details}>
       <div className={styles.header}>
         <Row>
           <Col>
             <Container fluid style={{ fontSize: "1.5em" }} className="py-3">
               <RequestSummary
-                requestResponse={requestResponse}
+                requestResponse={selectedCall}
                 className={styles.summary}
               />
             </Container>
@@ -98,18 +98,29 @@ export default function RequestDetails({ requestResponse }: DetailsProps) {
               <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>
+              {selectedCall.type === "RequestResponse" && (
+                <>
+                  <Nav.Item>
+                    <Nav.Link
+                      eventKey="response"
+                      disabled={selectedCall.response === undefined}
+                    >
+                      Response
+                    </Nav.Link>
+                  </Nav.Item>
+                </>
+              )}
+              {selectedCall.type === "WebsocketConnection" && (
+                <>
+                  <Nav.Item>
+                    <Nav.Link eventKey="response">Messages</Nav.Link>
+                  </Nav.Item>
+                </>
+              )}
             </Nav>
           </Col>
           <Col className="border-bottom px-3 " xs="auto">
-            <Timing timing={requestResponse.response?.timing ?? NaN} />
+            <Timing timing={selectedCall.response?.timing ?? NaN} />
             <Button
               variant="outline-primary"
               onClick={() => resend()}
@@ -125,21 +136,30 @@ export default function RequestDetails({ requestResponse }: DetailsProps) {
           <>
             <HeaderTable
               title="request headers"
-              headers={requestResponse.request.headers}
+              headers={selectedCall.request.headers}
             />
-            {requestResponse.response && (
-              <HeaderTable
-                title="response headers"
-                headers={requestResponse.response.headers}
-              />
-            )}
+
+            {selectedCall.type === "RequestResponse" &&
+              selectedCall.response !== undefined && (
+                <HeaderTable
+                  title="response headers"
+                  headers={selectedCall.response.headers}
+                />
+              )}
           </>
         )}
         {tab === "request" && (
-          <Content data={requestResponse.request} raw={raw} setRaw={setRaw} />
+          <Content data={selectedCall.request} raw={raw} setRaw={setRaw} />
         )}
-        {tab === "response" && requestResponse.response !== undefined && (
-          <Content data={requestResponse.response} raw={raw} setRaw={setRaw} />
+        {selectedCall.type === "RequestResponse" &&
+          tab === "response" &&
+          selectedCall.response !== undefined && (
+            <Content data={selectedCall.response} raw={raw} setRaw={setRaw} />
+          )}
+        {selectedCall.type === "WebsocketConnection" && tab === "response" && (
+          <Frames frames={selectedCall.frames} />
+          // <Content data={selectedCall.frames} raw={false} setRaw={setRaw} />
+          // <pre>{JSON.stringify(selectedCall.frames, undefined, 2)}</pre>
         )}
       </div>
     </div>
diff --git a/src/components/RequestList/RequestList.tsx b/src/components/RequestList/RequestList.tsx
index a4e9a0e..82a6b21 100644
--- a/src/components/RequestList/RequestList.tsx
+++ b/src/components/RequestList/RequestList.tsx
@@ -11,27 +11,24 @@ import classNames from "classnames";
 import styles from "~/components/RequestList/RequestList.module.scss";
 import RequestSummary from "~/components/RequestSummary/RequestSummary";
 import * as React from "react";
-import { useCallback, useContext, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { DarkModeContext } from "~/contexts/DarkMode";
 import Filter from "~/components/Icons/Filter";
-import { Method, RequestResponse } from "~/types";
-
-interface ListProps {
-  requests: RequestResponse[];
-  selectedRequestIndex: number | null;
-  setSelectedRequestIndex: (index: number) => void;
-}
+import { Call, Method } from "~/types";
+import { ConnectionContext } from "~/contexts/Connection";
 
 type EnabledMethods = {
   [method in Method]: boolean;
 };
 
-export default function RequestList({
-  requests,
-  selectedRequestIndex,
-  setSelectedRequestIndex,
-}: ListProps) {
+export default function RequestList() {
   const { darkMode } = useContext(DarkModeContext);
+  const {
+    calls: requests,
+    selectedCall,
+    setSelectedCall,
+  } = useContext(ConnectionContext);
+
   const [showFilterOptions, setShowFilterOptions] = useState(false);
   const [search, setSearch] = useState("");
   const [enableRegex, setEnableRegex] = useState(false);
@@ -73,7 +70,7 @@ export default function RequestList({
     () =>
       Object.entries(methods)
         .filter(([method, enabled]) => enabled)
-        .map(([method]) => method),
+        .map(([method]) => method) as Method[],
     [methods]
   );
 
@@ -97,16 +94,14 @@ export default function RequestList({
     } catch {}
 
     return requests
-      .map<[number, RequestResponse]>((request, index) => [index, request])
       .reverse()
       .filter(
-        ([index, request]) =>
-          enabledMethods.length > 0 === null ||
+        (request) =>
+          enabledMethods.length === 0 ||
           enabledMethods.includes(request.request.method)
       )
       .filter(
-        ([index, request]) =>
-          search === "" || searchRegex.test(request.request.path)
+        (request) => search === "" || searchRegex.test(request.request.path)
       );
   }, [requests, search, enabledMethods, enableRegex]);
 
@@ -124,7 +119,10 @@ export default function RequestList({
               </Dropdown.Item>
               <Dropdown.Divider />
               {Object.entries(methods).map(([method, enabled]) => (
-                <Dropdown.Item onClick={() => toggleMethods(method as Method)}>
+                <Dropdown.Item
+                  onClick={() => toggleMethods(method as Method)}
+                  key={method}
+                >
                   {method}
                 </Dropdown.Item>
               ))}
@@ -151,13 +149,14 @@ export default function RequestList({
         className={classNames(styles.list, "flex-grow-1")}
       >
         {filteredRequests.length > 0 ? (
-          filteredRequests.map(([index, requestResponse]) => {
-            const selected = selectedRequestIndex === index;
+          filteredRequests.map((requestResponse) => {
+            const selected =
+              selectedCall?.request.id === requestResponse.request.id;
             return (
               <ListGroup.Item
                 as="li"
-                onClick={() => setSelectedRequestIndex(index)}
-                key={`request-${index}`}
+                onClick={() => setSelectedCall?.(requestResponse)}
+                key={requestResponse.request.id}
                 className={classNames({
                   "bg-primary": selected,
                   "text-light": selected,
@@ -209,6 +208,7 @@ export default function RequestList({
             <Form.Label className="fw-bold">Method</Form.Label>
             {Object.entries(methods).map(([method, enabled]) => (
               <Form.Check
+                key={method}
                 type="switch"
                 label={method}
                 checked={enabled}
diff --git a/src/components/RequestSummary/RequestSummary.tsx b/src/components/RequestSummary/RequestSummary.tsx
index 49e6086..4e97676 100644
--- a/src/components/RequestSummary/RequestSummary.tsx
+++ b/src/components/RequestSummary/RequestSummary.tsx
@@ -7,7 +7,7 @@ import dayjs from "dayjs";
 
 interface RequestSummaryProps {
   selected?: boolean;
-  requestResponse: RequestResponse;
+  requestResponse: Calls;
   showTime?: boolean;
 }
 
-- 
cgit v1.2.3