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 --- .pre-commit-config.yaml | 28 +++ .prettierignore | 5 + build_requirements.txt | 3 - dev_requirements.txt | 4 + requirements.txt | 2 +- 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 ++-- src/contexts/DarkMode.tsx | 30 +-- src/hooks/useRequests.tsx | 145 +++++++----- src/index.scss | 4 +- src/index.tsx | 9 +- src/utils.ts | 2 +- tsconfig.json | 26 +-- ttun/__main__.py | 44 ++-- ttun/client.py | 67 +++--- ttun/inspect_server.py | 53 ++--- ttun/pubsub.py | 8 +- ttun/settings.py | 22 +- ttun/types.py | 3 +- yarn.lock | 5 + 29 files changed, 754 insertions(+), 610 deletions(-) create mode 100644 .pre-commit-config.yaml create mode 100644 .prettierignore delete mode 100644 build_requirements.txt create mode 100644 dev_requirements.txt diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml new file mode 100644 index 0000000..c5c9a1e --- /dev/null +++ b/.pre-commit-config.yaml @@ -0,0 +1,28 @@ +repos: + - repo: https://github.com/pre-commit/pre-commit-hooks + rev: v2.3.0 + hooks: + - id: check-yaml + - id: end-of-file-fixer + - id: trailing-whitespace + - repo: https://github.com/psf/black + rev: 21.12b0 + hooks: + - id: black + types_or: + - python + - repo: https://github.com/asottile/reorder_python_imports + rev: v2.7.1 + hooks: + - id: reorder-python-imports + types_or: + - python + - repo: https://github.com/pre-commit/mirrors-prettier + rev: 'v2.5.1' + hooks: + - id: prettier + types_or: + - ts + - tsx + - css + - scss diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..46e2c6d --- /dev/null +++ b/.prettierignore @@ -0,0 +1,5 @@ +ttun/ +ttun.egg-info/ +.github/ +dist/ +node_modules/ diff --git a/build_requirements.txt b/build_requirements.txt deleted file mode 100644 index 03befb7..0000000 --- a/build_requirements.txt +++ /dev/null @@ -1,3 +0,0 @@ -setuptools -build -setuptools-git-versioning diff --git a/dev_requirements.txt b/dev_requirements.txt new file mode 100644 index 0000000..d5ce409 --- /dev/null +++ b/dev_requirements.txt @@ -0,0 +1,4 @@ +setuptools +build +setuptools-git-versioning +pre-commit diff --git a/requirements.txt b/requirements.txt index 04b1cf3..97a6769 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,4 +1,4 @@ --r build_requirements.txt +-r dev_requirements.txt websockets ~= 10.0 aiohttp ~= 3.8 appdirs ~= 1.4 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