From bcb77d979d817e1e609adb4d007bbbcc3f61efbd Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Thu, 30 Dec 2021 09:51:00 +0100
Subject: Prepare for github

---
 src/_reset.scss                                    |  48 +++++++
 src/components/App/App.module.scss                 |  55 ++++++++
 src/components/App/App.tsx                         |  68 ++++++++++
 src/components/Content/Content.module.scss         |  51 +++++++
 src/components/Content/Content.tsx                 | 100 ++++++++++++++
 src/components/Details/Details.module.scss         |  84 ++++++++++++
 src/components/Details/Details.tsx                 | 148 +++++++++++++++++++++
 .../RequestSummary/RequestSummary.module.scss      |  24 ++++
 src/components/RequestSummary/RequestSummary.tsx   |  33 +++++
 src/hooks/useRequests.tsx                          |  77 +++++++++++
 src/index.scss                                     |  16 +++
 src/index.tsx                                      |   7 +
 src/utils.ts                                       |   4 +
 13 files changed, 715 insertions(+)
 create mode 100644 src/_reset.scss
 create mode 100644 src/components/App/App.module.scss
 create mode 100644 src/components/App/App.tsx
 create mode 100644 src/components/Content/Content.module.scss
 create mode 100644 src/components/Content/Content.tsx
 create mode 100644 src/components/Details/Details.module.scss
 create mode 100644 src/components/Details/Details.tsx
 create mode 100644 src/components/RequestSummary/RequestSummary.module.scss
 create mode 100644 src/components/RequestSummary/RequestSummary.tsx
 create mode 100644 src/hooks/useRequests.tsx
 create mode 100644 src/index.scss
 create mode 100644 src/index.tsx
 create mode 100644 src/utils.ts

(limited to 'src')

