From 2f27e222add9bf10b55971ab915ac411e81d24f0 Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Sun, 23 Jan 2022 19:25:56 +0100
Subject: Rewritten ui to use boostrap

---
 src/hooks/useRequests.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

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

diff --git a/src/hooks/useRequests.tsx b/src/hooks/useRequests.tsx
index 2b8393e..5ac70a4 100644
--- a/src/hooks/useRequests.tsx
+++ b/src/hooks/useRequests.tsx
@@ -62,6 +62,7 @@ export interface 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[]>([]);
 
@@ -82,6 +83,7 @@ export default function useRequests({ onConnect }: useRequestsProps): UseRequest
     }
     const onOpen = () => {
       onConnect();
+      setInitialConnection(false);
       setReadyState(ws.readyState);
     }
     const onMessage = ({ data }) => {
@@ -89,10 +91,12 @@ export default function useRequests({ onConnect }: useRequestsProps): UseRequest
 
       switch (type) {
         case 'historic':
-          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)]);
+          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)]);
+          }
           break
         case 'request':
           setRequests((rqs) => [...rqs, payload as RequestPayload])
-- 
cgit v1.2.3