2 files changed, 0 insertions, 180 deletions
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>
-  )
-}

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 @@
1	.details {
2	height: 100%;
3	display: flex;
4	flex-flow: column nowrap;
5	align-items: stretch;
6	overflow: hidden;
7	}
8
9	.header {
10	flex-shrink: 0;
11	flex-grow: 0;
12	}
13
14	.content {
15	flex-grow: 1;
16	flex-shrink: 1;
17	overflow-y: auto;
18	}


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 @@
1	import * as React from "react";
2	import {useCallback, useMemo, useState} from "react";
3	import {RequestResponse, Headers} from "~hooks/useRequests";
4	import styles from "./Details.module.scss";
5	import RequestSummary from "../RequestSummary/RequestSummary";
6	import Content from "../Content/Content";
7	import {getHost} from "../../utils";
8	import {Button, Card, Col, Container, Nav, Row, Table} from "react-bootstrap";
9
10
11	interface TimingProps {
12	timing: number;
13	}
14
15
16	function Timing({ timing }: TimingProps) {
17	const value = useMemo(() => (Math.round(timing * 1000) / 1000), [timing]);
18	const showSeconds = useMemo(() => value > 1, [value]);
19
20	return !Number.isNaN(value)
21	? (
22	<>
23	{`${showSeconds ? value : value * 1000}${ showSeconds ? 's' : 'ms' }`}
24	</>
25	)
26	: null;
27	}
28
29	interface HeadersProps {
30	title: string
31	headers: Headers
32	}
33
34	function Headers({ title, headers }: HeadersProps) {
35	return (
36	<Card className="m-3">
37	<Table
38	striped
39	responsive
40	borderless
41	hover
42	className='mb-0'
43	>
44	<thead>
45	<tr>
46	<th colSpan={2} className="bg-dark text-white rounded-top">{ title }</th>
47	</tr>
48	</thead>
49	<tbody>
50	{
51	headers.map(([key, value]) => (
52	<tr>
53	<td>{key}</td>
54	<td>{value}</td>
55	</tr>
56	))
57	}
58	</tbody>
59	</Table>
60	</Card>
61	)
62	}
63
64	interface DetailsProps {
65	requestResponse: RequestResponse
66	}
67
68	type Tab = 'headers' \| 'request' \| 'response'
69
70	export default function Details({ requestResponse }: DetailsProps) {
71	const [tab, selectTab] = useState<Tab>('headers');
72	const [raw, setRaw] = useState(false);
73
74	const resend = useCallback(async () => fetch(
75	`http://${getHost()}/resend/`,
76	{
77	method: 'POST',
78	body: JSON.stringify({
79	...requestResponse.request,
80	id: undefined
81	})
82	}
83	), [requestResponse]);
84
85	return (
86	<div className={styles.details}>
87	<div className={styles.header}>
88	<Row>
89	<Col>
90	<Container fluid style={{ fontSize: '1.5em' }} className="py-3">
91	<RequestSummary requestResponse={requestResponse} className={styles.summary}/>
92	</Container>
93	</Col>
94	</Row>
95	<Row className="gx-0 d-flex">
96	<Col>
97	<Nav
98	variant="tabs"
99	activeKey={tab}
100	onSelect={(tab) => selectTab(tab as Tab)}
101	>
102	<Nav.Item>
103	<Nav.Link eventKey="headers">
104	Headers
105	</Nav.Link >
106	</Nav.Item>
107	<Nav.Item>
108	<Nav.Link eventKey="request">
109	Request
110	</Nav.Link>
111	</Nav.Item>
112	<Nav.Item>
113	<Nav.Link
114	eventKey="response"
115	disabled={requestResponse.response === undefined}
116	>
117	Response
118	</Nav.Link>
119	</Nav.Item>
120	</Nav>
121	</Col>
122	<Col className="border-bottom px-3 " xs="auto">
123	<Timing timing={requestResponse.response?.timing ?? NaN} />
124	<Button variant="outline-primary" onClick={() => resend()} className="ms-3">
125	Resend
126	</Button>
127	</Col>
128	</Row>
129	</div>
130	<div className={styles.content}>
131	{
132	tab === 'headers' && (
133	<>
134	<Headers
135	title="request headers"
136	headers={requestResponse.request.headers}
137	/>
138	{
139	requestResponse.response && (
140	<Headers
141	title="response headers"
142	headers={requestResponse.response.headers}
143	/>
144	)
145	}
146	</>
147	)
148	}
149	{
150	tab === 'request' && (
151	<Content data={requestResponse.request} raw={raw} setRaw={setRaw}/>
152	)
153	}
154	{
155	tab === 'response' && requestResponse.response !== undefined && (
156	<Content data={requestResponse.response} raw={raw} setRaw={setRaw}/>
157	)
158	}
159	</div>
160	</div>
161	)
162	}