Prepare for githubv1.0.0

2 files changed, 232 insertions, 0 deletions

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>
+  )
+}