implemented user chart and team chart

frontend2/src/App.tsx

@@ -51,6 +51,7 @@ import PageNotFound from "views/PageNotFound";
 import TeamProfile from "views/TeamProfile";
 import { homeIfLoggedIn } from "api/loaders/homeIfLoggedIn";
 import { episodeLoader } from "api/loaders/episodeLoader";
+import { accountLoader } from "api/loaders/accountLoader";
 
 const queryClient = new QueryClient({
   queryCache: new QueryCache({
@@ -118,7 +119,13 @@ const router = createBrowserRouter([
     children: [
       {
         element: <EpisodeLayout />,
-        children: [{ path: "/account", element: <Account /> }],
+        children: [
+          {
+            path: "/account",
+            element: <Account />,
+            loader: accountLoader(queryClient),
+          },
+        ],
       },
     ],
   },

frontend2/src/api/compete/useCompete.ts

@@ -202,7 +202,7 @@ export const useTournamentMatchList = (
   });
 
 /**
- * For retrieving the hisotrical rating for the given team's in the given episode.
+ * For retrieving the historical rating of the given teams in the given episode.
  */
 export const useTeamsRatingHistoryList = ({
   episodeId,

frontend2/src/api/loaders/accountLoader.ts

@@ -0,0 +1,26 @@
+import type { QueryClient } from "@tanstack/react-query";
+import { CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum } from "api/_autogen";
+import { scrimmagingRecordFactory } from "api/compete/competeFactories";
+import { safeEnsureQueryData } from "api/helpers";
+import type { LoaderFunction } from "react-router-dom";
+
+export const accountLoader =
+  (queryClient: QueryClient): LoaderFunction =>
+  ({ params }) => {
+    const episodeId = params.episodeId;
+
+    if (episodeId === undefined) return null;
+
+    // User team scrimmage record
+    safeEnsureQueryData(
+      {
+        episodeId,
+        scrimmageType:
+          CompeteMatchScrimmagingRecordRetrieveScrimmageTypeEnum.All,
+      },
+      scrimmagingRecordFactory,
+      queryClient,
+    );
+
+    return null;
+  };

frontend2/src/api/user/useUser.ts

@@ -101,8 +101,6 @@ export const useTeamsByUser = ({
   Error
 > =>
   useQuery({
-    // queryKey: userQueryKeys.otherTeams({ id }),
-    // queryFn: async () => await getTeamsByUser({ id }),
     queryKey: buildKey(otherUserTeamsFactory.queryKey, { id }),
     queryFn: async () => await otherUserTeamsFactory.queryFn({ id }),
   });

frontend2/src/components/Header.tsx

@@ -93,7 +93,7 @@ const Header: React.FC = () => {
                   <span className="sr-only">Open user menu</span>
                   <img
                     className="h-8 w-8 rounded-full bg-white"
-                    src={user?.profile?.avatar_url}
+                    src={user.data?.profile?.avatar_url}
                     alt="Profile Picture"
                   />
                 </Menu.Button>

frontend2/src/components/compete/chart/ChartBase.tsx

@@ -16,6 +16,7 @@ export interface ChartBaseProps {
   loading?: boolean;
   loadingMessage?: string;
   plotLines?: PlotLine[];
+  crownTop?: boolean;
 }
 
 const ChartBase: React.FC<ChartBaseProps> = ({
@@ -24,6 +25,7 @@ const ChartBase: React.FC<ChartBaseProps> = ({
   loading = false,
   loadingMessage,
   plotLines,
+  crownTop = false,
 }) => {
   // Translate values into Highcharts compatible options
   const [myChart, setChart] = useState<Highcharts.Chart>();
@@ -115,7 +117,8 @@ const ChartBase: React.FC<ChartBaseProps> = ({
           );
         });
 
-        if (index !== -1) names[index + 1] = "👑 " + names[index + 1];
+        if (index !== -1 && crownTop)
+          names[index + 1] = "👑 " + names[index + 1];
 
         return names;
       },

frontend2/src/components/compete/chart/TeamChart.tsx

@@ -40,6 +40,7 @@ const TeamChart: React.FC<TeamChartProps> = ({ teamIds, loading = false }) => {
       loading={loading || teamRatingHistories.isLoading}
       loadingMessage="Loading rating data..."
       plotLines={tournamentData}
+      crownTop={true}
     />
   );
 };

frontend2/src/components/compete/chart/UserChart.tsx

@@ -11,8 +11,13 @@ import {
   type PlotLine,
   type ChartData,
 } from "./chartUtils";
+import { useTeamsByUser } from "api/user/useUser";
 
-const UserChart: React.FC = () => {
+interface UserChartProps {
+  userId: number;
+}
+
+const UserChart: React.FC<UserChartProps> = ({ userId }) => {
   const { episodeId } = useEpisodeId();
   const queryClient = useQueryClient();
 
@@ -23,6 +28,7 @@ const UserChart: React.FC = () => {
     { episodeId: selectedEpisode },
     queryClient,
   );
+  const teamList = useTeamsByUser({ id: userId });
   const ratingHistory = useUserRatingHistoryList({
     episodeId: selectedEpisode,
   });
@@ -37,11 +43,24 @@ const UserChart: React.FC = () => {
     return formatTournamentList(tournamentList.data.results ?? []);
   }, [tournamentList]);
 
+  const teamListMap = useMemo(
+    () => new Map(Object.entries(teamList.data ?? {})),
+    [teamList],
+  );
+
+  const episodeListFiltered = useMemo(
+    () =>
+      (episodeList.data?.results ?? []).filter((ep) =>
+        teamListMap.has(ep.name_short),
+      ),
+    [episodeList],
+  );
+
   return (
     <div className="flex flex-1 flex-col gap-8">
       <SelectMenu
         options={
-          episodeList.data?.results?.map((ep) => ({
+          episodeListFiltered.map((ep) => ({
             value: ep.name_short,
             label: ep.name_long,
           })) ?? []
@@ -52,12 +71,22 @@ const UserChart: React.FC = () => {
         loading={tournamentList.isLoading}
       />
 
+      {(episodeList.isLoading || teamList.isLoading) && (
+        <span className="text-center text-xl italic">Loading team...</span>
+      )}
+      {episodeList.isSuccess && teamList.isSuccess && (
+        <span className="text-center text-xl font-semibold">
+          {teamListMap.get(selectedEpisode)?.name ?? "ERROR"}
+        </span>
+      )}
+
       <ChartBase
         yAxisLabel="Rating"
         values={ratingData}
         loading={ratingHistory.isLoading}
         loadingMessage="Loading rating data..."
         plotLines={tournamentData}
+        crownTop={false}
       />
     </div>
   );

frontend2/src/components/team/MemberList.tsx

@@ -41,13 +41,12 @@ const MemberList: React.FC<MemberListProps> = ({ members, className = "" }) => {
   return (
     <div className={`flex flex-col gap-6 ${className}`}>
       {/* display current user first */}
-      {currentUser !== undefined &&
-        members.find((user) => user.id === currentUser.id) !== undefined && (
-          <UserRow isCurrentUser user={currentUser} />
-        )}
+      {currentUser.isSuccess &&
+        members.find((user) => user.id === currentUser.data.id) !==
+          undefined && <UserRow isCurrentUser user={currentUser.data} />}
       {members.map(
         (member) =>
-          member.id !== currentUser?.id && (
+          member.id !== currentUser.data?.id && (
             <UserRow key={member.id} user={member} />
           ),
       )}

frontend2/src/contexts/CurrentUserContext.ts

@@ -1,5 +1,6 @@
 import { createContext, useContext } from "react";
 import { type UserPrivate } from "../api/_autogen";
+import { type UseQueryResult } from "@tanstack/react-query";
 
 export enum AuthStateEnum {
   LOADING = "loading",
@@ -11,7 +12,7 @@ export type AuthState = `${AuthStateEnum}`;
 
 interface CurrentUserContextType {
   authState: AuthState;
-  user?: UserPrivate;
+  user: UseQueryResult<UserPrivate, Error>;
 }
 
 export const CurrentUserContext = createContext<CurrentUserContextType | null>(

frontend2/src/contexts/CurrentUserProvider.tsx

@@ -19,7 +19,7 @@ export const CurrentUserProvider: React.FC<{ children: React.ReactNode }> = ({
   const userData = useCurrentUserInfo();
 
   return (
-    <CurrentUserContext.Provider value={{ authState, user: userData.data }}>
+    <CurrentUserContext.Provider value={{ authState, user: userData }}>
       {children}
     </CurrentUserContext.Provider>
   );

frontend2/src/views/Account.tsx

@@ -31,14 +31,15 @@ interface FileInput {
   file: FileList;
 }
 
-// TODO: create account loader!
 const Account: React.FC = () => {
   const { episodeId } = useEpisodeId();
   const queryClient = useQueryClient();
+
   const uploadAvatar = useUpdateUserAvatar({ episodeId }, queryClient);
   const uploadResume = useResumeUpload({ episodeId }, queryClient);
   const downloadResume = useDownloadResume({ episodeId });
-  const { user } = useCurrentUser();
+
+  const { user: userData } = useCurrentUser();
 
   const { register: avatarRegister, handleSubmit: handleAvatarSubmit } =
     useForm<FileInput>();
@@ -106,14 +107,14 @@ const Account: React.FC = () => {
                   loading={uploadResume.isPending}
                   disabled={uploadResume.isPending}
                 />
-                {user?.profile?.has_resume ?? false ? (
+                {userData.data?.profile?.has_resume ?? false ? (
                   <p className="text-sm">
                     Resume uploaded!{" "}
                     <button
                       className="text-cyan-600 hover:underline"
                       onClick={() => {
-                        if (user !== undefined)
-                          downloadResume.mutate({ id: user.id });
+                        if (userData.isSuccess)
+                          downloadResume.mutate({ id: userData.data.id });
                       }}
                     >
                       Download
@@ -128,7 +129,7 @@ const Account: React.FC = () => {
         </div>
 
         <SectionCard title="Rating History" className="w-full flex-1">
-          <UserChart />
+          {userData.isSuccess && <UserChart userId={userData.data.id} />}
         </SectionCard>
       </div>
     </div>
@@ -139,7 +140,7 @@ const ProfileForm: React.FC<{
   episodeId: string;
   queryClient: QueryClient;
 }> = ({ episodeId, queryClient }) => {
-  const { user } = useCurrentUser();
+  const { user: userData } = useCurrentUser();
   const updateCurrentUser = useUpdateCurrentUserInfo(
     { episodeId },
     queryClient,
@@ -153,24 +154,24 @@ const ProfileForm: React.FC<{
     formState: { errors },
   } = useForm<PatchedUserPrivateRequest>({
     defaultValues: {
-      email: user?.email,
-      first_name: user?.first_name,
-      last_name: user?.last_name,
+      email: userData.data?.email,
+      first_name: userData.data?.first_name,
+      last_name: userData.data?.last_name,
       profile: {
-        school: user?.profile?.school,
-        kerberos: user?.profile?.kerberos,
-        biography: user?.profile?.biography,
+        school: userData.data?.profile?.school,
+        kerberos: userData.data?.profile?.kerberos,
+        biography: userData.data?.profile?.biography,
       },
     },
   });
 
   const watchFirstName = watch("first_name");
   const watchLastName = watch("last_name");
   const [gender, setGender] = useState<Maybe<GenderEnum>>(
-    user?.profile?.gender,
+    userData.data?.profile?.gender,
   );
   const [country, setCountry] = useState<Maybe<CountryEnum>>(
-    user?.profile?.country,
+    userData.data?.profile?.country,
   );
 
   const onProfileSubmit: SubmitHandler<PatchedUserPrivateRequest> = (data) => {
@@ -183,7 +184,7 @@ const ProfileForm: React.FC<{
         <div className="flex flex-col items-center gap-6 p-4">
           <img
             className="h-24 w-24 rounded-full bg-gray-400 lg:h-48 lg:w-48"
-            src={user?.profile?.avatar_url}
+            src={userData.data?.profile?.avatar_url}
           />
           <div className="text-center text-xl font-semibold">
             {`${watchFirstName ?? ""} ${watchLastName ?? ""}`}
@@ -196,7 +197,7 @@ const ProfileForm: React.FC<{
           className="flex flex-1 flex-col gap-4"
         >
           <div className="grid grid-cols-2 gap-5">
-            <Input disabled label="Username" value={user?.username} />
+            <Input disabled label="Username" value={userData.data?.username} />
             <Input
               required
               label="Email"

frontend2/src/views/MyTeam.tsx

@@ -22,6 +22,7 @@ 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";
+import TeamChart from "components/compete/chart/TeamChart";
 
 interface InfoFormInput {
   quote: string;
@@ -159,32 +160,44 @@ const MyTeam: React.FC = () => {
           <SectionCard className="shrink xl:hidden" title="Members">
             {membersList}
           </SectionCard>
+          <EligibilitySettings />
+          <ScrimmageSettings />
           <SectionCard className="shrink xl:hidden" title="File Upload">
             <TeamAvatar />
           </SectionCard>
-
           <SectionCard className="shrink xl:hidden" title="Scrimmaging Record">
             <ScrimmagingRecord
               team={teamData.data}
               hideTeamName={true}
               hideAllScrimmages={true}
             />
           </SectionCard>
-          <EligibilitySettings />
-          <ScrimmageSettings />
+          <SectionCard className="shrink xl:hidden" title="Scrimmaging Record">
+            <ScrimmagingRecord
+              team={teamData.data}
+              hideTeamName={true}
+              hideAllScrimmages={true}
+            />
+          </SectionCard>
         </div>
         {/* 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="File Upload">
+            <TeamAvatar />
+          </SectionCard>
           <SectionCard title="Scrimmaging Record">
             <ScrimmagingRecord
               team={teamData.data}
               hideTeamName={true}
               hideAllScrimmages={true}
             />
           </SectionCard>
-          <SectionCard title="File Upload">
-            <TeamAvatar />
+          <SectionCard title="Rating History">
+            <TeamChart
+              teamIds={teamData.isSuccess ? [teamData.data.id] : []}
+              loading={teamData.isLoading}
+            />
           </SectionCard>
         </div>
       </div>