Refactor BracketModified to common format

app/components/tournament/BracketActions.tsx

@@ -29,22 +29,13 @@ export function BracketActions() {
 
   if (tournamentIsOver || !ownTeam) return null;
 
-  const allMatches = [
-    ...data.winners.flatMap((round, roundI) =>
-      round.matches.map((match) => ({
-        ...match,
-        round,
-        isFirstRound: roundI === 0,
-      }))
-    ),
-    ...data.losers.flatMap((round) =>
-      round.matches.map((match) => ({
-        ...match,
-        round,
-        isFirstRound: false,
-      }))
-    ),
-  ];
+  const allMatches = data.rounds.flatMap((round, roundI) =>
+    round.matches.map((match) => ({
+      ...match,
+      round,
+      isFirstRound: roundI === 0,
+    }))
+  );
   const currentMatch = allMatches.find((match) => {
     const hasBothParticipants = match.participants?.every(
       (p) => typeof p === "string"

app/components/tournament/DuringMatchActions.tsx

@@ -15,8 +15,8 @@ export function DuringMatchActions({
   currentRound,
 }: {
   ownTeam: Unpacked<FindTournamentByNameForUrlI["teams"]>;
-  currentMatch: Unpacked<Unpacked<BracketModified["winners"]>["matches"]>;
-  currentRound: Unpacked<BracketModified["winners"]>;
+  currentMatch: Unpacked<Unpacked<BracketModified["rounds"]>["matches"]>;
+  currentRound: Unpacked<BracketModified["rounds"]>;
 }) {
   const [, parentRoute] = useMatches();
   const { teams, seeds } = parentRoute.data as FindTournamentByNameForUrlI;

app/components/tournament/EliminationBracket.tsx

@@ -6,31 +6,31 @@ import { MyCSSProperties, Unpacked } from "~/utils";
 import { EliminationBracketMatch } from "./EliminationBracketMatch";
 
 export function EliminationBracket({
-  bracketSide,
+  rounds,
   ownTeamName,
 }: {
-  bracketSide: BracketModified["winners"];
+  rounds: BracketModified["rounds"];
   ownTeamName?: string;
 }) {
   const style: MyCSSProperties = {
-    "--brackets-columns": bracketSide.length,
-    "--brackets-max-matches": bracketSide[0].matches.length,
+    "--brackets-columns": rounds.length,
+    "--brackets-max-matches": rounds[0].matches.length,
   };
   return (
     <div className="tournament-bracket__elim__container" style={style}>
       <div className="tournament-bracket__elim__bracket">
-        {bracketSide.map((round, i) => (
+        {rounds.map((round, i) => (
           <RoundInfo
             key={round.id}
             title={round.name}
-            isLast={i === bracketSide.length - 1}
+            isLast={i === rounds.length - 1}
             bestOf={round.stages.length}
             status="UPCOMING"
           />
         ))}
-        {bracketSide.map((round, roundI) => {
-          const nextRound: Unpacked<BracketModified["winners"]> | undefined =
-            bracketSide[roundI + 1];
+        {rounds.map((round, roundI) => {
+          const nextRound: Unpacked<BracketModified["rounds"]> | undefined =
+            rounds[roundI + 1];
           const amountOfMatchesBetweenRoundsEqual =
             round.matches.length === nextRound?.matches.length;
           const drawStraightLines =
@@ -64,7 +64,7 @@ export function EliminationBracket({
                 })}
               </div>
               <div className="tournament-bracket__elim__lines">
-                {roundI !== bracketSide.length - 1 &&
+                {roundI !== rounds.length - 1 &&
                   theKindOfLinesToDraw({
                     amountOfMatchesBetweenRoundsEqual,
                     round,
@@ -86,7 +86,7 @@ function theKindOfLinesToDraw({
   roundI,
   amountOfMatchesBetweenRoundsEqual,
 }: {
-  round: Unpacked<BracketModified["winners"]>;
+  round: Unpacked<BracketModified["rounds"]>;
   roundI: number;
   amountOfMatchesBetweenRoundsEqual: boolean;
 }): (undefined | "no-line" | "bottom-only" | "top-only")[] {

app/components/tournament/EliminationBracketMatch.tsx

@@ -8,7 +8,7 @@ export function EliminationBracketMatch({
   ownTeamName,
   isOver,
 }: {
-  match: Unpacked<Unpacked<BracketModified["winners"]>["matches"]>;
+  match: Unpacked<Unpacked<BracketModified["rounds"]>["matches"]>;
   hidden?: boolean;
   ownTeamName?: string;
   isOver: boolean;

app/routes/to/$organization.$tournament/bracket.$id.tsx

@@ -131,11 +131,11 @@ export default function BracketTabWrapper() {
     <div className="tournament-bracket__container">
       <BracketActions />
       <EliminationBracket
-        bracketSide={data.winners}
+        rounds={data.rounds.filter((round) => round.side === "winners")}
         ownTeamName={ownTeam?.name}
       />
       <EliminationBracket
-        bracketSide={data.losers}
+        rounds={data.rounds.filter((round) => round.side === "losers")}
         ownTeamName={ownTeam?.name}
       />
     </div>

app/services/bracket.ts

@@ -2,7 +2,6 @@ import type { Stage, TeamOrder } from ".prisma/client";
 import type { BracketData } from "server/events";
 import invariant from "tiny-invariant";
 import {
-  EliminationBracket,
   EliminationBracketSide,
   losersRoundNames,
   winnersRoundNames,
@@ -16,11 +15,14 @@ import { db } from "~/utils/db.server";
 
 export type BracketModified = {
   id: string;
-} & EliminationBracket<BracketModifiedSide>;
+  rounds: BracketModifiedSide;
+};
+
 type BracketModifiedSide = {
   id: string;
   name: string;
   stages: { position: number; stage: Stage }[];
+  side?: EliminationBracketSide;
   matches: {
     id: string;
     number: number;
@@ -53,12 +55,17 @@ export async function bracketById(bracketId: string): Promise<BracketModified> {
     "winners",
     losersRounds.length === 0
   );
-  const losers = modifyRounds(losersRounds, "losers", false);
+  const losers = addLoserTeamSourceInfo({
+    winners,
+    losers: modifyRounds(losersRounds, "losers", false),
+  });
+  const rounds = winners
+    .map((round) => ({ ...round, side: "winners" as EliminationBracketSide }))
+    .concat(losers.map((round) => ({ ...round, side: "losers" })));
 
   return {
     id: bracketId,
-    winners,
-    losers: addLoserTeamSourceInfo({ winners, losers }),
+    rounds,
   };
 }