diff options
Diffstat (limited to 'src/hooks')
| -rw-r--r-- | src/hooks/useRequests.tsx | 70 |
1 files changed, 14 insertions, 56 deletions
diff --git a/src/hooks/useRequests.tsx b/src/hooks/useRequests.tsx index 1361949..dfc3b80 100644 --- a/src/hooks/useRequests.tsx +++ b/src/hooks/useRequests.tsx | |||
| @@ -1,61 +1,15 @@ | |||
| 1 | import { useCallback, useEffect, useMemo, useState } from "react"; | 1 | import { useCallback, useEffect, useMemo, useState } from "react"; |
| 2 | import { getHost } from "~/utils"; | 2 | import { getHost } from "~/utils"; |
| 3 | 3 | import { | |
| 4 | export type Headers = [string, string][]; | 4 | Historic, |
| 5 | export type Method = | 5 | ReadyState, |
| 6 | | "GET" | 6 | Request, |
| 7 | | "HEAD" | 7 | RequestPayload, |
| 8 | | "POST" | 8 | RequestResponse, |
| 9 | | "PUT" | 9 | Response, |
| 10 | | "DELETE" | 10 | ResponsePayload, |
| 11 | | "CONNECT" | 11 | WebsocketType, |
| 12 | | "OPTIONS" | 12 | } from "~/types"; |
| 13 | | "TRACE" | ||
| 14 | | "PATCH"; | ||
| 15 | |||
| 16 | export interface RequestPayload { | ||
| 17 | id: string; | ||
| 18 | timestamp: string; | ||
| 19 | body: string; | ||
| 20 | headers: Headers; | ||
| 21 | method: Method; | ||
| 22 | path: string; | ||
| 23 | } | ||
| 24 | |||
| 25 | interface Request { | ||
| 26 | type: "request"; | ||
| 27 | payload: RequestPayload; | ||
| 28 | } | ||
| 29 | |||
| 30 | export interface ResponsePayload { | ||
| 31 | id: string; | ||
| 32 | timing: number; | ||
| 33 | body: string; | ||
| 34 | headers: Headers; | ||
| 35 | status: number; | ||
| 36 | } | ||
| 37 | |||
| 38 | interface Response { | ||
| 39 | type: "response"; | ||
| 40 | payload: ResponsePayload; | ||
| 41 | } | ||
| 42 | |||
| 43 | interface Historic { | ||
| 44 | type: "historic"; | ||
| 45 | payload: (Request | Response)[]; | ||
| 46 | } | ||
| 47 | |||
| 48 | export interface RequestResponse { | ||
| 49 | request: RequestPayload; | ||
| 50 | response?: ResponsePayload; | ||
| 51 | } | ||
| 52 | |||
| 53 | export enum ReadyState { | ||
| 54 | CONNECTING = 0, | ||
| 55 | OPEN = 1, | ||
| 56 | CLOSING = 2, | ||
| 57 | CLOSED = 3, | ||
| 58 | } | ||
| 59 | 13 | ||
| 60 | export interface useRequestsProps { | 14 | export interface useRequestsProps { |
| 61 | onConnect: () => Promise<void>; | 15 | onConnect: () => Promise<void>; |
| @@ -75,6 +29,8 @@ export default function useRequests({ | |||
| 75 | const [initialConnection, setInitialConnection] = useState(true); | 29 | const [initialConnection, setInitialConnection] = useState(true); |
| 76 | const [requests, setRequests] = useState<RequestPayload[]>([]); | 30 | const [requests, setRequests] = useState<RequestPayload[]>([]); |
| 77 | const [responses, setResponses] = useState<ResponsePayload[]>([]); | 31 | const [responses, setResponses] = useState<ResponsePayload[]>([]); |
| 32 | const [websocketFrames, setWebsocketFrames] = | ||
| 33 | useState<WebsocketType["payload"]>(); | ||
| 78 | 34 | ||
| 79 | const connect = useCallback( | 35 | const connect = useCallback( |
| 80 | () => new WebSocket(`ws://${wsHost}/inspect/`), | 36 | () => new WebSocket(`ws://${wsHost}/inspect/`), |
| @@ -102,6 +58,8 @@ export default function useRequests({ | |||
| 102 | | Request | 58 | | Request |
| 103 | | Response; | 59 | | Response; |
| 104 | 60 | ||
| 61 | console.debug(type, payload); | ||
| 62 | |||
| 105 | switch (type) { | 63 | switch (type) { |
| 106 | case "historic": | 64 | case "historic": |
| 107 | if (initialConnection) { | 65 | if (initialConnection) { |
