diff --git a/frontend2/src/api/compete/useCompete.ts b/frontend2/src/api/compete/useCompete.ts index 2c595c0b8..525ee38f8 100644 --- a/frontend2/src/api/compete/useCompete.ts +++ b/frontend2/src/api/compete/useCompete.ts @@ -279,6 +279,7 @@ export const useScrimmagingRecord = ({ teamId, scrimmageType, }), + staleTime: 1000 * 30, // 30 seconds }); // ---------- MUTATION HOOKS ---------- // diff --git a/frontend2/src/api/loaders/homeLoader.ts b/frontend2/src/api/loaders/homeLoader.ts index b46c49447..7ffd87ec6 100644 --- a/frontend2/src/api/loaders/homeLoader.ts +++ b/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; }; diff --git a/frontend2/src/api/loaders/myTeamLoader.ts b/frontend2/src/api/loaders/myTeamLoader.ts index c848efbd5..23ce57202 100644 --- a/frontend2/src/api/loaders/myTeamLoader.ts +++ b/frontend2/src/api/loaders/myTeamLoader.ts @@ -2,12 +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 { isNil } from "lodash"; import { scrimmagingRecordFactory } from "api/compete/competeFactories"; -import { - CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum, - type TeamPrivate, -} from "api/_autogen"; +import { CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum } from "api/_autogen"; export const myTeamLoader = (queryClient: QueryClient): LoaderFunction => @@ -22,39 +18,33 @@ export const myTeamLoader = queryFn: async () => await myTeamFactory.queryFn({ episodeId }), }); - // Win/loss/tie - const teamDataCached = queryClient.getQueryData( - buildKey(myTeamFactory.queryKey, { episodeId }), - ); - - if (!isNil(teamDataCached)) { - void queryClient.ensureQueryData({ - queryKey: buildKey(scrimmagingRecordFactory.queryKey, { + // Ranked and Unranked Scrimmage Record + void queryClient.ensureQueryData({ + queryKey: buildKey(scrimmagingRecordFactory.queryKey, { + episodeId, + scrimmageType: + CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Ranked, + }), + queryFn: async () => + await scrimmagingRecordFactory.queryFn({ episodeId, - teamId: teamDataCached.id, scrimmageType: CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Ranked, }), - }); - - void queryClient.ensureQueryData({ - queryKey: buildKey(scrimmagingRecordFactory.queryKey, { + }); + void queryClient.ensureQueryData({ + queryKey: buildKey(scrimmagingRecordFactory.queryKey, { + episodeId, + scrimmageType: + CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Unranked, + }), + queryFn: async () => + await scrimmagingRecordFactory.queryFn({ episodeId, - teamId: teamDataCached.id, scrimmageType: CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Unranked, }), - }); - - void queryClient.ensureQueryData({ - queryKey: buildKey(scrimmagingRecordFactory.queryKey, { - episodeId, - teamId: teamDataCached.id, - scrimmageType: - CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.All, - }), - }); - } + }); return null; }; diff --git a/frontend2/src/components/compete/ScrimmagingRecord.tsx b/frontend2/src/components/compete/ScrimmagingRecord.tsx index b620fcef6..48a101508 100644 --- a/frontend2/src/components/compete/ScrimmagingRecord.tsx +++ b/frontend2/src/components/compete/ScrimmagingRecord.tsx @@ -1,11 +1,15 @@ -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 { team: Pick; @@ -25,23 +29,27 @@ const ScrimmagingRecord: React.FC = ({ 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( + buildKey(scrimmagingRecordFactory.queryKey, { + episodeId, + teamId: team.id, + scrimmageType: scrimTypeToCheck, + }), + ); return (
= ({
{team.name}
)} - {scrimmagingRecordAll.isError || - scrimmagingRecordUnranked.isError || - scrimmagingRecordRanked.isError ? ( + {!isNil(recordWatcher) && !isNil(recordWatcher.error) ? (
Error fetching scrimmaging record.
@@ -69,10 +75,7 @@ const ScrimmagingRecord: React.FC = ({ scrimmageType={ CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.All } - loading={scrimmagingRecordAll.isFetching} - wins={scrimmagingRecordAll.data?.wins ?? 0} - losses={scrimmagingRecordAll.data?.losses ?? 0} - ties={scrimmagingRecordAll.data?.ties ?? 0} + teamId={team.id} /> )} {!hideUnranked && ( @@ -80,10 +83,7 @@ const ScrimmagingRecord: React.FC = ({ scrimmageType={ CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Unranked } - loading={scrimmagingRecordUnranked.isFetching} - wins={scrimmagingRecordUnranked.data?.wins ?? 0} - losses={scrimmagingRecordUnranked.data?.losses ?? 0} - ties={scrimmagingRecordUnranked.data?.ties ?? 0} + teamId={team.id} /> )} {!hideRanked && ( @@ -91,10 +91,7 @@ const ScrimmagingRecord: React.FC = ({ scrimmageType={ CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Ranked } - loading={scrimmagingRecordRanked.isFetching} - wins={scrimmagingRecordRanked.data?.wins ?? 0} - losses={scrimmagingRecordRanked.data?.losses ?? 0} - ties={scrimmagingRecordRanked.data?.ties ?? 0} + teamId={team.id} /> )} diff --git a/frontend2/src/components/compete/WinLossTie.tsx b/frontend2/src/components/compete/WinLossTie.tsx index 2de044c5f..824ce8d2a 100644 --- a/frontend2/src/components/compete/WinLossTie.tsx +++ b/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 = ({ 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 ; + } else if (isNil(count)) { + return <>—; } else { return <>{count}; } @@ -64,13 +69,13 @@ const WinLossTie: React.FC = ({ Ties
- {dataOrLoading(wins)} + {dataOrLoading(scrimRecord.data?.wins)}
- {dataOrLoading(losses)} + {dataOrLoading(scrimRecord.data?.losses)}
- {dataOrLoading(ties)} + {dataOrLoading(scrimRecord.data?.ties)}
); diff --git a/frontend2/src/views/Home.tsx b/frontend2/src/views/Home.tsx index 7946c6aee..248a124b6 100644 --- a/frontend2/src/views/Home.tsx +++ b/frontend2/src/views/Home.tsx @@ -75,7 +75,11 @@ const Home: React.FC = () => { {userTeam.isSuccess && ( - + )} diff --git a/frontend2/src/views/MyTeam.tsx b/frontend2/src/views/MyTeam.tsx index dbb495c53..afe55966f 100644 --- a/frontend2/src/views/MyTeam.tsx +++ b/frontend2/src/views/MyTeam.tsx @@ -160,7 +160,11 @@ const MyTeam: React.FC = () => { {membersList} - + @@ -172,7 +176,11 @@ const MyTeam: React.FC = () => {
{membersList} - +