fixed win loss tie styling

battlecode · Sep 27, 2024 · 2cf0484 · 2cf0484
1 parent c64b09f
commit 2cf0484
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 24 deletions.
diff --git a/frontend2/src/components/compete/ScrimmagingRecord.tsx b/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>

diff --git a/frontend2/src/components/compete/WinLossTie.tsx b/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,52 @@ 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">
+      <span className={`${HEADER} border-l-[1px] border-r-[1px]`}>
         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} 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>
   );