reduced win loss redundancy

frontend2/src/api/compete/useCompete.ts

@@ -279,6 +279,7 @@ export const useScrimmagingRecord = ({
         teamId,
         scrimmageType,
       }),
+    staleTime: 1000 * 30, // 30 seconds
   });
 
 // ---------- MUTATION HOOKS ---------- //

frontend2/src/api/loaders/homeLoader.ts

@@ -5,7 +5,11 @@ import {
   episodeInfoFactory,
   nextTournamentFactory,
 } from "../episode/episodeFactories";
-import { ratingHistoryMeFactory } from "api/compete/competeFactories";
+import {
+  ratingHistoryMeFactory,
+  scrimmagingRecordFactory,
+} from "api/compete/competeFactories";
+import { CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum } from "api/_autogen";
 
 export const homeLoader =
   (queryClient: QueryClient): LoaderFunction =>
@@ -31,5 +35,20 @@ export const homeLoader =
       queryFn: async () => await ratingHistoryMeFactory.queryFn({ episodeId }),
     });
 
+    // User Team Scrimmage Record
+    void queryClient.ensureQueryData({
+      queryKey: buildKey(scrimmagingRecordFactory.queryKey, {
+        episodeId,
+        scrimmageType:
+          CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.All,
+      }),
+      queryFn: async () =>
+        await scrimmagingRecordFactory.queryFn({
+          episodeId,
+          scrimmageType:
+            CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.All,
+        }),
+    });
+
     return null;
   };

frontend2/src/api/loaders/myTeamLoader.ts

@@ -2,6 +2,8 @@ import type { QueryClient } from "@tanstack/react-query";
 import type { LoaderFunction } from "react-router-dom";
 import { myTeamFactory } from "../team/teamFactories";
 import { buildKey } from "../helpers";
+import { scrimmagingRecordFactory } from "api/compete/competeFactories";
+import { CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum } from "api/_autogen";
 
 export const myTeamLoader =
   (queryClient: QueryClient): LoaderFunction =>
@@ -16,5 +18,33 @@ export const myTeamLoader =
       queryFn: async () => await myTeamFactory.queryFn({ episodeId }),
     });
 
+    // Ranked and Unranked Scrimmage Record
+    void queryClient.ensureQueryData({
+      queryKey: buildKey(scrimmagingRecordFactory.queryKey, {
+        episodeId,
+        scrimmageType:
+          CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Ranked,
+      }),
+      queryFn: async () =>
+        await scrimmagingRecordFactory.queryFn({
+          episodeId,
+          scrimmageType:
+            CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Ranked,
+        }),
+    });
+    void queryClient.ensureQueryData({
+      queryKey: buildKey(scrimmagingRecordFactory.queryKey, {
+        episodeId,
+        scrimmageType:
+          CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Unranked,
+      }),
+      queryFn: async () =>
+        await scrimmagingRecordFactory.queryFn({
+          episodeId,
+          scrimmageType:
+            CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Unranked,
+        }),
+    });
+
     return null;
   };

frontend2/src/components/compete/ScrimmagingRecord.tsx

@@ -1,11 +1,14 @@
-import React from "react";
+import React, { useMemo } from "react";
 import {
   CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum,
+  type ScrimmageRecord,
   type TeamPublic,
 } from "api/_autogen";
-import { useScrimmagingRecord } from "api/compete/useCompete";
-import { useEpisodeId } from "contexts/EpisodeContext";
 import WinLossTie from "./WinLossTie";
