Beatified codev1.3.0

1 files changed, 82 insertions, 63 deletions

diff --git a/src/hooks/useRequests.tsx b/src/hooks/useRequests.tsx
index c3fc2be..108232f 100644
--- a/src/hooks/useRequests.tsx
+++ b/src/hooks/useRequests.tsx
@@ -1,43 +1,43 @@
-import {useCallback, useEffect, useMemo, useState} from "react";
-import {getHost} from "../utils";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { getHost } from "../utils";
 
-export type Headers = [string, string][]
-export type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
+export type Headers = [string, string][];
+export type Method = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
 
 export interface RequestPayload {
-  id: string
-  body: string
-  headers: Headers
-  method: Method
-  path: string
+  id: string;
+  body: string;
+  headers: Headers;
+  method: Method;
+  path: string;
 }
 
 interface Request {
-  type: 'request',
-  payload: RequestPayload,
+  type: "request";
+  payload: RequestPayload;
 }
 
 export interface ResponsePayload {
-  id: string
-  timing: number
-  body: string
-  headers: Headers
-  status: number
+  id: string;
+  timing: number;
+  body: string;
+  headers: Headers;
+  status: number;
 }
 
 interface Response {
-  type: 'response',
-  payload: ResponsePayload,
+  type: "response";
+  payload: ResponsePayload;
 }
 
 interface Historic {
-  type: 'historic'
-  payload: (Request | Response)[]
+  type: "historic";
+  payload: (Request | Response)[];
 }
 
 export interface RequestResponse {
-  request: RequestPayload
-  response?: ResponsePayload
+  request: RequestPayload;
+  response?: ResponsePayload;
 }
 
 export enum ReadyState {
@@ -48,26 +48,28 @@ export enum ReadyState {
 }
 
 export interface useRequestsProps {
-  onConnect: () => Promise<void>
+  onConnect: () => Promise<void>;
 }
 
 export interface UseRequests {
-  calls: RequestResponse[]
-  readyState: ReadyState
-  clear: () => void
+  calls: RequestResponse[];
+  readyState: ReadyState;
+  clear: () => void;
 }
 
-export default function useRequests({ onConnect }: useRequestsProps): UseRequests {
+export default function useRequests({
+  onConnect,
+}: useRequestsProps): UseRequests {
   const wsHost = useMemo(getHost, []);
 
   const [initialConnection, setInitialConnection] = useState(true);
   const [requests, setRequests] = useState<RequestPayload[]>([]);
   const [responses, setResponses] = useState<ResponsePayload[]>([]);
 
-
-  const connect = useCallback(() => (
-    new WebSocket(`ws://${wsHost}/inspect/`)
-  ), [wsHost]);
+  const connect = useCallback(
+    () => new WebSocket(`ws://${wsHost}/inspect/`),
+    [wsHost]
+  );
 
   const [ws, setWs] = useState<WebSocket>(() => connect());
   const [readyState, setReadyState] = useState<ReadyState>(ws.readyState);
@@ -78,53 +80,70 @@ export default function useRequests({ onConnect }: useRequestsProps): UseRequest
     const onClose = () => {
       setReadyState(ws.readyState);
       setWs(connect());
-    }
+    };
     const onOpen = () => {
       onConnect();
       setInitialConnection(false);
       setReadyState(ws.readyState);
-    }
+    };
     const onMessage = ({ data }) => {
-      const { type, payload } = JSON.parse(data) as Historic | Request | Response
+      const { type, payload } = JSON.parse(data) as
+        | Historic
+        | Request
+        | Response;
 
       switch (type) {
-        case 'historic':
+        case "historic":
           if (initialConnection) {
-            const requests = (payload as (Request | Response)[]).filter(({ type }) => type === 'request');
-            const responses = (payload as (Request | Response)[]).filter(({ type }) => type === 'response');
-            setRequests((rqs) => [...rqs, ...requests.map(({ payload }) => payload as RequestPayload)]);
-            setResponses((rps) => [...rps, ...responses.map(({ payload }) => payload as ResponsePayload)]);
+            const requests = (payload as (Request | Response)[]).filter(
+              ({ type }) => type === "request"
+            );
+            const responses = (payload as (Request | Response)[]).filter(
+              ({ type }) => type === "response"
+            );
+            setRequests((rqs) => [
+              ...rqs,
+              ...requests.map(({ payload }) => payload as RequestPayload),
+            ]);
+            setResponses((rps) => [
+              ...rps,
+              ...responses.map(({ payload }) => payload as ResponsePayload),
+            ]);
           }
-          break
-        case 'request':
-          setRequests((rqs) => [...rqs, payload as RequestPayload])
-          break
-        case 'response':
-          setResponses((rps) => [...rps, payload as ResponsePayload])
-          break
+          break;
+        case "request":
+          setRequests((rqs) => [...rqs, payload as RequestPayload]);
+          break;
+        case "response":
+          setResponses((rps) => [...rps, payload as ResponsePayload]);
+          break;
       }
-    }
+    };
 
-    ws.addEventListener('message', onMessage)
-    ws.addEventListener('close', onClose)
-    ws.addEventListener('open', onOpen)
+    ws.addEventListener("message", onMessage);
+    ws.addEventListener("close", onClose);
+    ws.addEventListener("open", onOpen);
 
     return () => {
-      ws.removeEventListener('message', onMessage);
-      ws.removeEventListener('close', onClose);
-      ws.removeEventListener('open', onOpen)
-    }
-  }, [ws])
+      ws.removeEventListener("message", onMessage);
+      ws.removeEventListener("close", onClose);
+      ws.removeEventListener("open", onOpen);
+    };
+  }, [ws]);
 
   return {
-    calls: useMemo<RequestResponse[]>(() => requests.map((request) => ({
-      request: request,
-      response: responses.find(({id}) => id === request.id)
-    })), [requests, responses]),
+    calls: useMemo<RequestResponse[]>(
+      () =>
+        requests.map((request) => ({
+          request: request,
+          response: responses.find(({ id }) => id === request.id),
+        })),
+      [requests, responses]
+    ),
     readyState,
     clear: () => {
-      setRequests([])
-      setResponses([])
-    }
-  }
+      setRequests([]);
+      setResponses([]);
+    },
+  };
 }