28 files changed, 751 insertions, 607 deletions

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/dev_requirements.txt
index 03befb7..d5ce409 100644
--- a/build_requirements.txt
+++ b/dev_requirements.txt
@@ -1,3 +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<Config | null>(null)
+  const [config, setConfig] = useState<Config | null>(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<number | null>(null);
-  const selectedRequest = useMemo<RequestResponse | null>(() => (
-    selectedRequestIndex === null
-      ? null
-      : calls[selectedRequestIndex]
-  ), [selectedRequestIndex, calls]);
+  const [selectedRequestIndex, setSelectedRequestIndex] = useState<
+    number | null
+  >(null);
+  const selectedRequest = useMemo<RequestResponse | null>(
+    () => (selectedRequestIndex === null ? null : calls[selectedRequestIndex]),
+    [selectedRequestIndex, calls]
+  );
 
   const settingsMenu: (SettingsMenu | null)[] = [
     {
       onClick: toggle,
-      icon: darkMode ? <Sun />: <Moon />,
+      icon: darkMode ? <Sun /> : <Moon />,
       label: darkMode ? "Light mode" : "Dark mode",
     },
     null,
@@ -85,40 +92,32 @@ export default function App() {
         clear();
       },
       icon: <Trash />,
-      label: "Clear"
+      label: "Clear",