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.tsx254
1 files changed, 176 insertions, 78 deletions
diff --git a/src/components/Details/Details.tsx b/src/components/Details/Details.tsx
index e91c98c..c96aa7b 100644
--- a/src/components/Details/Details.tsx
+++ b/src/components/Details/Details.tsx
@@ -10,6 +10,16 @@ import RequestSummary from "../RequestSummary/RequestSummary";
10import classNames from 'classnames'; 10import classNames from 'classnames';
11import Content from "../Content/Content"; 11import Content from "../Content/Content";
12import {getHost} from "../../utils"; 12import {getHost} from "../../utils";
13import {
14 Button,
15 Card,
16 Col,
17 Container,
18 Nav,
19 NavItem,
20 Row,
21 Table
22} from "react-bootstrap";
13 23
14 24
15interface TimingProps { 25interface TimingProps {
@@ -39,17 +49,31 @@ interface HeadersProps {
39 49
40function Headers({ title, headers }: HeadersProps) { 50function Headers({ title, headers }: HeadersProps) {
41 return ( 51 return (
42 <div className={styles.headers}> 52 <Card className="m-3">
43 <h2>{ title }</h2> 53 <Table
44 { 54 striped
45 Object.entries(headers).map(([key, value]) => ( 55 responsive
46 <> 56 borderless
47 <div>{key}</div> 57 hover
48 <div>{value}</div> 58 className='mb-0'
49 </> 59 >
50 )) 60 <thead>
51 } 61 <tr>
52 </div> 62 <th colSpan={2} className="bg-dark text-white rounded-top">{ title }</th>
63 </tr>
64 </thead>
65 <tbody>
66 {
67 Object.entries(headers).map(([key, value]) => (
68 <tr>
69 <td>{key}</td>
70 <td>{value}</td>
71 </tr>
72 ))
73 }
74 </tbody>
75 </Table>
76 </Card>
53 ) 77 )
54} 78}
55 79
@@ -75,73 +99,147 @@ export default function Details({ requestResponse }: DetailsProps) {
75 ), [requestResponse]); 99 ), [requestResponse]);
76 100
77 return ( 101 return (
78 <div className={styles.details}> 102 <>
79 <div className={styles.header}> 103 <Row>
80 <RequestSummary requestResponse={requestResponse} className={styles.summary}/> 104 <Col>
81 105 <Container fluid style={{ fontSize: '1.5em' }} className="py-3">
82 <div className={styles.tabs}> 106 <RequestSummary requestResponse={requestResponse} className={styles.summary}/>
83 <button 107 </Container>
84 onClick={() => selectTab('headers')} 108 </Col>
85 className={classNames(styles.tab, { 109 </Row>
86 [styles.selected]: tab === 'headers' 110 <Row className="gx-0 d-flex">
87 })} 111 <Col>
88 > 112 <Nav
89 Headers 113 variant="tabs"
90 </button> 114 activeKey={tab}
91 <button 115 onSelect={(tab) => selectTab(tab as Tab)}
92 onClick={() => selectTab('request')}
93 className={classNames(styles.tab, {
94 [styles.selected]: tab === 'request'
95 })}
96 > 116 >
97 Request 117 <Nav.Item>
98 </button> 118 <Nav.Link eventKey="headers">
99 <button 119 Headers
100 onClick={() => selectTab('response')} 120 </Nav.Link >
101 className={classNames(styles.tab, { 121 </Nav.Item>
102 [styles.selected]: tab === 'response' 122 <Nav.Item>
103 })} 123 <Nav.Link eventKey="request">
104 disabled={requestResponse.response === undefined} 124 Request
105 > 125 </Nav.Link>
106 Response 126 </Nav.Item>
107 </button> 127 <Nav.Item>
108 128 <Nav.Link
109 <div className={styles.emptySpace}> 129 eventKey="response"
110 <Timing timing={requestResponse.response?.timing ?? NaN} /> 130 disabled={requestResponse.response === undefined}
111 <button className={styles.resend} onClick={() => resend()}>Resend</button> 131 >
112 </div> 132 Response
113 </div> 133 </Nav.Link>
114 </div> 134 </Nav.Item>
115 <div className={styles.content}> 135 </Nav>
116 { 136 </Col>
117 tab === 'headers' && ( 137 <Col className="border-bottom px-3 " xs="auto">
118 <> 138 <Timing timing={requestResponse.response?.timing ?? NaN} />
119 <Headers 139 <Button variant="outline-primary" onClick={() => resend()} className="ms-3">
120 title="Request Headers" 140 Resend
121 headers={requestResponse.request.headers} 141 </Button>
122 /> 142 </Col>
123 { 143 </Row>
124 requestResponse.response && ( 144 <Row>
125 <Headers 145 <Col>
126 title="Response Headers" 146 {
127 headers={requestResponse.response.headers} 147 tab === 'headers' && (
128 /> 148 <>
129 ) 149 <Headers
130 } 150 title="Request Headers"
131 </> 151 headers={requestResponse.request.headers}
132 ) 152 />
133 } 153 {
134 { 154 requestResponse.response && (
135 tab === 'request' && ( 155 <Headers
136 <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/> 156 title="Response Headers"
137 ) 157 headers={requestResponse.response.headers}
138 } 158 />
139 { 159 )
140 tab === 'response' && requestResponse.response !== undefined && ( 160 }
141 <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/> 161 </>
142 ) 162 )
143 } 163 }
144 </div> 164 {
145 </div> 165 tab === 'request' && (
166 <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/>
167 )
168 }
169 {
170 tab === 'response' && requestResponse.response !== undefined && (
171 <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/>
172 )
173 }
174 </Col>
175 </Row>
176 </>
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 Heade