summaryrefslogtreecommitdiffstats
path: root/src/components/Details
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Details')
-rw-r--r--src/components/Details/Details.module.scss66
-rw-r--r--src/components/Details/Details.tsx237
2 files changed, 78 insertions, 225 deletions
diff --git a/src/components/Details/Details.module.scss b/src/components/Details/Details.module.scss
index 32197f0..146b5d8 100644
--- a/src/components/Details/Details.module.scss
+++ b/src/components/Details/Details.module.scss
@@ -16,69 +16,3 @@
16 flex-shrink: 1; 16 flex-shrink: 1;
17 overflow-y: auto; 17 overflow-y: auto;
18} 18}
19
20.summary {
21 font-size: 2em;
22}
23
24.tabs {
25 display: flex;
26 border-bottom: 1px solid black;
27
28 &:last-child {
29 flex-grow: 1;
30 }
31}
32
33.tab {
34 background-color: white;
35 border: none;
36 border-top: 1px solid black;
37 border-right: 1px solid black;
38 border-radius: 0;
39 color: black;
40 font-size: 1.2em;
41 padding: 0.5em;
42
43 &.selected {
44 background-color: black;
45 color: white;
46 }
47}
48
49.emptySpace {
50 flex-grow: 1;
51 display: flex;
52 justify-content: flex-end;
53 align-items: center;
54 font-size: 1.2em;
55 padding: 0.5em;
56}
57
58.resend {
59 margin-left: 1em;
60}
61
62.headers {
63 display: grid;
64 grid-template-columns: auto 1fr;
65 border: 1px solid black;
66 margin: 1em;
67 overflow-x: auto;
68
69 h2 {
70 grid-column: 1/ span 2;
71 background-color: black;
72 color: white;
73 padding: 0.5em;
74 }
75
76 > div {
77 line-break: auto;
78 padding: 0.5em;
79
80 &:nth-of-type(4n), &:nth-of-type(4n - 1) {
81 background-color: lightgray;
82 }
83 }
84}
diff --git a/src/components/Details/Details.tsx b/src/components/Details/Details.tsx
index c96aa7b..d4bb07a 100644
--- a/src/components/Details/Details.tsx
+++ b/src/components/Details/Details.tsx
@@ -1,25 +1,11 @@
1import * as React from "react"; 1import * as React from "react";
2import { 2import {useCallback, useMemo, useState} from "react";
3 RequestPayload, 3import {RequestResponse} from "~hooks/useRequests";
4 RequestResponse,
5 ResponsePayload
6} from "~hooks/useRequests";
7import {useCallback, useEffect, useMemo, useState} from "react";
8import styles from "./Details.module.scss"; 4import styles from "./Details.module.scss";
9import RequestSummary from "../RequestSummary/RequestSummary"; 5import RequestSummary from "../RequestSummary/RequestSummary";
10import classNames from 'classnames';
11import Content from "../Content/Content"; 6import Content from "../Content/Content";
12import {getHost} from "../../utils"; 7import {getHost} from "../../utils";
13import { 8import {Button, Card, Col, Container, Nav, Row, Table} from "react-bootstrap";
14 Button,
15 Card,
16 Col,
17 Container,
18 Nav,
19 NavItem,
20 Row,
21 Table
22} from "react-bootstrap";
23 9
24 10
25interface TimingProps { 11interface TimingProps {
@@ -99,147 +85,80 @@ export default function Details({ requestResponse }: DetailsProps) {
99 ), [requestResponse]); 85 ), [requestResponse]);
100 86
101 return ( 87 return (
102 <> 88 <div className={styles.details}>
103 <Row> 89 <div className={styles.header}>
104 <Col> 90 <Row>
105 <Container fluid style={{ fontSize: '1.5em' }} className="py-3"> 91 <Col>
106 <RequestSummary requestResponse={requestResponse} className={styles.summary}/> 92 <Container fluid style={{ fontSize: '1.5em' }} className="py-3">
107 </Container> 93 <RequestSummary requestResponse={requestResponse} className={styles.summary}/>
108 </Col> 94 </Container>
109 </Row> 95 </Col>
110 <Row className="gx-0 d-flex"> 96 </Row>
111 <Col> 97 <Row className="gx-0 d-flex">
112 <Nav 98 <Col>
113 variant="tabs" 99 <Nav
114 activeKey={tab} 100 variant="tabs"
115 onSelect={(tab) => selectTab(tab as Tab)} 101 activeKey={tab}
116 > 102 onSelect={(tab) => selectTab(tab as Tab)}
117 <Nav.Item> 103 >
118 <Nav.Link eventKey="headers"> 104 <Nav.Item>
119 Headers 105 <Nav.Link eventKey="headers">
120 </Nav.Link > 106 Headers
121 </Nav.Item> 107 </Nav.Link >
122 <Nav.Item> 108 </Nav.Item>
123 <Nav.Link eventKey="request"> 109 <Nav.Item>
124 Request 110 <Nav.Link eventKey="request">
125 </Nav.Link> 111 Request
126 </Nav.Item> 112 </Nav.Link>
127 <Nav.Item> 113 </Nav.Item>
128 <Nav.Link 114 <Nav.Item>
129 eventKey="response" 115 <Nav.Link
130 disabled={requestResponse.response === undefined} 116 eventKey="response"
131 > 117 disabled={requestResponse.response === undefined}
132 Response 118 >
133 </Nav.Link> 119 Response
134 </Nav.Item> 120 </Nav.Link>
135 </Nav> 121 </Nav.Item>
136 </Col> 122 </Nav>
137 <Col className="border-bottom px-3 " xs="auto"> 123 </Col>
138 <Timing timing={requestResponse.response?.timing ?? NaN} /> 124 <Col className="border-bottom px-3 " xs="auto">
139 <Button variant="outline-primary" onClick={() => resend()} className="ms-3"> 125 <Timing timing={requestResponse.response?.timing ?? NaN} />
140 Resend 126 <Button variant="outline-primary" onClick={() => resend()} className="ms-3">
141 </Button> 127 Resend
142 </Col> 128 </Button>
143 </Row> 129 </Col>
144 <Row> 130 </Row>
145 <Col> 131 </div>
146 { 132 <div className={styles.content}>
147 tab === 'headers' && ( 133 {
148 <> 134 tab === 'headers' && (
149 <Headers 135 <>
150 title="Request Headers" 136 <Headers
151 headers={requestResponse.request.headers} 137 title="request headers"
152 /> 138 headers={requestResponse.request.headers}
153 { 139 />
154 requestResponse.response && ( 140 {
155 <Headers 141 requestResponse.response && (
156 title="Response Headers" 142 <Headers
157 headers={requestResponse.response.headers} 143 title="response headers"
158 /> 144 headers={requestResponse.response.headers}
159 ) 145 />
160 } 146 )
161 </> 147 }
162 ) 148 </>
163 } 149 )
164 { 150 }
165 tab === 'request' && ( 151 {
166 <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/> 152 tab === 'request' && (
167 ) 153 <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/>
168 } 154 )
169 { 155 }
170 tab === 'response' && requestResponse.response !== undefined && ( 156 {
171 <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/> 157 tab === 'response' && requestResponse.response !== undefined && (
172 ) 158 <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/>
173 } 159 )
174 </Col> 160 }
175 </Row> 161 </div>
176 </> 162 </div>
177 // <div className={styles.details}>
178 // <div className={styles.header}>
179 //
180 // <div className={styles.tabs}>