rename MatchProfile to MatchDetails, stop click events from ScrimHistoryTable links from opening MatchDetails

Author: Vincent Zheng

frontend/src/App.tsx

@@ -60,8 +60,8 @@ import CodeOfConduct from "views/CodeOfConduct";
 import Client from "views/Client";
 import AdminTournament from "views/AdminTournament";
 import { adminTournamentLoader } from "api/loaders/adminTournamentLoader";
-import MatchProfile from "views/MatchProfile";
-import { matchProfileLoader } from "api/loaders/matchProfileLoader";
+import { matchDetailsLoader } from "api/loaders/matchDetailsLoader";
+import MatchDetails from "views/MatchDetails";
 
 const queryClient = new QueryClient({
   queryCache: new QueryCache({
@@ -182,8 +182,8 @@ const router = createBrowserRouter([
           },
           {
             path: "match/:matchId",
-            element: <MatchProfile />,
-            loader: matchProfileLoader(queryClient),
+            element: <MatchDetails />,
+            loader: matchDetailsLoader(queryClient),
           },
         ],
       },

frontend/src/api/_autogen/models/Submission.ts

@@ -1,11 +1,11 @@
 /* tslint:disable */
 /* eslint-disable */
 /**
- * 
+ *
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
  * The version of the OpenAPI document: 0.0.0
- * 
+ *
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
  * https://openapi-generator.tech
@@ -21,79 +21,79 @@ import {
 } from './StatusBccEnum';
 
 /**
- * 
+ *
  * @export
  * @interface Submission
  */
 export interface Submission {
     /**
-     * 
+     *
      * @type {number}
      * @memberof Submission
      */
     readonly id: number;
     /**
-     * 
+     *
      * @type {StatusBccEnum}
      * @memberof Submission
      */
     readonly status: StatusBccEnum;
     /**
-     * 
+     *
      * @type {string}
      * @memberof Submission
      */
     readonly logs: string;
     /**
-     * 
+     *
      * @type {string}
      * @memberof Submission
      */
     readonly episode: string;
     /**
-     * 
+     *
      * @type {number}
      * @memberof Submission
      */
     readonly team: number;
     /**
-     * 
+     *
      * @type {string}
      * @memberof Submission
      */
     readonly teamname: string;
     /**
-     * 
+     *
      * @type {number}
      * @memberof Submission
      */
     readonly user: number;
     /**
-     * 
+     *
      * @type {string}
      * @memberof Submission
      */
     readonly username: string;
     /**
-     * 
+     *
      * @type {Date}
      * @memberof Submission
      */
     readonly created: Date;
     /**
-     * 
+     *
      * @type {boolean}
      * @memberof Submission
      */
     readonly accepted: boolean;
     /**
-     * 
+     *
      * @type {string}
      * @memberof Submission
      */
     _package?: string;
     /**
-     * 
+     *
      * @type {string}
      * @memberof Submission
      */
@@ -128,7 +128,7 @@ export function SubmissionFromJSONTyped(json: any, ignoreDiscriminator: boolean)
         return json;
     }
     return {
-        
+
         'id': json['id'],
         'status': StatusBccEnumFromJSON(json['status']),
         'logs': json['logs'],
@@ -152,9 +152,8 @@ export function SubmissionToJSON(value?: Submission | null): any {
         return null;
     }
     return {
-        
+
         'package': value._package,
         'description': value.description,
     };
 }
-

…nd/src/api/loaders/matchProfileLoader.ts …nd/src/api/loaders/matchDetailsLoader.tsfrontend/src/api/loaders/matchProfileLoader.ts renamed to frontend/src/api/loaders/matchDetailsLoader.ts frontend/src/api/loaders/matchProfileLoader.ts renamed to frontend/src/api/loaders/matchDetailsLoader.ts

@@ -4,7 +4,7 @@ import { safeEnsureQueryData } from "api/helpers";
 import type { LoaderFunction } from "react-router-dom";
 import { isPresent } from "utils/utilTypes";
 
-export const matchProfileLoader =
+export const matchDetailsLoader =
   (queryClient: QueryClient): LoaderFunction =>
   ({ params }) => {
     const { episodeId, id } = params;

frontend/src/api/team/useTeam.ts

@@ -35,7 +35,7 @@ import {
 import { buildKey } from "../helpers";
 import { userRatingHistoryFactory } from "api/compete/competeFactories";
 import { competeQueryKeys } from "api/compete/competeKeys";
-import { MILLIS_SECOND } from "utils/utilTypes";
+import { type Maybe, MILLIS_SECOND } from "utils/utilTypes";
 
 // ---------- QUERY HOOKS ---------- //
 const SEARCH_WAIT_SECONDS = 30;
@@ -129,14 +129,17 @@ export const useCreateTeam = (
 export const useJoinTeam = (
   { episodeId }: { episodeId: string },
   queryClient: QueryClient,
-): UseMutationResult<void, Error, TeamJoinRequest> =>
-  useMutation({
+): UseMutationResult<void, Error, TeamJoinRequest> => {
+  let err: Maybe<string> = undefined;
+  const getErr = (): string => err ?? "Error joining team.";
+
+  return useMutation({
     mutationKey: teamMutationKeys.join({ episodeId }),
     mutationFn: async (teamJoinRequest: TeamJoinRequest) => {
       await toast.promise(joinTeam({ episodeId, teamJoinRequest }), {
         loading: "Joining team...",
         success: "Joined team!",
-        error: "Error joining team.",
+        error: getErr,
       });
     },
     onSuccess: async () => {
@@ -153,7 +156,12 @@ export const useJoinTeam = (
         queryKey: competeQueryKeys.scrimBase.key({ episodeId }),
       });
     },
+    onError: (error) => {
+      err = `${error.name}: ${error.message}`;
+      console.log(err);
+    },
   });
+};
 
 /**
  * Leave the user's current team in a given episode.

frontend/src/components/MatchReplayButton.tsx

@@ -32,10 +32,11 @@ const MatchReplayButton: React.FC<MatchReplayButtonProps> = ({
     <Button
       disabled={disabled || !isPresent(clientUrl)}
       label="Replay!"
-      onClick={() => {
+      onClick={(e) => {
         if (isPresent(clientUrl)) {
           window.open(clientUrl);
         }
+        e.stopPropagation();
       }}
     />
   );

frontend/src/components/compete/TeamWithRating.tsx

@@ -52,7 +52,13 @@ const TeamWithRating: React.FC<TeamWithRatingProps> = ({
 
   return (
     <>
-      <NavLink to={`/${episodeId}/team/${teamId}`} className="hover:underline">
+      <NavLink
+        to={`/${episodeId}/team/${teamId}`}
+        className="hover:underline"
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
         {includeTeamName && <span>{teamName}</span>}
         {ratingComponent}
       </NavLink>

frontend/src/views/MatchProfile.tsx frontend/src/views/MatchDetails.tsxfrontend/src/views/MatchProfile.tsx renamed to frontend/src/views/MatchDetails.tsx

@@ -2,47 +2,63 @@ import type React from "react";
 
 import { NavLink, useParams } from "react-router-dom";
 
-import { useMatchInfo, useSubmissionInfo } from "api/compete/useCompete";
+import { useMatchInfo } from "api/compete/useCompete";
 import { useEpisodeId } from "contexts/EpisodeContext";
 
 import { PageTitle } from "components/elements/BattlecodeStyle";
 import SectionCard from "components/SectionCard";
 
-import type { Submission } from "api/_autogen";
+import type { Match, TeamPrivate } from "api/_autogen";
 import { useUserTeam } from "api/team/useTeam";
 import { isPresent } from "utils/utilTypes";
 import PageNotFound from "./PageNotFound";
-import type { UseQueryResult } from "@tanstack/react-query";
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
 import { dateTime } from "utils/dateTime";
+import { buildKey } from "api/helpers";
+import { submissionInfoFactory } from "api/compete/competeFactories";
 
-const MatchProfile: React.FC = () => {
+const MatchDetails: React.FC = () => {
   const { episodeId } = useEpisodeId();
   const { matchId } = useParams();
   const teamData = useUserTeam({ episodeId });
   const match = useMatchInfo({ episodeId, id: matchId ?? "" });
 
-  const getUserSubmission = (): UseQueryResult<Submission> | undefined => {
-    if (!isPresent(match.data?.participants) || !isPresent(teamData.data))
-      return undefined;
+  const getUserSubmissionId = (
+    match: UseQueryResult<Match>,
+    team: UseQueryResult<TeamPrivate>,
+  ): string => {
+    if (!isPresent(match.data?.participants) || !isPresent(team.data))
+      return "";
 
-    const id = match.data?.participants
-      .find((participant) => participant.team === teamData.data?.id)
-      ?.submission.toString();
-
-    if (!isPresent(id)) return undefined;
-
-    return useSubmissionInfo({ episodeId, id });
+    return (
+      match.data?.participants
+        .find((participant) => participant.team === team.data?.id)
+        ?.submission.toString() ?? ""
+    );
   };
 
-  const submission = getUserSubmission();
+  const id = getUserSubmissionId(match, teamData);
+
+  const submission = useQuery({
+    queryKey: buildKey(submissionInfoFactory.queryKey, {
+      episodeId,
+      id,
+    }),
+    queryFn: async () =>
+      await submissionInfoFactory.queryFn({
+        episodeId,
+        id,
+      }),
+    enabled: id.length !== 0,
+  });
 
   if (match.isError) {
     return <PageNotFound />;
   }
 
   return (
     <div className="p-6">
-      <PageTitle>Match Profile</PageTitle>
+      <PageTitle>Match Details</PageTitle>
       <div className="flex h-full w-full flex-col overflow-auto">
         <SectionCard title="Submission" loading={match.isLoading}>
           {isPresent(submission) && submission.isSuccess && (
@@ -80,4 +96,4 @@ const MatchProfile: React.FC = () => {
   );
 };
 
-export default MatchProfile;
+export default MatchDetails;