fixed win loss tie styling

working win loss tie

frontend2/.env.development

@@ -1,3 +1,3 @@
 REACT_APP_THIS_URL=http://localhost:3000
-REACT_APP_BACKEND_URL=http://api.staging.battlecode.org/
+REACT_APP_BACKEND_URL=http://localhost:8000
 REACT_APP_REPLAY_URL=https://play.battlecode.org

frontend2/src/api/loaders/myTeamLoader.ts

@@ -2,6 +2,12 @@ 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";
 
 export const myTeamLoader =
   (queryClient: QueryClient): LoaderFunction =>
@@ -16,5 +22,39 @@ export const myTeamLoader =
       queryFn: async () => await myTeamFactory.queryFn({ episodeId }),
     });
 
+    // Win/loss/tie
+    const teamDataCached = queryClient.getQueryData<TeamPrivate>(
+      buildKey(myTeamFactory.queryKey, { episodeId }),
+    );
+
+    if (!isNil(teamDataCached)) {
+      void queryClient.ensureQueryData({
+        queryKey: buildKey(scrimmagingRecordFactory.queryKey, {
+          episodeId,
+          teamId: teamDataCached.id,
+          scrimmageType:
+            CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Ranked,
+        }),
+      });
+
+      void queryClient.ensureQueryData({
+        queryKey: buildKey(scrimmagingRecordFactory.queryKey, {
+          episodeId,
+          teamId: teamDataCached.id,
+          scrimmageType:
+            CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Unranked,
+        }),
+      });
+
+      void queryClient.ensureQueryData({
+        queryKey: buildKey(scrimmagingRecordFactory.queryKey, {
+          episodeId,
+          teamId: teamDataCached.id,
+          scrimmageType:
+            CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.All,
+        }),
+      });
+    }
+
     return null;
   };

frontend2/src/components/compete/ScrimmagingRecord.tsx

