From bcb77d979d817e1e609adb4d007bbbcc3f61efbd Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Thu, 30 Dec 2021 09:51:00 +0100
Subject: Prepare for github

---
 src/hooks/useRequests.tsx | 77 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 src/hooks/useRequests.tsx

(limited to 'src/hooks/useRequests.tsx')

diff --git a/src/hooks/useRequests.tsx b/src/hooks/useRequests.tsx
new file mode 100644
index 0000000..3ad5cc7
--- /dev/null
+++ b/src/hooks/useRequests.tsx
@@ -0,0 +1,77 @@
+import {useCallback, useEffect, useMemo, useState} from "react";
+import {getHost} from "../utils";
+
+type Dict = {
+  [key: string]: string
+}
+
+export interface RequestPayload {
+  id: string
+  body: string
+  cookies: Dict
+  headers: Dict
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
+  path: string
+}
+
+interface Request {
+  type: 'request',
+  payload: RequestPayload,
+}
+
+export interface ResponsePayload {
+  id: string
+  timing: number
+  body: string
+  cookies: Dict
+  headers: Dict
+  status: number
+}
+
+interface Response {
+  type: 'response',
+  payload: ResponsePayload,
+}
+
+export interface RequestResponse {
+  request: RequestPayload
+  response?: ResponsePayload
+}
+
+export default function useRequests(): RequestResponse[] {
+  const wsHost = useMemo(getHost, []);
+  const connect = useCallback(() => new WebSocket(`ws://${wsHost}/inspect/`), [wsHost])
+
+  const [requests, setRequests] = useState<RequestPayload[]>([]);
+  const [responses, setResponses] = useState<ResponsePayload[]>([]);
+  const [ws, setWs] = useState(() => connect());
+
+  useEffect(() => {
+    const reconnect = () => setWs(() => connect())
+    const onMessage = ({ data }) => {
+      const { type, payload } = JSON.parse(data) as Request | Response
+
+      switch (type) {
+        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', reconnect)
+
+    return () => {
+      ws.removeEventListener('message', onMessage);
+      ws.removeEventListener('close', reconnect);
+    }
+  }, [ws])
+
+  return useMemo<RequestResponse[]>(() => requests.map((request) => ({
+    request: request,
+    response: responses.find(({ id }) => id === request.id)
+  })), [requests, responses])
+}
-- 
cgit v1.2.3