When match ends -> events

app/hooks/useBracketDataWithEvents.ts

@@ -2,32 +2,54 @@ import * as React from "react";
 import { useLoaderData } from "remix";
 import type { BracketData } from "server/events";
 import type { BracketModified } from "~/services/bracket";
+import { Unpacked } from "~/utils";
 import { useEvents } from "~/utils/hooks";
 
 export function useBracketDataWithEvents(): BracketModified {
   const data = useLoaderData<BracketModified>();
   const [dataWithEvents, setDataWithEvents] = React.useState(data);
+  useEvents(data.id, (data: unknown) => {
+    const dataMap = (data as BracketData).reduce(
+      (map, bracketData) => map.set(bracketData.number, bracketData),
+      new Map<number, Unpacked<BracketData>>()
+    );
 
-  const handleEvent = (data: unknown) => {
-    for (const { number, participants, score } of data as BracketData) {
-      setDataWithEvents({
-        ...dataWithEvents,
-        rounds: dataWithEvents.rounds.map((round) => ({
-          ...round,
-          matches: round.matches.map((match) => {
-            if (match.number !== number) return match;
-            return {
-              ...match,
-              participants: participants ?? match.participants,
-              score: score ?? match.score,
-            };
-          }),
-        })),
-      });
-    }
-  };
+    setDataWithEvents({
+      ...dataWithEvents,
+      rounds: dataWithEvents.rounds.map((round) => ({
+        ...round,
+        matches: round.matches.map((match) => {
+          const bracketData = dataMap.get(match.number);
+          if (match.number !== bracketData?.number) return match;
 
-  useEvents(data.id, handleEvent);
+          // with null we overwrite
+          // with undefined we use the previous value
+          const getParticipants = () => {
+            if (bracketData.participants === null) return undefined;
+            if (bracketData.participants) return bracketData.participants;
+
+            return match.participants;
+          };
+          const getScore = () => {
+            if (bracketData.score === null) return undefined;
+            if (bracketData.score) return bracketData.score;
+
+            return match.score;
+          };
+
+          return {
+            id: match.id,
+            loserDestinationMatchId: match.loserDestinationMatchId,
+            winnerDestinationMatchId: match.winnerDestinationMatchId,
+            number: match.number,
+            participantSourceMatches: match.participantSourceMatches,
+            participants: getParticipants(),
+            score: getScore(),
+          };
+        }),
+      })),
+    });
+  });
 
   return dataWithEvents;
 }

app/services/bracket.ts

@@ -274,7 +274,7 @@ export async function reportScore({
             : undefined,
         score: newScore,
       },
-      //...newParticipantsToBracketData(),
+      ...newParticipantsToBracketData(newParticipants, bracket),
     ];
     // otherwise if set is not over simply create result and return
   } else {
@@ -422,36 +422,47 @@ function newParticipantsForMatches({
   return result;
 }
 
-// function newParticipantsToBracketData(
-//   data: TournamentMatch.CreateParticipantsData,
-//   bracket: TournamentBracket.FindById
-// ): BracketData {
-//   const result: BracketData = [];
+function newParticipantsToBracketData(
+  data: TournamentMatch.CreateParticipantsData,
+  bracket: TournamentBracket.FindById
+): BracketData {
+  const result: BracketData = [];
 
-//   // [
-//   //   match.position,
-//   //   upperParticipant?.team.name ?? null,
-//   //   lowerParticipant?.team.name ?? null,
-//   //   newScore[0],
-//   //   newScore[1],
-//   // ],
-//   for (const participant of data) {
-//     const match = bracket?.rounds
-//       .flatMap((r) => r.matches)
-//       .find((match) => match.id === participant.matchId);
-//     invariant(match, "match is undefined");
+  for (const participant of data) {
+    const matches = bracket?.rounds.flatMap((r) => r.matches);
+    const match = matches?.find((match) => match.id === participant.matchId);
+    invariant(matches && match, "match is undefined");
 
-//     const upperParticipant = () => {
-//       if (participant.)
-//     };
+    const allParticipants = matches.flatMap((m) => m.participants);
 
-//     result.push([
-//       match.position,
-//       match.participants.find((p) => p.order === "UPPER") ?? "",
-//       match.participants.find((p) => p.order === "LOWER") ?? "",
-//     ]);
-//   }
-// }
+    const participants = (): NonNullable<
+      Unpacked<BracketData>["participants"]
+    > => {
+      let upper =
+        match.participants.find((p) => p.order === "UPPER")?.team.name ?? null;
+      let lower =
+        match.participants.find((p) => p.order === "LOWER")?.team.name ?? null;
+
+      const newParticipant = allParticipants.find(
+        (p) => p.team.id === participant.teamId
+      );
+      invariant(newParticipant, "newParticipant is undefined");
+
+      if (participant.order === "UPPER") upper = newParticipant.team.name;
+      else lower = newParticipant.team.name;
+
+      return [upper, lower];
+    };
+
+    result.push({
+      number: match.position,
+      participants: participants(),
+      score: participants().length > 1 ? [0, 0] : null,
+    });
+  }
+
+  return result;
+}
 
 export async function undoLastScore({
   matchId,

server/events.ts

@@ -6,10 +6,12 @@ import { Unpacked } from "~/utils";
 
 export type BracketData = {
   number: Unpacked<Unpacked<BracketModified["rounds"]>["matches"]>["number"];
-  participants: Unpacked<
-    Unpacked<BracketModified["rounds"]>["matches"]
-  >["participants"];
-  score: Unpacked<Unpacked<BracketModified["rounds"]>["matches"]>["score"];
+  participants:
+    | Unpacked<Unpacked<BracketModified["rounds"]>["matches"]>["participants"]
+    | null;
+  score:
+    | Unpacked<Unpacked<BracketModified["rounds"]>["matches"]>["score"]
+    | null;
 }[];
 
 export interface EventTargetRecorder {