summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorGravatar Tom van der Lee <tom@vanderlee.io>2022-01-23 19:25:56 +0100
committerGravatar Tom van der Lee <tom@vanderlee.io>2022-01-25 22:06:58 +0100
commit2f27e222add9bf10b55971ab915ac411e81d24f0 (patch)
tree6ed9ea87932809d57d5db9d3c638a88a954ab8e2 /src
parent51a2ac628822e96459b3d570eada953ac8927d43 (diff)
downloadclient-2f27e222add9bf10b55971ab915ac411e81d24f0.tar.gz
client-2f27e222add9bf10b55971ab915ac411e81d24f0.tar.bz2
client-2f27e222add9bf10b55971ab915ac411e81d24f0.zip
Rewritten ui to use boostrap
Diffstat (limited to 'src')
-rw-r--r--src/components/App/App.module.scss35
-rw-r--r--src/components/App/App.tsx127
-rw-r--r--src/components/Content/Content.module.scss29
-rw-r--r--src/components/Content/Content.tsx50
-rw-r--r--src/components/Details/Details.module.scss66
-rw-r--r--src/components/Details/Details.tsx237
-rw-r--r--src/components/RequestSummary/RequestSummary.module.scss24
-rw-r--r--src/components/RequestSummary/RequestSummary.tsx1
-rw-r--r--src/hooks/useRequests.tsx12
-rw-r--r--src/index.scss10
10 files changed, 185 insertions, 406 deletions
diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss
index 9837cdf..088a4f6 100644
--- a/src/components/App/App.module.scss
+++ b/src/components/App/App.module.scss
@@ -1,3 +1,34 @@
1.content { 1.app {
2 flex: 1 0 auto; 2 display: flex;
3 flex-flow: column nowrap;
4 grid-template-rows: auto 1fr;
5 height: 100vh;
6 overflow: hidden;
7}
8
9.main {
10 display: flex;
11 flex-flow: row nowrap;
12 flex-grow: 1;
13 overflow: hidden;
14}
15
16.sidebar {
17 width: calc((6 / 16) * 100%);
18 height: 100%;
19 overflow-y: auto;
20}
21
22.details {
23 width: calc((10 / 16) * 100%);
24 overflow: hidden;
25 height: 100%;
26}
27
28.noRequest, .noRequestSelected {
29 width: 100%;
30 height: 100%;
31 display: flex;
32 justify-content: center;
33 align-items: center;
3} 34}
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 61f88f6..cb82abc 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,12 +1,15 @@
1import * as React from "react"; 1import * as React from "react";
2import useRequests, {RequestResponse, ReadyState} from "../../hooks/useRequests";
3import {useEffect, useMemo, useState} from "react"; 2import {useEffect, useMemo, useState} from "react";
3import useRequests, {
4 ReadyState,
5 RequestResponse
6} from "../../hooks/useRequests";
4 7
5import styles from './App.module.scss'; 8import styles from './App.module.scss';
6import Details from "../Details/Details"; 9import Details from "../Details/Details";
7import RequestSummary from "../RequestSummary/RequestSummary"; 10import RequestSummary from "../RequestSummary/RequestSummary";
8import {getHost} from "../../utils"; 11import {getHost} from "../../utils";
9import {Container, Navbar, Col, Row, Nav, ListGroup} from "react-bootstrap"; 12import {Container, ListGroup, Navbar} from "react-bootstrap";
10import classNames from "classnames"; 13import classNames from "classnames";
11 14
12interface Config { 15interface Config {
@@ -52,11 +55,12 @@ export default function App() {
52 ), [selectedRequestIndex, calls]); 55 ), [selectedRequestIndex, calls]);
53 56
54 return config && ( 57 return config && (
55 <> 58 <div className={styles.app}>
56 <Navbar 59 <Navbar
57 bg="dark" 60 bg="dark"
58 variant="dark" 61 variant="dark"
59 expand 62 expand
63 as="header"
60 > 64 >
61 <Container fluid> 65 <Container fluid>
62 <Navbar.Brand> 66 <Navbar.Brand>
@@ -67,44 +71,45 @@ export default function App() {
67 </Navbar.Text> 71 </Navbar.Text>
68 </Container> 72 </Container>
69 </Navbar> 73 </Navbar>
70 <Container>
71 74
72 </Container> 75 <main className={styles.main}>
73 <Row className={classNames(styles.content, 'gx-0', 'overflow-hidden')}> 76 <ListGroup
74 <Col className='border-end overflow-auto' xs={4}> 77 variant='flush'
75 <ListGroup variant='flush'> 78 as="ul"
76 { 79 className={classNames("border-end", styles.sidebar)}
77 calls.length > 0 80 >
78 ? ( 81 {
79 calls.slice(0).reverse().map((requestResponse, index) => { 82 calls.length > 0
80 const selected = selectedRequestIndex === calls.length - index - 1; 83 ? (
81 return ( 84 calls.slice(0).reverse().map((requestResponse, index) => {
82 <ListGroup.Item 85 const selected = selectedRequestIndex === calls.length - index - 1;
83 onClick={() => setSelectedRequestIndex(calls.length - index - 1)} 86 return (
84 key={`request-${index}`} 87 <ListGroup.Item
85 className={classNames({ 88 as="li"
86 'bg-primary': selected, 89 onClick={() => setSelectedRequestIndex(calls.length - index - 1)}
87 'text-light': selected, 90 key={`request-${index}`}
88 'border-bottom': true 91 className={classNames({
89 })} 92 'bg-primary': selected,
90 > 93 'text-light': selected,
91 <RequestSummary 94 'border-bottom': true
92 requestResponse={requestResponse} 95 })}
93 selected={selected} 96 >
94 /> 97 <RequestSummary
95 </ListGroup.Item> 98 requestResponse={requestResponse}
96 ) 99 selected={selected}
97 }) 100 />
98 ) 101 </ListGroup.Item>
99 : ( 102 )
100 <div className={styles.noRequest}> 103 })
101 <p>No requests</p> 104 )
102 </div> 105 : (
103 ) 106 <div className={styles.noRequest}>
104 } 107 <p>No requests</p>
105 </ListGroup> 108 </div>
106 </Col> 109 )
107 <Col xs={8} className=''> 110 }
111 </ListGroup>
112 <div className={styles.details}>
108 { 113 {
109 selectedRequest !== null 114 selectedRequest !== null
110 ? ( 115 ? (
@@ -115,44 +120,8 @@ export default function App() {
115 </div> 120 </div>
116 ) 121 )
117 } 122 }
118 </Col> 123 </div>
119 </Row> 124 </main>
120 </> 125 </div>
121 // <div className={styles.app}>
122 // <header className={styles.header}>
123 // {statusMap[readyState]} TTUN
124 // <a href={config.url} target="_blank">{config.url}</a>
125 // </header>
126 // <main className={styles.main}>
127 // <ul className={styles.sidebar}>
128 // {
129 // calls.length > 0
130 // ? calls.slice(0).reverse().map((requestResponse, index) => (
131 // <li onClick={() => setSelectedRequestIndex(calls.length - index - 1)} key={`request-${index}`}>
132 // <RequestSummary requestResponse={requestResponse} />
133 // </li>
134 // ))
135 // : (
136 // <div className={styles.noRequest}>
137 // <p>No requests</p>
138 // </div>
139 // )
140 // }
141 // </ul>
142 //
143 // <div className={styles.details}>
144 // {
145 // selectedRequest !== null
146 // ? (
147 // <Details requestResponse={selectedRequest} />
148 // ) : (
149 // <div className={styles.noRequestSelected}>
150 // <p>Select a request to inspect it</p>
151 // </div>
152 // )
153 // }
154 // </div>
155 // </main>
156 // </div>
157 ); 126 );
158} 127}
diff --git a/src/components/Content/Content.module.scss b/src/components/Content/Content.module.scss
index 8908516..4720afd 100644
--- a/src/components/Content/Content.module.scss
+++ b/src/components/Content/Content.module.scss
@@ -6,33 +6,10 @@
6 overflow: hidden; 6 overflow: hidden;
7} 7}
8 8
9.header {
10 flex-shrink: 0;
11 flex-grow: 0;
12 width: 100%;
13 display: flex;
14 padding: 0.5em;
15 background-color: black;
16 color: white;
17}
18