+import { useEpisodeId } from "contexts/EpisodeContext";
+import { useQueryClient } from "@tanstack/react-query";
+import { scrimmagingRecordFactory } from "api/compete/competeFactories";
+import { buildKey } from "api/helpers";
 import { isNil } from "lodash";
 
 interface ScrimmagingRecordProps {
@@ -26,23 +29,27 @@ const ScrimmagingRecord: React.FC<ScrimmagingRecordProps> = ({
   className = "",
 }) => {
   const { episodeId } = useEpisodeId();
-  const scrimmagingRecordAll = useScrimmagingRecord({
-    episodeId,
-    teamId: team.id,
-    scrimmageType: CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.All,
-  });
-  const scrimmagingRecordUnranked = useScrimmagingRecord({
-    episodeId,
-    teamId: team.id,
-    scrimmageType:
-      CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Unranked,
-  });
-  const scrimmagingRecordRanked = useScrimmagingRecord({
-    episodeId,
-    teamId: team.id,
-    scrimmageType:
-      CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Ranked,
-  });
+  const queryClient = useQueryClient();
+
+  const scrimTypeToCheck = useMemo(() => {
+    if (!isNil(hideAllScrimmages) && !hideAllScrimmages) {
+      return CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.All;
+    } else if (!isNil(hideRanked) && !hideRanked) {
+      return CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Ranked;
+    } else if (!isNil(hideUnranked) && !hideUnranked) {
+      return CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Unranked;
+    } else {
+      return CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.All;
+    }
+  }, [hideAllScrimmages, hideRanked, hideUnranked]);
+
+  const recordWatcher = queryClient.getQueryState<ScrimmageRecord>(
+    buildKey(scrimmagingRecordFactory.queryKey, {
+      episodeId,
+      teamId: team.id,
+      scrimmageType: scrimTypeToCheck,
+    }),
+  );
 
   return (
     <div
@@ -57,9 +64,7 @@ const ScrimmagingRecord: React.FC<ScrimmagingRecordProps> = ({
           <div className="text-xl font-semibold">{team.name}</div>
         </div>
       )}
-      {scrimmagingRecordAll.isError ||
-      scrimmagingRecordUnranked.isError ||
-      scrimmagingRecordRanked.isError ? (
+      {!isNil(recordWatcher) && !isNil(recordWatcher.error) ? (
         <div className="mb-2 mt-4 flex w-full flex-row items-center justify-center gap-3 text-gray-400">
           Error fetching scrimmaging record.
         </div>
@@ -70,32 +75,23 @@ const ScrimmagingRecord: React.FC<ScrimmagingRecordProps> = ({
               scrimmageType={
                 CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.All
               }
-              loading={scrimmagingRecordAll.isFetching && isNil(scrimmagingRecordAll.data)}
-              wins={scrimmagingRecordAll.data?.wins ?? 0}
-              losses={scrimmagingRecordAll.data?.losses ?? 0}
-              ties={scrimmagingRecordAll.data?.ties ?? 0}
+              teamId={team.id}
             />
           )}
           {!hideUnranked && (
             <WinLossTie
               scrimmageType={
                 CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Unranked
               }
-              loading={scrimmagingRecordUnranked.isFetching && isNil(scrimmagingRecordUnranked.data)}
-              wins={scrimmagingRecordUnranked.data?.wins ?? 0}
-              losses={scrimmagingRecordUnranked.data?.losses ?? 0}
-              ties={scrimmagingRecordUnranked.data?.ties ?? 0}
+              teamId={team.id}
             />
           )}
           {!hideRanked && (
             <WinLossTie
               scrimmageType={
                 CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Ranked
               }
-              loading={scrimmagingRecordRanked.isFetching && isNil(scrimmagingRecordRanked.data)}
-              wins={scrimmagingRecordRanked.data?.wins ?? 0}
-              losses={scrimmagingRecordRanked.data?.losses ?? 0}
-              ties={scrimmagingRecordRanked.data?.ties ?? 0}
+              teamId={team.id}
             />
           )}
         </div>

frontend2/src/components/compete/WinLossTie.tsx

@@ -2,13 +2,12 @@ import React, { useMemo } from "react";
 import { CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum } from "api/_autogen";
 import Spinner from "components/Spinner";
 import { isNil } from "lodash";
+import { useScrimmagingRecord } from "api/compete/useCompete";
+import { useEpisodeId } from "contexts/EpisodeContext";
 
 interface WinLossTieProps {
   scrimmageType: CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum;
-  wins: number;
-  losses: number;
-  ties: number;
-  loading?: boolean;
+  teamId: number;
   className?: string;
 }
 
@@ -21,27 +20,33 @@ const scrimmageTypeToName = {
 
 const WinLossTie: React.FC<WinLossTieProps> = ({
   scrimmageType,
-  wins,
-  losses,
-  ties,
-  loading,
+  teamId,
   className = "",
 }) => {
+  const { episodeId } = useEpisodeId();
+  const scrimRecord = useScrimmagingRecord({
+    episodeId,
+    teamId,
+    scrimmageType,
+  });
+
   const HEADER =
     "w-full border-t-2 border-b-2 border-solid border-cyan-600 text-center";
 
   const dataClassName = useMemo(() => {
     const baseClassName = "w-full p-1";
-    if (!isNil(loading) && loading) {
+    if (scrimRecord.isLoading) {
       return `${baseClassName} flex flex-row items-center justify-center`;
     } else {
       return `${baseClassName} text-center font-semibold`;
     }
-  }, [loading]);
+  }, [scrimRecord.isLoading]);
 
-  const dataOrLoading = (count: number): JSX.Element => {
-    if (!isNil(loading) && loading) {
+  const dataOrLoading = (count?: number): JSX.Element => {
+    if (scrimRecord.isLoading) {
       return <Spinner size="sm" />;
+    } else if (isNil(count)) {
+      return <>—</>;
     } else {
       return <>{count}</>;
     }
@@ -64,13 +69,13 @@ const WinLossTie: React.FC<WinLossTieProps> = ({
         Ties
       </span>
       <div className={`rounded-bl-lg bg-green-200 ${dataClassName}`}>
-        {dataOrLoading(wins)}
+        {dataOrLoading(scrimRecord.data?.wins)}
       </div>
       <div className={`bg-red-200 ${dataClassName}`}>
-        {dataOrLoading(losses)}
+        {dataOrLoading(scrimRecord.data?.losses)}
       </div>
       <div className={`rounded-br-lg bg-gray-200 ${dataClassName}`}>
-        {dataOrLoading(ties)}
+        {dataOrLoading(scrimRecord.data?.ties)}
       </div>
     </div>
   );

frontend2/src/views/MyTeam.tsx

@@ -160,7 +160,11 @@ const MyTeam: React.FC = () => {
             {membersList}
           </SectionCard>
           <SectionCard className="shrink xl:hidden" title="Scrimmaging Record">
-            <ScrimmagingRecord team={teamData.data} />
+            <ScrimmagingRecord
+              team={teamData.data}
+              hideTeamName={true}
+              hideAllScrimmages={true}
+            />
           </SectionCard>
           <SectionCard className="shrink xl:hidden" title="File Upload">
             <TeamAvatar />
@@ -172,7 +176,11 @@ const MyTeam: React.FC = () => {
         <div className="flex hidden max-w-2xl flex-1 flex-col gap-8 xl:flex">
           <SectionCard title="Members">{membersList}</SectionCard>
           <SectionCard title="Scrimmaging Record">
-            <ScrimmagingRecord team={teamData.data} />
+            <ScrimmagingRecord
+              team={teamData.data}
+              hideTeamName={true}
+              hideAllScrimmages={true}
+            />
           </SectionCard>
           <SectionCard title="File Upload">
             <TeamAvatar />