From a76abc93645f7f178038d2b64fbae2377c04fef6 Mon Sep 17 00:00:00 2001
From: Erik Vroon <erik.vroon22@gmail.com>
Date: Wed, 8 Nov 2023 17:24:38 +0100
Subject: [PATCH] Sort stage items (#324)

---
 frontend/src/components/brackets/brackets.tsx | 22 ++++++++++---------
 frontend/src/components/builder/builder.tsx   | 20 +++++++++--------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/brackets/brackets.tsx b/frontend/src/components/brackets/brackets.tsx
index af03a466..ea3b9b92 100644
--- a/frontend/src/components/brackets/brackets.tsx
+++ b/frontend/src/components/brackets/brackets.tsx
@@ -155,16 +155,18 @@ export default function Brackets({
   const stages_map = Object.fromEntries(
     swrStagesResponse.data.data.map((x: StageWithStageItems) => [x.id, x])
   );
-  const rounds = stages_map[selectedStageId].stage_items.map((stageItem: StageItemWithRounds) =>
-    getRoundsGridCols(
-      stageItem,
-      tournamentData,
-      swrStagesResponse,
-      swrCourtsResponse,
-      swrUpcomingMatchesResponse,
-      readOnly
-    )
-  );
+  const rounds = stages_map[selectedStageId].stage_items
+    .sort((i1: StageItemWithRounds, i2: StageItemWithRounds) => (i1.name > i2.name ? 1 : 0))
+    .map((stageItem: StageItemWithRounds) =>
+      getRoundsGridCols(
+        stageItem,
+        tournamentData,
+        swrStagesResponse,
+        swrCourtsResponse,
+        swrUpcomingMatchesResponse,
+        readOnly
+      )
+    );
 
   return (
     <div>
diff --git a/frontend/src/components/builder/builder.tsx b/frontend/src/components/builder/builder.tsx
index 488835d7..298e3881 100644
--- a/frontend/src/components/builder/builder.tsx
+++ b/frontend/src/components/builder/builder.tsx
@@ -140,15 +140,17 @@ function StageColumn({
     return null;
   }
 
-  const rows = stage.stage_items.map((stageItem: StageItemWithRounds) => (
-    <StageItemRow
-      key={stageItem.id}
-      teamsMap={teamsMap}
-      tournament={tournament}
-      stageItem={stageItem}
-      swrStagesResponse={swrStagesResponse}
-    />
-  ));
+  const rows = stage.stage_items
+    .sort((i1: StageItemWithRounds, i2: StageItemWithRounds) => (i1.name > i2.name ? 1 : 0))
+    .map((stageItem: StageItemWithRounds) => (
+      <StageItemRow
+        key={stageItem.id}
+        teamsMap={teamsMap}
+        tournament={tournament}
+        stageItem={stageItem}
+        swrStagesResponse={swrStagesResponse}
+      />
+    ));
 
   return (
     <Grid.Col mb="1rem" sm={6} lg={4} xl={3} key={stage.id}>