1 files changed, 77 insertions, 0 deletions

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])
+}