working websocket on race detail page

therungg · Dec 10, 2023 · 133ab5a · 133ab5a
1 parent 488702c
commit 133ab5a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/.env b/.env
@@ -13,7 +13,7 @@ NEXT_PUBLIC_MEDIA_URL=https://d73zqe3h0v0mi.cloudfront.net/therun
 NEXT_PUBLIC_BASE_URL=http://localhost:3000
 NEXT_PUBLIC_VERCEL_URL=${VERCEL_URL}
 NEXT_PUBLIC_TWITCH_OAUTH_CLIENT_ID=
-NEXT_PUBLIC_RACE_API_URL=https://8rcz1rfrqj.execute-api.eu-west-1.amazonaws.com/prod/
+NEXT_PUBLIC_RACE_API_URL=https://6nkfyze0o7.execute-api.eu-west-1.amazonaws.com/prod
 
 DEV_API_KEY=05a83c7f-2802-4427-b21a-9efb4c5669d7
 PROD_API_KEY=

diff --git a/app/races/[race]/race-view.tsx b/app/races/[race]/race-view.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Race } from "~app/races/races.types";
+import { Race, RaceParticipant } from "~app/races/races.types";
 import { arrayToMap } from "~src/utils/array";
 import { User } from "../../../types/session.types";
 import { Button, Table } from "react-bootstrap";
@@ -17,8 +17,10 @@ interface RaceDetailProps {
 export const RaceDetail = ({ race, user }: RaceDetailProps) => {
     const router = useRouter();
     const [readyLoading, setReadyLoading] = useState(false);
+    const [raceParticipantsMap, setRaceParticipantsMap] = useState<
+        Map<string, RaceParticipant>
+    >(arrayToMap(race.participants || [], "user"));
 
-    const raceParticipantsMap = arrayToMap(race.participants || [], "user");
     const raceIsPending = race.status === "pending";
     const userParticipates = user && raceParticipantsMap.has(user.username);
 
@@ -50,12 +52,25 @@ export const RaceDetail = ({ race, user }: RaceDetailProps) => {
             lastMessage.data.raceId
         ) {
             // eslint-disable-next-line no-console
-            console.log("New race event", lastMessage.data);
+            console.log("New race event", lastMessage.data, lastMessage.type);
+
+            if (lastMessage.type === "participantUpdate") {
+                // Create a new Map for the updated state
+                const updatedMap = new Map(raceParticipantsMap);
+
+                updatedMap.set(
+                    (lastMessage.data as RaceParticipant).user,
+                    lastMessage.data as RaceParticipant
+                );
+
+                setRaceParticipantsMap(updatedMap);
+            }
         }
     }, [lastMessage]);
 
     return (
         <div>
+            {JSON.stringify(Array.from(raceParticipantsMap))}
             {readyLoading && <div>Setting ready/unready</div>}
             {raceIsPending && userParticipates && (
                 <div>

diff --git a/src/components/topbar.tsx b/src/components/topbar.tsx
@@ -86,6 +86,9 @@ const Topbar = ({
                         <Nav.Link href="/live">
                             <b>Live</b>
                         </Nav.Link>
+                        <Nav.Link href="/races">
+                            <b>Races</b>
+                        </Nav.Link>
                         <Nav.Link href="/games/">Games</Nav.Link>
                         <Nav.Link href="/patron">
                             Support <PatreonBunnySvgWithoutLink />