Improve fetching of tournaments (#475)

This PR simplifies fetching of a single tournament
evroon · Feb 13, 2024 · 4398987 · 4398987
1 parent f4c8bcd
commit 4398987
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 42 deletions.
diff --git a/frontend/src/pages/tournaments/[id].tsx b/frontend/src/pages/tournaments/[id].tsx
@@ -17,11 +17,11 @@ import { SchedulerSettings } from '../../interfaces/match';
 import { RoundInterface } from '../../interfaces/round';
 import { StageWithStageItems, getActiveStages } from '../../interfaces/stage';
 import { StageItemWithRounds } from '../../interfaces/stage_item';
-import { Tournament, getTournamentEndpoint } from '../../interfaces/tournament';
+import { getTournamentEndpoint } from '../../interfaces/tournament';
 import {
   checkForAuthError,
   getStages,
-  getTournaments,
+  getTournamentById,
   getUpcomingMatches,
 } from '../../services/adapter';
 import TournamentLayout from './_tournament_layout';
@@ -36,8 +36,8 @@ export default function TournamentPage() {
   const { id, tournamentData } = getTournamentIdFromRouter();
   const { t } = useTranslation();
 
-  const swrTournamentsResponse = getTournaments();
-  checkForAuthError(swrTournamentsResponse);
+  const swrTournamentResponse = getTournamentById(tournamentData.id);
+  checkForAuthError(swrTournamentResponse);
   const swrStagesResponse: SWRResponse = getStages(id);
   const [onlyRecommended, setOnlyRecommended] = useRouterQueryState('only-recommended', 'true');
   const [eloThreshold, setEloThreshold] = useRouterQueryState('max-elo-diff', 100);
@@ -64,9 +64,8 @@ export default function TournamentPage() {
     setIterations,
   };
 
-  const tournaments: Tournament[] =
-    swrTournamentsResponse.data != null ? swrTournamentsResponse.data.data : [];
-  const tournamentDataFull = tournaments.filter((tournament) => tournament.id === id)[0];
+  const tournamentDataFull =
+    swrTournamentResponse.data != null ? swrTournamentResponse.data.data : null;
 
   const isResponseValid = responseIsValid(swrStagesResponse);
   let activeStage = null;
@@ -117,7 +116,7 @@ export default function TournamentPage() {
       </>
     ) : null;
 
-  if (!swrTournamentsResponse.isLoading && tournamentDataFull == null) {
+  if (!swrTournamentResponse.isLoading && tournamentDataFull == null) {
     return <NotFoundTitle />;
   }
 

diff --git a/frontend/src/pages/tournaments/[id]/courts.tsx b/frontend/src/pages/tournaments/[id]/courts.tsx
@@ -9,7 +9,7 @@ import CourtsTable from '../../../components/tables/courts';
 import { Translator } from '../../../components/utils/types';
 import { getTournamentIdFromRouter } from '../../../components/utils/util';
 import { Tournament } from '../../../interfaces/tournament';
-import { getCourts, getTournaments } from '../../../services/adapter';
+import { getCourts, getTournamentById } from '../../../services/adapter';
 import { createCourt } from '../../../services/court';
 import TournamentLayout from '../_tournament_layout';
 
@@ -47,12 +47,9 @@ export default function CourtsPage() {
   const { tournamentData } = getTournamentIdFromRouter();
   const swrCourtsResponse = getCourts(tournamentData.id);
 
-  const swrTournamentsResponse = getTournaments();
-  const tournaments: Tournament[] =
-    swrTournamentsResponse.data != null ? swrTournamentsResponse.data.data : [];
-  const tournamentDataFull = tournaments.filter(
-    (tournament) => tournament.id === tournamentData.id
-  )[0];
+  const swrTournamentResponse = getTournamentById(tournamentData.id);
+  const tournamentDataFull =
+    swrTournamentResponse.data != null ? swrTournamentResponse.data.data : null;
   const { t } = useTranslation();
 
   return (

diff --git a/frontend/src/pages/tournaments/[id]/settings.tsx b/frontend/src/pages/tournaments/[id]/settings.tsx
@@ -27,7 +27,7 @@ import { GenericSkeleton } from '../../../components/utils/skeletons';
 import { capitalize, getBaseURL, getTournamentIdFromRouter } from '../../../components/utils/util';
 import { Club } from '../../../interfaces/club';
 import { Tournament, getTournamentEndpoint } from '../../../interfaces/tournament';
-import { getBaseApiUrl, getClubs, getTournaments } from '../../../services/adapter';
+import { getBaseApiUrl, getClubs, getTournamentById } from '../../../services/adapter';
 import { updateTournament } from '../../../services/tournament';
 import TournamentLayout from '../_tournament_layout';
 
@@ -38,11 +38,11 @@ export function TournamentLogo({ tournament }: { tournament: Tournament | null }
 
 function GeneralTournamentForm({
   tournament,
-  swrTournamentsResponse,
+  swrTournamentResponse,
   clubs,
 }: {
   tournament: Tournament;
-  swrTournamentsResponse: SWRResponse;
+  swrTournamentResponse: SWRResponse;
   clubs: Club[];
 }) {
   const { t } = useTranslation();
@@ -88,7 +88,7 @@ function GeneralTournamentForm({
           values.margin_minutes
         );
 
-        await swrTournamentsResponse.mutate(null);
+        await swrTournamentResponse.mutate(null);
       })}
     >
       <TextInput
@@ -204,27 +204,23 @@ function GeneralTournamentForm({
 export default function SettingsPage() {
   const { tournamentData } = getTournamentIdFromRouter();
   const swrClubsResponse: SWRResponse = getClubs();
-  const swrTournamentsResponse = getTournaments();
-
-  const tournaments: Tournament[] =
-    swrTournamentsResponse.data != null ? swrTournamentsResponse.data.data : [];
-  const tournamentDataFull = tournaments.filter(
-    (tournament) => tournament.id === tournamentData.id
-  )[0];
+  const swrTournamentResponse = getTournamentById(tournamentData.id);
+  const tournamentDataFull =
+    swrTournamentResponse.data != null ? swrTournamentResponse.data.data : null;
 
   const clubs: Club[] = swrClubsResponse.data != null ? swrClubsResponse.data.data : [];
 
   let content = <NotFoundTitle />;
 
-  if (swrTournamentsResponse.isLoading || swrClubsResponse.isLoading) {
+  if (swrTournamentResponse.isLoading || swrClubsResponse.isLoading) {
     content = <GenericSkeleton />;
   }
 
   if (tournamentDataFull != null) {
     content = (
       <GeneralTournamentForm
         tournament={tournamentDataFull}
-        swrTournamentsResponse={swrTournamentsResponse}
+        swrTournamentResponse={swrTournamentResponse}
         clubs={clubs}
       />
     );

diff --git a/frontend/src/pages/tournaments/[id]/stages.tsx b/frontend/src/pages/tournaments/[id]/stages.tsx
@@ -13,31 +13,26 @@ import { NoContent } from '../../../components/no_content/empty_table_info';
 import { TableSkeletonTwoColumnsSmall } from '../../../components/utils/skeletons';
 import { getTournamentIdFromRouter } from '../../../components/utils/util';
 import { StageWithStageItems } from '../../../interfaces/stage';
-import { Tournament } from '../../../interfaces/tournament';
-import { getStages, getTournaments } from '../../../services/adapter';
+import { getStages, getTournamentById } from '../../../services/adapter';
 import TournamentLayout from '../_tournament_layout';
 
 export default function StagesPage() {
   const { t } = useTranslation();
   const { tournamentData } = getTournamentIdFromRouter();
   const swrStagesResponse = getStages(tournamentData.id);
-
-  const swrTournamentsResponse = getTournaments();
-  const tournaments: Tournament[] =
-    swrTournamentsResponse.data != null ? swrTournamentsResponse.data.data : [];
-  const tournamentDataFull = tournaments.filter(
-    (tournament) => tournament.id === tournamentData.id
-  )[0];
+  const swrTournamentResponse = getTournamentById(tournamentData.id);
+  const tournamentDataFull =
+    swrTournamentResponse.data != null ? swrTournamentResponse.data.data : null;
 
   const stages: StageWithStageItems[] =
     swrStagesResponse.data != null ? swrStagesResponse.data.data : [];
 
   let content;
   if (
     swrStagesResponse.isLoading ||
-    swrTournamentsResponse.isLoading ||
+    swrTournamentResponse.isLoading ||
     swrStagesResponse.isValidating ||
-    swrTournamentsResponse.isValidating
+    swrTournamentResponse.isValidating
   ) {
     content = <TableSkeletonTwoColumnsSmall />;
   } else if (stages.length < 1) {

diff --git a/frontend/src/pages/tournaments/_tournament_layout.tsx b/frontend/src/pages/tournaments/_tournament_layout.tsx
@@ -2,16 +2,16 @@ import React from 'react';
 
 import { TournamentLinks } from '../../components/navbar/_main_links';
 import { responseIsValid } from '../../components/utils/util';
-import { checkForAuthError, getTournaments } from '../../services/adapter';
+import { checkForAuthError, getTournamentById } from '../../services/adapter';
 import Layout from '../_layout';
 
 export default function TournamentLayout({ children, tournament_id }: any) {
-  const tournamentResponse = getTournaments();
+  const tournamentResponse = getTournamentById(tournament_id);
   checkForAuthError(tournamentResponse);
 
   const tournamentLinks = <TournamentLinks tournament_id={tournament_id} />;
   const breadcrumbs = responseIsValid(tournamentResponse) ? (
-    <h2>/ {tournamentResponse.data.data[0].name}</h2>
+    <h2>/ {tournamentResponse.data.data.name}</h2>
   ) : null;
 
   return (

diff --git a/frontend/src/services/adapter.tsx b/frontend/src/services/adapter.tsx
@@ -107,6 +107,10 @@ export function getTournamentByEndpointName(tournament_endpoint_name: string): S
   return useSWR(`tournaments?endpoint_name=${tournament_endpoint_name}`, fetcher);
 }
 
+export function getTournamentById(tournament_id: number): SWRResponse {
+  return useSWR(`tournaments/${tournament_id}`, fetcher);
+}
+
 export function getTournaments(): SWRResponse {
   return useSWR('tournaments', fetcher);
 }