From 871a85d9343cf49646d13dc455c062efadcb959a Mon Sep 17 00:00:00 2001 From: Tom van der Lee Date: Sat, 12 Feb 2022 11:33:52 +0100 Subject: Beatified code --- src/components/App/App.tsx | 189 +++++++-------- src/components/Content/Content.tsx | 167 ++++++++------ src/components/Icons/Filter.tsx | 18 +- src/components/Icons/Moon.tsx | 19 +- src/components/Icons/Sliders.tsx | 21 +- src/components/Icons/Sun.tsx | 17 +- src/components/Icons/Trash.tsx | 19 +- src/components/RequestDetails/RequestDetails.tsx | 159 ++++++------- src/components/RequestList/RequestList.module.scss | 1 - src/components/RequestList/RequestList.tsx | 253 +++++++++++---------- src/components/RequestSummary/RequestSummary.tsx | 41 ++-- 11 files changed, 488 insertions(+), 416 deletions(-) (limited to 'src/components') diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index e08c84f..1d231ae 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -1,81 +1,88 @@ import * as React from "react"; -import {ReactElement, useContext, useEffect, useMemo, useState} from "react"; +import { ReactElement, useContext, useEffect, useMemo, useState } from "react"; import useRequests, { ReadyState, - RequestResponse + RequestResponse, } from "../../hooks/useRequests"; -import styles from './App.module.scss'; +import styles from "./App.module.scss"; import RequestDetails from "../RequestDetails/RequestDetails"; -import {getHost} from "../../utils"; -import {Container, ListGroup, Nav, Navbar, NavDropdown} from "react-bootstrap"; +import { getHost } from "../../utils"; +import { + Container, + ListGroup, + Nav, + Navbar, + NavDropdown, +} from "react-bootstrap"; import classNames from "classnames"; -import {Sliders} from "../Icons/Sliders"; -import {Sun} from "../Icons/Sun"; -import {Moon} from "../Icons/Moon"; +import { Sliders } from "../Icons/Sliders"; +import { Sun } from "../Icons/Sun"; +import { Moon } from "../Icons/Moon"; import Trash from "../Icons/Trash"; -import {DarkModeContext} from "../../contexts/DarkMode"; +import { DarkModeContext } from "../../contexts/DarkMode"; import RequestList from "../RequestList/RequestList"; interface Config { - url: string + url: string; } interface SettingsMenu { - icon: ReactElement, - label: string, - onClick: () => void, + icon: ReactElement; + label: string; + onClick: () => void; } type ReadyStateMap = { - [ReadyState.CONNECTING]: string, - [ReadyState.OPEN]: string, - [ReadyState.CLOSING]: string, - [ReadyState.CLOSED]: string, -} + [ReadyState.CONNECTING]: string; + [ReadyState.OPEN]: string; + [ReadyState.CLOSING]: string; + [ReadyState.CLOSED]: string; +}; const statusIconMap: ReadyStateMap = { - [ReadyState.CONNECTING]: '🔴', - [ReadyState.OPEN]: '🟢', - [ReadyState.CLOSING]: '🔴', - [ReadyState.CLOSED]: '🔴', -} + [ReadyState.CONNECTING]: "🔴", + [ReadyState.OPEN]: "🟢", + [ReadyState.CLOSING]: "🔴", + [ReadyState.CLOSED]: "🔴", +}; const statusTextMap: ReadyStateMap = { - [ReadyState.CONNECTING]: 'Connecting...', - [ReadyState.OPEN]: 'Connected', - [ReadyState.CLOSING]: 'Closing...', - [ReadyState.CLOSED]: 'Closed', -} + [ReadyState.CONNECTING]: "Connecting...", + [ReadyState.OPEN]: "Connected", + [ReadyState.CLOSING]: "Closing...", + [ReadyState.CLOSED]: "Closed", +}; export default function App() { const { darkMode, toggle } = useContext(DarkModeContext); - const [config, setConfig]= useState(null) + const [config, setConfig] = useState(null); const { calls, readyState, clear } = useRequests({ onConnect: async () => { - const response = await fetch(`http://${getHost()}/config/`) - const config = await response.json() - setConfig(config) - } + const response = await fetch(`http://${getHost()}/config/`); + const config = await response.json(); + setConfig(config); + }, }); useEffect(() => { - const url = new URL(config?.url ?? 'https://loading...'); + const url = new URL(config?.url ?? "https://loading..."); document.title = `${statusIconMap[readyState]} ${url.host} | TTUN`; - }, [readyState, config?.url]) + }, [readyState, config?.url]); - const [selectedRequestIndex, setSelectedRequestIndex] = useState(null); - const selectedRequest = useMemo(() => ( - selectedRequestIndex === null - ? null - : calls[selectedRequestIndex] - ), [selectedRequestIndex, calls]); + const [selectedRequestIndex, setSelectedRequestIndex] = useState< + number | null + >(null); + const selectedRequest = useMemo( + () => (selectedRequestIndex === null ? null : calls[selectedRequestIndex]), + [selectedRequestIndex, calls] + ); const settingsMenu: (SettingsMenu | null)[] = [ { onClick: toggle, - icon: darkMode ? : , + icon: darkMode ? : , label: darkMode ? "Light mode" : "Dark mode", }, null, @@ -85,40 +92,32 @@ export default function App() { clear(); }, icon: , - label: "Clear" - } + label: "Clear", + }, ]; - return config && ( -
- - -
- - TTUN - - - {`${statusIconMap[readyState]} ${statusTextMap[readyState]}`} - -
-
- - {config.url} - - - - + +
+ + -
-
- -
-
- -
-
-
+
+
+ +
+
+ +
+
+ + ) ); } diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index c7a5f58..56a802f 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -1,120 +1,141 @@ import * as React from "react"; -import {Dispatch, SetStateAction, useContext, useMemo} from "react"; -import {RequestPayload, ResponsePayload, Headers} from "~hooks/useRequests"; -import ReactJson from 'react-json-view'; -import styles from './Content.module.scss'; -import {Button, Col, Container, Row} from "react-bootstrap"; -import {DarkModeContext} from "../../contexts/DarkMode"; +import { Dispatch, SetStateAction, useContext, useMemo } from "react"; +import { RequestPayload, ResponsePayload, Headers } from "~hooks/useRequests"; +import ReactJson from "react-json-view"; +import styles from "./Content.module.scss"; +import { Button, Col, Container, Row } from "react-bootstrap"; +import { DarkModeContext } from "../../contexts/DarkMode"; -function getHeader(headers: Headers, key: string, unit?: string): string | null { +function getHeader( + headers: Headers, + key: string, + unit?: string +): string | null { try { - const [_, value] = headers.find(([headerKey]) => headerKey.toLowerCase() === key.toLowerCase()) - return unit !== undefined - ? `${value}${unit}` - : value + const [_, value] = headers.find( + ([headerKey]) => headerKey.toLowerCase() === key.toLowerCase() + ); + return unit !== undefined ? `${value}${unit}` : value; } catch { return null; } } interface ContentProps { - data: RequestPayload | ResponsePayload - setRaw: Dispatch> - raw?: boolean + data: RequestPayload | ResponsePayload; + setRaw: Dispatch>; + raw?: boolean; } -export default function Content({ raw, setRaw, data }: ContentProps): JSX.Element { +export default function Content({ + raw, + setRaw, + data, +}: ContentProps): JSX.Element { return (
- - setRaw(!raw)}/> - - + + setRaw(!raw)} + /> + + - { - [ - getHeader(data.headers, 'content-length', 'bytes'), - getHeader(data.headers, 'content-type'), - ].filter(x => x !== null).join('; ') - } + {[ + getHeader(data.headers, "content-length", "bytes"), + getHeader(data.headers, "content-type"), + ] + .filter((x) => x !== null) + .join("; ")} {(() => { try { - return ContentBody({ data, raw }) + return ContentBody({ data, raw }); } catch { return (

Body could not be rendered

- +
- ) + ); } })()} -
- ) -}; - -function ContentBody({ data, raw = false }: Omit) { - const { darkMode } = useContext(DarkModeContext); - const contentType = useMemo(() => { - if (raw) { - return ''; - } - - const type = getHeader(data.headers, 'content-type'); - return type.toLowerCase().split(';')[0]; - }, [data, raw]); + + ); +} +function ContentBody({ data, raw = false }: Omit) { + const { darkMode } = useContext(DarkModeContext); + const contentType = useMemo(() => { if (raw) { - return ( - 
-          
-            {atob(data.body)}
-          
-
- ) + return ""; } - if (['application/pdf', 'text/html'].includes(contentType)) { - return