1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
import * as React from "react";
import useRequests, {RequestResponse, ReadyState} from "../../hooks/useRequests";
import {useEffect, useMemo, useState} from "react";
import styles from './App.module.scss';
import Details from "../Details/Details";
import RequestSummary from "../RequestSummary/RequestSummary";
import {getHost} from "../../utils";
interface Config {
url: string
}
type ReadyStateMap = {
[ReadyState.CONNECTING]: string,
[ReadyState.OPEN]: string,
[ReadyState.CLOSING]: string,
[ReadyState.CLOSED]: string,
}
const statusMap: ReadyStateMap = {
[ReadyState.CONNECTING]: '🔴',
[ReadyState.OPEN]: '🟢',
[ReadyState.CLOSING]: '🔴',
[ReadyState.CLOSED]: '🔴',
}
export default function App() {
const [config, setConfig]= useState<Config | null>(null)
const { calls, readyState } = useRequests({
onConnect: async () => {
const response = await fetch(`http://${getHost()}/config/`)
const config = await response.json()
setConfig(config)
}
});
useEffect(() => {
const url = new URL(config?.url ?? 'https://loading...');
document.title = `${statusMap[readyState]} ${url.host} | TTUN`;
}, [readyState, config?.url])
const [selectedRequestIndex, setSelectedRequestIndex] = useState<number | null>(null);
const selectedRequest = useMemo<RequestResponse | null>(() => (
selectedRequestIndex === null
? null
: calls[selectedRequestIndex]
), [selectedRequestIndex, calls]);
return config && (
<div className={styles.app}>
<header className={styles.header}>
{statusMap[readyState]} TTUN
<a href={config.url} target="_blank">{config.url}</a>
</header>
<main className={styles.main}>
<ul className={styles.sidebar}>
{
calls.length > 0
? calls.slice(0).reverse().map((requestResponse, index) => (
<li onClick={() => setSelectedRequestIndex(calls.length - index - 1)} key={`request-${index}`}>
<RequestSummary requestResponse={requestResponse} />
</li>
))
: (
<div className={styles.noRequest}>
<p>No requests</p>
</div>
)
}
</ul>
<div className={styles.details}>
{
selectedRequest !== null
? (
<Details requestResponse={selectedRequest} />
) : (
<div className={styles.noRequestSelected}>
<p>Select a request to inspect it</p>
</div>
)
}
</div>
</main>
</div>
);
}
|
