From 7c48533571e9f9d3731a59433a56cc8d6e008123 Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Sat, 12 Feb 2022 10:59:19 +0100
Subject: Added search and filter options

---
 src/components/Details/Details.module.scss |  18 ----
 src/components/Details/Details.tsx         | 162 -----------------------------
 2 files changed, 180 deletions(-)
 delete mode 100644 src/components/Details/Details.module.scss
 delete mode 100644 src/components/Details/Details.tsx

(limited to 'src/components/Details')

diff --git a/src/components/Details/Details.module.scss b/src/components/Details/Details.module.scss
deleted file mode 100644
index 146b5d8..0000000
--- a/src/components/Details/Details.module.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.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;
-}
diff --git a/src/components/Details/Details.tsx b/src/components/Details/Details.tsx
deleted file mode 100644
index 96f0790..0000000
--- a/src/components/Details/Details.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import * as React from "react";
-import {useCallback, useMemo, useState} from "react";
-import {RequestResponse, Headers} from "~hooks/useRequests";
-import styles from "./Details.module.scss";
-import RequestSummary from "../RequestSummary/RequestSummary";
-import Content from "../Content/Content";
-import {getHost} from "../../utils";
-import {Button, Card, Col, Container, Nav, Row, Table} from "react-bootstrap";
-
-
-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: Headers
-}
-
-function Headers({ title, headers }: HeadersProps) {
-  return (
-    <Card className="m-3">
-        <Table
-          striped
-          responsive
-          borderless
-          hover
-          className='mb-0'
-        >
-          <thead>
-            <tr>
-              <th colSpan={2} className="bg-dark text-white rounded-top">{ title }</th>
-            </tr>
-          </thead>
-          <tbody>
-          {
-            headers.map(([key, value]) => (
-              <tr>
-                <td>{key}</td>
-                <td>{value}</td>
-              </tr>
-            ))
-          }
-          </tbody>
-        </Table>
-    </Card>
-  )
-}
-
-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}>
-        <Row>
-          <Col>
-            <Container fluid style={{ fontSize: '1.5em' }} className="py-3">
-              <RequestSummary requestResponse={requestResponse} className={styles.summary}/>
-            </Container>
-          </Col>
-        </Row>
-        <Row className="gx-0 d-flex">
-          <Col>
-            <Nav
-              variant="tabs"
-              activeKey={tab}
-              onSelect={(tab) => selectTab(tab as Tab)}
-            >
-              <Nav.Item>
-                <Nav.Link eventKey="headers">
-                  Headers
-                </Nav.Link >
-              </Nav.Item>
-              <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>
-            </Nav>
-          </Col>
-          <Col className="border-bottom px-3 " xs="auto">
-            <Timing timing={requestResponse.response?.timing ?? NaN} />
-            <Button variant="outline-primary" onClick={() => resend()} className="ms-3">
-              Resend
-            </Button>
-          </Col>
-        </Row>
-      </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>
-  )
-}
-- 
cgit v1.2.3