From b19c1877d088fbe01bcdea9fbdef282e66ab114f Mon Sep 17 00:00:00 2001 From: Tom van der Lee Date: Wed, 20 Mar 2024 22:25:56 +0100 Subject: Started with frontend --- src/components/App/App.tsx | 3 +- src/components/RequestDetails/RequestDetails.tsx | 2 +- src/components/RequestList/RequestList.tsx | 2 +- src/hooks/useRequests.tsx | 70 +++---------- src/types.ts | 119 +++++++++++++++++++++++ 5 files changed, 137 insertions(+), 59 deletions(-) create mode 100644 src/types.ts diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index b1a4501..5e17388 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { ReactElement, useContext, useEffect, useMemo, useState } from "react"; -import useRequests, { ReadyState, RequestResponse } from "~/hooks/useRequests"; +import useRequests from "~/hooks/useRequests"; import styles from "~/components/App/App.module.scss"; import RequestDetails from "~/components/RequestDetails/RequestDetails"; @@ -13,6 +13,7 @@ import Moon from "~/components/Icons/Moon"; import Trash from "~/components/Icons/Trash"; import { DarkModeContext } from "~/contexts/DarkMode"; import RequestList from "~/components/RequestList/RequestList"; +import { ReadyState, RequestResponse } from "~/types"; interface Config { url: string; diff --git a/src/components/RequestDetails/RequestDetails.tsx b/src/components/RequestDetails/RequestDetails.tsx index f34ef6f..9000220 100644 --- a/src/components/RequestDetails/RequestDetails.tsx +++ b/src/components/RequestDetails/RequestDetails.tsx @@ -1,11 +1,11 @@ import * as React from "react"; import { useCallback, useMemo, useState } from "react"; -import { Headers, RequestResponse } from "~/hooks/useRequests"; import styles from "~/components/RequestDetails/RequestDetails.module.scss"; import RequestSummary from "~/components/RequestSummary/RequestSummary"; import Content from "~/components/Content/Content"; import { getHost } from "~/utils"; import { Button, Card, Col, Container, Nav, Row, Table } from "react-bootstrap"; +import { Headers, RequestResponse } from "~/types"; interface TimingProps { timing: number; diff --git a/src/components/RequestList/RequestList.tsx b/src/components/RequestList/RequestList.tsx index acef47a..a4e9a0e 100644 --- a/src/components/RequestList/RequestList.tsx +++ b/src/components/RequestList/RequestList.tsx @@ -12,9 +12,9 @@ import styles from "~/components/RequestList/RequestList.module.scss"; import RequestSummary from "~/components/RequestSummary/RequestSummary"; import * as React from "react"; import { useCallback, useContext, useMemo, useState } from "react"; -import { Method, RequestResponse } from "~/hooks/useRequests"; import { DarkModeContext } from "~/contexts/DarkMode"; import Filter from "~/components/Icons/Filter"; +import { Method, RequestResponse } from "~/types"; interface ListProps { requests: RequestResponse[]; 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 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import { getHost } from "~/utils"; - -export type Headers = [string, string][]; -export type Method = - | "GET" - | "HEAD" - | "POST" - | "PUT" - | "DELETE" - | "CONNECT" - | "OPTIONS" - | "TRACE" - | "PATCH"; - -export interface RequestPayload { - id: string; - timestamp: string; - body: string; - headers: Headers; - method: Method; - path: string; -} - -interface Request { - type: "request"; - payload: RequestPayload; -} - -export interface ResponsePayload { - id: string; - timing: number; - body: string; - headers: Headers; - status: number; -} - -interface Response { - type: "response"; - payload: ResponsePayload; -} - -interface Historic { - type: "historic"; - payload: (Request | Response)[]; -} - -export interface RequestResponse { - request: RequestPayload; - response?: ResponsePayload; -} - -export enum ReadyState { - CONNECTING = 0, - OPEN = 1, - CLOSING = 2, - CLOSED = 3, -} +import { + Historic, + ReadyState, + Request, + RequestPayload, + RequestResponse, + Response, + ResponsePayload, + WebsocketType, +} from "~/types"; export interface useRequestsProps { onConnect: () => Promise; @@ -75,6 +29,8 @@ export default function useRequests({ const [initialConnection, setInitialConnection] = useState(true); const [requests, setRequests] = useState([]); const [responses, setResponses] = useState([]); + const [websocketFrames, setWebsocketFrames] = + useState(); const connect = useCallback( () => new WebSocket(`ws://${wsHost}/inspect/`), @@ -102,6 +58,8 @@ export default function useRequests({ | Request | Response; + console.debug(type, payload); + switch (type) { case "historic": if (initialConnection) { diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..84b95e3 --- /dev/null +++ b/src/types.ts @@ -0,0 +1,119 @@ +export type Headers = [string, string][]; +export type Method = + | "GET" + | "HEAD" + | "POST" + | "PUT" + | "DELETE" + | "CONNECT" + | "OPTIONS" + | "TRACE" + | "PATCH"; + +export interface RequestPayload { + id: string; + timestamp: string; + body: string; + headers: Headers; + method: Method; + path: string; +} + +export interface Request { + type: "request"; + payload: RequestPayload; +} + +export interface ResponsePayload { + id: string; + timing: number; + body: string; + headers: Headers; + status: number; +} + +export interface Response { + type: "response"; + payload: ResponsePayload; +} + +type RequestResponseType = Request | Response; + +interface WebsocketConnectPayload { + id: string; + headers: Headers; + path: string; + timestamp: string; +} + +interface WebsocketConnect { + type: "websocket_connect"; + payload: WebsocketConnectPayload; +} + +interface WebsocketConnectedPayload { + id: string; + timing: number; +} + +interface WebsocketConnected { + type: "websocket_connected"; + payload: WebsocketConnectedPayload; +} + +interface WebsocketInboundPayload { + id: string; + timestamp: string; + body: string; +} + +interface WebsocketInbound { + type: "websocket_inbound"; + payload: WebsocketInboundPayload; +} + +interface WebsocketOutboundPayload { + id: string; + timestamp: string; + body: string; +} + +interface WebsocketOutbound { + type: "websocket_outbound"; + payload: WebsocketOutboundPayload; +} + +interface WebsocketDisconnectPayload { + id: string; + timestamp: string; + close_code: number; +} + +interface WebsocketDisconnect { + type: "websocket_disconnect"; + payload: WebsocketDisconnectPayload; +} + +export type WebsocketType = + | WebsocketConnect + | WebsocketConnected + | WebsocketInbound + | WebsocketOutbound + | WebsocketDisconnect; + +export interface Historic { + type: "historic"; + payload: (RequestResponseType | WebsocketType)[]; +} + +export interface RequestResponse { + request: RequestPayload; + response?: ResponsePayload; +} + +export enum ReadyState { + CONNECTING = 0, + OPEN = 1, + CLOSING = 2, + CLOSED = 3, +} -- cgit v1.2.3