diff --git a/src/_reset.scss b/src/_reset.scss
new file mode 100644
index 0000000..ed11813
--- /dev/null
+++ b/src/_reset.scss
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss
new file mode 100644
index 0000000..2036eb9
--- /dev/null
+++ b/src/components/App/App.module.scss
@@ -0,0 +1,55 @@
+.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;
+}
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
new file mode 100644
index 0000000..3a7fe9b
--- /dev/null
+++ b/src/components/App/App.tsx
@@ -0,0 +1,68 @@
+import * as React from "react";
+import useRequests, {RequestResponse} from "../../hooks/useRequests";
+import {useEffect, useMemo, useState} from "react";
+
+import styles from './App.module.scss';
+import Details from "../Details/Details";
+import RequestSummary from "../RequestSummary/RequestSummary";
+import {getHost} from "../../utils";
+
+interface Config {
+  url: string
+}
+
+export default function App() {
+  const [config, setConfig]= useState<Config | null>(null)
+  useEffect(() => {
+    fetch(`http://${getHost()}/config/`)
+      .then(response => response.json() as Promise<Config>)
+      .then(setConfig)
+  }, [])
+
+  const requests = useRequests();
+  const [selectedRequestIndex, setSelectedRequestIndex] = useState<number | null>(null);
+  const selectedRequest = useMemo<RequestResponse | null>(() => (
+    selectedRequestIndex === null
+      ? null
+      : requests[selectedRequestIndex]
+  ), [selectedRequestIndex, requests]);
+
+  return config && (
+    <div className={styles.app}>
+      <header className={styles.header}>
+        TTUN
+        <a href={config.url} target="_blank">{config.url}</a>
+      </header>
+      <main className={styles.main}>
+        <ul className={styles.sidebar}>
+          {
+            requests.length > 0
+              ? requests.slice(0).reverse().map((requestResponse, index) => (
+                <li onClick={() => setSelectedRequestIndex(requests.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.module.scss b/src/components/Content/Content.module.scss
new file mode 100644
index 0000000..8908516
--- /dev/null
+++ b/src/components/Content/Content.module.scss
@@ -0,0 +1,51 @@
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  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 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  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
new file mode 100644
index 0000000..a7b5949
--- /dev/null
+++ b/src/components/Content/Content.tsx
@@ -0,0 +1,100 @@
+import styles from "~components/Details/Details.module.scss";
+import * as React from "react";
+import classNames from "classnames";
+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';
+
+interface ContentProps {
+  data: RequestPayload | ResponsePayload
+  setRaw: Dispatch<SetStateAction<boolean>>
+  raw?: boolean
+}
+
+export default function Content({ raw, setRaw, ...props }: 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}>
+        {(() => {
+          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>
+  )
+};
+
+function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) {
+    const contentType = useMemo(() => {
+      if (raw) {
+        return '';
+      }
+
+      const [_, type] = (
+        Object
+          .entries(data.headers)
+          .find(([key]) => key.toLowerCase() === 'content-type')
+      );
+
+      return type.toLowerCase().split(';')[0];
+    }, [data, raw]);
+
+    if (raw) {
+      return <pre>{atob(data.body)}</pre>
+    }
+
+    if (['application/pdf', 'text/html'].includes(contentType)) {
+      return <iframe
+        src={`data:${contentType};base64,${data.body}`}
+        srcDoc={contentType === 'text/html' ? atob(data.body) : undefined}
+        loading='lazy'
+        sandbox=''
+      />
+    }
+
+    if (contentType.startsWith('application/json')) {
+      return <ReactJson
+        src={JSON.parse(atob(data.body))}
+        style={{
+          padding: '1em',
+          width: '100%',
+          height: '100%',
+        }}
+      />
+    }
+
+    if (contentType.startsWith('audio')) {
+      return <audio src={`data:${contentType};base64,${data.body}`} />
+    }
+
+    if (contentType.startsWith('video')) {
+      return <video src={`data:${contentType};base64,${data.body}`} />
+    }
+
+    if (contentType.startsWith('image')) {
+      return <img src={`data:${contentType};base64,${data.body}`} alt=''/>
+    }
+
+    throw new Error('Not Rendered');
+};
diff --git a/src/components/Details/Details.module.scss b/src/components/Details/Details.module.scss
new file mode 100644
index 0000000..32197f0
--- /dev/null
+++ b/src/components/Details/Details.module.scss
@@ -0,0 +1,84 @@
+.details {
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: stretch;
+  overflow: hidden;
+}
+
+.header {
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.content {
+  flex-grow: 1;
+  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
new file mode 100644
index 0000000..c4a23f4
--- /dev/null
+++ b/src/components/Details/Details.tsx
@@ -0,0 +1,148 @@
+import * as React from "react";
+import {
+  RequestPayload,
+  RequestResponse,
+  ResponsePayload
+} from "~hooks/useRequests";
+import {useCallback, useEffect, useMemo, useState} from "react";
+import styles from "./Details.module.scss";
+import RequestSummary from "../RequestSummary/RequestSummary";
+import classNames from 'classnames';
+import Content from "../Content/Content";
+import {getHost} from "../../utils";
+
+
+interface TimingProps {
+  timing: number;
+}
+
+
+function Timing({ timing }: TimingProps) {
+  const value = useMemo(() => (Math.round(timing * 1000) / 1000), [timing]);
+  const showSeconds = useMemo(() => value > 1, [value]);
+
+  return !Number.isNaN(value)
+    ? (
+      <>
+        {`${showSeconds ? value : value * 1000}${ showSeconds ? 's' : 'ms' }`}
+      </>
+    )
+    : null;
+}
+
+interface HeadersProps {
+  title: string
+  headers: {
+    [key: string]: string
+  }
+}
+
+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>
+  )
+}
+
+interface DetailsProps {
+  requestResponse: RequestResponse
+}
+
+type Tab = 'headers' | 'request' | 'response'
+
+export default function Details({ requestResponse }: DetailsProps) {
+  const [tab, selectTab] = useState<Tab>('headers');
+  const [raw, setRaw] = useState(false);
+
+  const resend = useCallback(async () => fetch(
+    `http://${getHost()}/resend/`,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        ...requestResponse.request,
+        id: undefined
+      })
+    }
+  ), [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'
+            })}
+            disabled={requestResponse.response === undefined}
+          >
+            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.module.scss b/src/components/RequestSummary/RequestSummary.module.scss
new file mode 100644
index 0000000..e1752b3
--- /dev/null
+++ b/src/components/RequestSummary/RequestSummary.module.scss
@@ -0,0 +1,24 @@
+.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
new file mode 100644
index 0000000..af928c0
--- /dev/null
+++ b/src/components/RequestSummary/RequestSummary.tsx
@@ -0,0 +1,33 @@
+import {RequestResponse} from "~hooks/useRequests";
+import * as React from "react";
+import classNames from "classnames";
+
+import styles from './RequestSummary.module.scss';
+
+interface RequestSummaryProps {
+  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
+  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>
+  )
+}
diff --git a/src/hooks/useRequests.tsx b/src/hooks/useRequests.tsx
new file mode 100644
index 0000000..3ad5cc7
--- /dev/null
+++ b/src/hooks/useRequests.tsx
@@ -0,0 +1,77 @@
+import {useCallback, useEffect, useMemo, useState} from "react";
+import {getHost} from "../utils";
+
+type Dict = {
+  [key: string]: string
+}
+
+export interface RequestPayload {
+  id: string
+  body: string
+  cookies: Dict
+  headers: Dict
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
+  path: string
+}
+
+interface Request {
+  type: 'request',
+  payload: RequestPayload,
+}
+
+export interface ResponsePayload {
+  id: string
+  timing: number
+  body: string
+  cookies: Dict
+  headers: Dict
+  status: number
+}
+
+interface Response {
+  type: 'response',
+  payload: ResponsePayload,
+}
+
+export interface RequestResponse {
+  request: RequestPayload
+  response?: ResponsePayload
+}
+
+export default function useRequests(): RequestResponse[] {
+  const wsHost = useMemo(getHost, []);
+  const connect = useCallback(() => new WebSocket(`ws://${wsHost}/inspect/`), [wsHost])
+
+  const [requests, setRequests] = useState<RequestPayload[]>([]);
+  const [responses, setResponses] = useState<ResponsePayload[]>([]);
+  const [ws, setWs] = useState(() => connect());
+
+  useEffect(() => {
+    const reconnect = () => setWs(() => connect())
+    const onMessage = ({ data }) => {
+      const { type, payload } = JSON.parse(data) as Request | Response
+
+      switch (type) {
+        case 'request':
+          setRequests((rqs) => [...rqs, payload as RequestPayload])
+          break
+        case 'response':
+          setResponses((rps) => [...rps, payload as ResponsePayload])
+          break
+      }
+    }
+
+    ws.addEventListener('message', onMessage)
+    ws.addEventListener('close', reconnect)
+
+    return () => {
+      ws.removeEventListener('message', onMessage);
+      ws.removeEventListener('close', reconnect);
+    }
+  }, [ws])
+
+  return useMemo<RequestResponse[]>(() => requests.map((request) => ({
+    request: request,
+    response: responses.find(({ id }) => id === request.id)
+  })), [requests, responses])
+}
diff --git a/src/index.scss b/src/index.scss
new file mode 100644
index 0000000..ef8fd7f
--- /dev/null
+++ b/src/index.scss
@@ -0,0 +1,16 @@
+@import "reset";
+
+* {
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  margin: 0;
+  padding: 0;
+
+  height: 100vh;
+  width: 100vw;
+
+  font-family: sans-serif;
+  overflow: hidden;
+}
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..a6c4952
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import App from "./components/App/App";
+
+import './index.scss';
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..dcf010a
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,4 @@
+export function getHost() {
+  // @ts-ignore
+  return import.meta.env.DEV ? 'localhost:4040' : window.location.host
+}
-- 
cgit v1.2.3