@@ -6,7 +6,6 @@ import {
 import { useScrimmagingRecord } from "api/compete/useCompete";
 import { useEpisodeId } from "contexts/EpisodeContext";
 import WinLossTie from "./WinLossTie";
-import Spinner from "components/Spinner";
 
 interface ScrimmagingRecordProps {
   team: Pick<TeamPublic, "id" | "name" | "profile">;
@@ -57,11 +56,11 @@ const ScrimmagingRecord: React.FC<ScrimmagingRecordProps> = ({
           <div className="text-xl font-semibold">{team.name}</div>
         </div>
       )}
-      {!scrimmagingRecordAll.isSuccess ||
-      !scrimmagingRecordUnranked.isSuccess ||
-      !scrimmagingRecordRanked.isSuccess ? (
+      {scrimmagingRecordAll.isError ||
+      scrimmagingRecordUnranked.isError ||
+      scrimmagingRecordRanked.isError ? (
         <div className="mb-2 mt-4 flex w-full flex-row items-center justify-center gap-3 text-gray-400">
-          Loading... <Spinner size="lg" />
+          Error fetching scrimmaging record.
         </div>
       ) : (
         <div className="flex w-full flex-row items-center justify-center gap-3 md:flex-col">
@@ -70,29 +69,32 @@ const ScrimmagingRecord: React.FC<ScrimmagingRecordProps> = ({
               scrimmageType={
                 CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.All
               }
-              wins={scrimmagingRecordAll.data.wins ?? 0}
-              losses={scrimmagingRecordAll.data.losses ?? 0}
-              ties={scrimmagingRecordAll.data.ties ?? 0}
+              loading={scrimmagingRecordAll.isFetching}
+              wins={scrimmagingRecordAll.data?.wins ?? 0}
+              losses={scrimmagingRecordAll.data?.losses ?? 0}
+              ties={scrimmagingRecordAll.data?.ties ?? 0}
             />
           )}
           {!hideUnranked && (
             <WinLossTie
               scrimmageType={
                 CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Unranked
               }
-              wins={scrimmagingRecordUnranked.data.wins ?? 0}
-              losses={scrimmagingRecordUnranked.data.losses ?? 0}
-              ties={scrimmagingRecordUnranked.data.ties ?? 0}
+              loading={scrimmagingRecordUnranked.isFetching}
+              wins={scrimmagingRecordUnranked.data?.wins ?? 0}
+              losses={scrimmagingRecordUnranked.data?.losses ?? 0}
+              ties={scrimmagingRecordUnranked.data?.ties ?? 0}
             />
           )}
           {!hideRanked && (
             <WinLossTie
               scrimmageType={
                 CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.Ranked
               }
-              wins={scrimmagingRecordRanked.data.wins ?? 0}
-              losses={scrimmagingRecordRanked.data.losses ?? 0}
-              ties={scrimmagingRecordRanked.data.ties ?? 0}
+              loading={scrimmagingRecordRanked.isFetching}
+              wins={scrimmagingRecordRanked.data?.wins ?? 0}
+              losses={scrimmagingRecordRanked.data?.losses ?? 0}
+              ties={scrimmagingRecordRanked.data?.ties ?? 0}
             />
           )}
         </div>

frontend2/src/components/compete/WinLossTie.tsx

@@ -1,11 +1,14 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum } from "api/_autogen";
+import Spinner from "components/Spinner";
+import { isNil } from "lodash";
 
 interface WinLossTieProps {
   scrimmageType: CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum;
   wins: number;
   losses: number;
   ties: number;
+  loading?: boolean;
   className?: string;
 }
 
@@ -21,32 +24,53 @@ const WinLossTie: React.FC<WinLossTieProps> = ({
   wins,
   losses,
   ties,
+  loading,
   className = "",
 }) => {
+  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) {
+      return `${baseClassName} flex flex-row items-center justify-center`;
+    } else {
+      return `${baseClassName} text-center font-semibold`;
+    }
+  }, [loading]);
+
+  const dataOrLoading = (count: number): JSX.Element => {
+    if (!isNil(loading) && loading) {
+      return <Spinner size="sm" />;
+    } else {
+      return <>{count}</>;
+    }
+  };
+
   return (
     <div
       className={`grid w-full grid-cols-3 justify-stretch justify-items-center ${className}`}
     >
       <div className="col-span-3 text-lg font-semibold">
         {scrimmageTypeToName[scrimmageType]}
       </div>
-      <span className="w-full rounded-tl-lg border-b-2 border-l-2 border-r-[1px] border-t-2 border-solid border-cyan-600 text-center">
+      <span
+        className={`${HEADER} rounded-tl-lg border-b-2 border-l-2 border-r-[1px]`}
+      >
         Wins
       </span>
-      <span className="w-full border-b-2 border-l-[1px] border-r-[1px] border-t-2 border-solid border-cyan-600 text-center">
-        Losses
-      </span>
-      <span className="w-full rounded-tr-lg border-b-2 border-l-[1px] border-r-2 border-t-2 border-solid border-cyan-600 text-center">
+      <span className={`${HEADER} border-l-[1px] border-r-[1px]`}>Losses</span>
+      <span className={`${HEADER} rounded-tr-lg border-l-[1px] border-r-2`}>
         Ties
       </span>
-      <div className="w-full rounded-bl-lg bg-green-200 text-center font-semibold">
-        {wins}
+      <div className={`rounded-bl-lg bg-green-200 ${dataClassName}`}>
+        {dataOrLoading(wins)}
       </div>
-      <div className="w-full bg-red-200 text-center font-semibold">
-        {losses}
+      <div className={`bg-red-200 ${dataClassName}`}>
+        {dataOrLoading(losses)}
       </div>
-      <div className="w-full rounded-br-lg bg-gray-200 text-center font-semibold">
-        {ties}
+      <div className={`rounded-br-lg bg-gray-200 ${dataClassName}`}>
+        {dataOrLoading(ties)}
       </div>
     </div>
   );

frontend2/src/components/tables/RankingsTable.tsx

@@ -76,7 +76,7 @@ const RankingsTable: React.FC<RankingsTableProps> = ({
               <>
                 <NavLink
                   key={idx}
-                  to={`/user/${member.id}`}
+                  to={`/${episodeId}/user/${member.id}`}
                   className="hover:underline"
                 >
                   {trimString(member.username, 13)}

frontend2/src/views/MyTeam.tsx

@@ -21,6 +21,7 @@ import Loading from "components/Loading";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { FIELD_REQUIRED_ERROR_MSG } from "utils/constants";
 import FormLabel from "components/elements/FormLabel";
+import ScrimmagingRecord from "components/compete/ScrimmagingRecord";
 
 interface InfoFormInput {
   quote: string;
@@ -61,9 +62,9 @@ const MyTeam: React.FC = () => {
     },
   );
 
-  const onInfoSubmit: SubmitHandler<InfoFormInput> = async (data) => {
+  const onInfoSubmit: SubmitHandler<InfoFormInput> = (data) => {
     if (updateTeam.isPending) return;
-    await updateTeam.mutateAsync({
+    updateTeam.mutate({
       profile: {
         quote: data.quote,
         biography: data.biography,
@@ -72,13 +73,13 @@ const MyTeam: React.FC = () => {
     resetInfo();
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-misused-promises
-  const onLeaveTeam: EventHandler<React.MouseEvent<HTMLButtonElement>> = async (
+  const onLeaveTeam: EventHandler<React.MouseEvent<HTMLButtonElement>> = (
     event,
   ) => {
     if (leaveTeam.isPending) return;
     event.preventDefault();
-    await leaveTeam.mutateAsync();
+    event.stopPropagation();
+    leaveTeam.mutate();
     setIsLeaveModalOpen(false);
   };
 
@@ -154,19 +155,25 @@ const MyTeam: React.FC = () => {
               </div>
             </form>
           </SectionCard>
-          {/* The members list and file upload that display when on a smaller screen */}
+          {/* The members list, file upload, and win/loss that display when on a smaller screen */}
           <SectionCard className="shrink xl:hidden" title="Members">
             {membersList}
           </SectionCard>
+          <SectionCard className="shrink xl:hidden" title="Scrimmaging Record">
+            <ScrimmagingRecord team={teamData.data} />
+          </SectionCard>
           <SectionCard className="shrink xl:hidden" title="File Upload">
             <TeamAvatar />
           </SectionCard>
           <EligibilitySettings />
           <ScrimmageSettings />
         </div>
-        {/* Display the members list and file upload to the right when on a big screen. */}
+        {/* Display the members list, file upload, and win/loss to the right when on a big screen. */}
         <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} />
+          </SectionCard>
           <SectionCard title="File Upload">
             <TeamAvatar />
           </SectionCard>
@@ -188,7 +195,6 @@ const MyTeam: React.FC = () => {
           <div className="flex flex-row gap-4">
             <Button
               variant="danger-outline"
-              // eslint-disable-next-line @typescript-eslint/no-misused-promises
               onClick={onLeaveTeam}
               loading={leaveTeam.isPending}
               label="Leave team"