From 133ab5aa9192f08917e62d87a8bef33fb78d4ba5 Mon Sep 17 00:00:00 2001 From: Joey Date: Sun, 10 Dec 2023 18:11:03 +0100 Subject: [PATCH] working websocket on race detail page --- .env | 2 +- app/races/[race]/race-view.tsx | 21 ++++++++++++++++++--- src/components/topbar.tsx | 3 +++ 3 files changed, 22 insertions(+), 4 deletions(-) diff --git a/.env b/.env index 0e5a2986..85236fd8 100644 --- 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 index 82e56dbb..b42d0c03 100644 --- 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 + >(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 (
+ {JSON.stringify(Array.from(raceParticipantsMap))} {readyLoading &&
Setting ready/unready
} {raceIsPending && userParticipates && (
diff --git a/src/components/topbar.tsx b/src/components/topbar.tsx index 2e63a68f..3f1d8d33 100644 --- a/src/components/topbar.tsx +++ b/src/components/topbar.tsx @@ -86,6 +86,9 @@ const Topbar = ({ Live + + Races + Games Support