summaryrefslogtreecommitdiffstats
path: root/src/components/Details/Details.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Details/Details.tsx')
-rw-r--r--src/components/Details/Details.tsx237
1 files changed, 78 insertions, 159 deletions
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}>
181 // <button
182 // onClick={() => selectTab('headers')}
183 // className={classNames(styles.tab, {
184 // [styles.selected]: tab === 'headers'
185 // })}
186 // >
187 // Headers
188 // </button>
189 // <button
190 // onClick={() => selectTab('request')}
191 // className={classNames(styles.tab, {
192 // [styles.selected]: tab === 'request'
193 // })}
194 // >
195 // Request
196 // </button>
197 // <button
198 // onClick={() => selectTab('response')}
199 // className={classNames(styles.tab, {
200 // [styles.selected]: tab === 'response'
201 // })}
202 // disabled={requestResponse.response === undefined}
203 // >
204 // Response
205 // </button>
206 //
207 // <div className={styles.emptySpace}>
208 // <Timing timing={requestResponse.response?.timing ?? NaN} />
209 // <button className={styles.resend} onClick={() => resend()}>Resend</button>
210 // </div>
211 // </div>
212 // </div>
213 // <div className={styles.content}>
214 // {
215 // tab === 'headers' && (
216 // <>
217 // <Headers
218 // title="Request Headers"
219 // headers={requestResponse.request.headers}
220 // />
221 // {
222 // requestResponse.response && (
223 // <Headers
224 // title="Response Headers"
225 // headers={requestResponse.response.headers}
226 // />
227 // )
228 // }
229 // </>
230 // )
231 // }
232 // {
233 // tab === 'request' && (
234 // <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/>
235 // )
236 // }
237 // {
238 // tab === 'response' && requestResponse.response !== undefined && (
239 // <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/>
240 // )
241 // }
242 // </div>
243 // </div>
244 ) 163 )
245} 164