Live next competitor page

next-frontend/src/app/(wca)/competitions/[competitionId]/competitors/page.tsx

@@ -1,11 +1,34 @@
 import TabCompetitors from "@/components/competitions/TabCompetitors";
+import { getCompetitionInfo } from "@/lib/wca/competitions/getCompetitionInfo";
+import { hasPassed } from "@/lib/wca/dates";
+import OpenapiError from "@/components/ui/openapiError";
+import { getT } from "@/lib/i18n/get18n";
 
-export default async function Events({
+export default async function Competitors({
   params,
 }: {
   params: Promise<{ competitionId: string }>;
 }) {
   const { competitionId } = await params;
+  const { t } = await getT();
 
-  return <TabCompetitors id={competitionId} />;
+  const {
+    data: competitionInfo,
+    error,
+    response,
+  } = await getCompetitionInfo(competitionId);
+
+  if (error) {
+    return <OpenapiError response={response} t={t} />;
+  }
+
+  return (
+    <TabCompetitors
+      id={competitionId}
+      isLive={
+        hasPassed(competitionInfo.start_date) &&
+        !hasPassed(competitionInfo.end_date)
+      }
+    />
+  );
 }

next-frontend/src/components/competitions/CompetitorTable.tsx

@@ -11,11 +11,15 @@ export default function CompetitorTable({
   registrations,
   t,
   setPsychSheetEvent,
+  linkToLive = false,
+  competitionId,
 }: {
   eventIds: string[];
   registrations: components["schemas"]["RegistrationDataV2"][];
   setPsychSheetEvent: (eventId: string) => void;
   t: TFunction;
+  linkToLive?: boolean;
+  competitionId: string;
 }) {
   return (
     <Table.Root width="100%">
@@ -41,20 +45,37 @@ export default function CompetitorTable({
           .toSorted((a, b) => a.user.name.localeCompare(b.user.name))
           .map((registration) => (
             <Table.Row key={registration.id}>
-              <Table.Cell>
-                {registration.user.wca_id ? (
+              {linkToLive ? (
+                <Table.Cell>
                   <Link
                     href={route({
-                      pathname: "/persons/[wcaId]",
-                      query: { wcaId: registration.user.wca_id },
+                      pathname:
+                        "/competitions/[competitionId]/live/competitors/[registrationId]",
+                      query: {
+                        registrationId: registration.id.toString(),
+                        competitionId: competitionId,
+                      },
                     })}
                   >
                     <Text fontWeight="medium">{registration.user.name}</Text>
                   </Link>
-                ) : (
-                  <Text fontWeight="medium">{registration.user.name}</Text>
-                )}
-              </Table.Cell>
+                </Table.Cell>
+              ) : (
+                <Table.Cell>
+                  {registration.user.wca_id ? (
+                    <Link
+                      href={route({
+                        pathname: "/persons/[wcaId]",
+                        query: { wcaId: registration.user.wca_id },
+                      })}
+                    >
+                      <Text fontWeight="medium">{registration.user.name}</Text>
+                    </Link>
+                  ) : (
+                    <Text fontWeight="medium">{registration.user.name}</Text>
+                  )}
+                </Table.Cell>
+              )}
               <Table.Cell>
                 <HStack>
                   <Icon asChild size="sm">

next-frontend/src/components/competitions/TabCompetitors.tsx

@@ -1,17 +1,19 @@
 "use client";
 import React, { useMemo, useState } from "react";
-import { Card, Text, Center, Spinner, Table } from "@chakra-ui/react";
+import { Card, Text, Table } from "@chakra-ui/react";
 import useAPI from "@/lib/wca/useAPI";
 import { useT } from "@/lib/i18n/useI18n";
 import CompetitorTable from "@/components/competitions/CompetitorTable";
 import PsychsheetTable from "@/components/competitions/PsychsheetTable";
 import { FormEventSelector } from "@/components/EventSelector";
+import Loading from "@/components/ui/loading";
 
 interface CompetitorData {
   id: string;
+  isLive?: boolean;
 }
 
-const TabCompetitors: React.FC<CompetitorData> = ({ id }) => {
+const TabCompetitors: React.FC<CompetitorData> = ({ id, isLive = false }) => {
   const [psychSheetEvent, setPsychSheetEvent] = useState<string | null>(null);
   const [sortBy, setSortBy] = useState<string>("average");
 
@@ -51,11 +53,7 @@ const TabCompetitors: React.FC<CompetitorData> = ({ id }) => {
   }, [registrationsQuery]);
 
   if (isFetching || isFetchingPsychsheets) {
-    return (
-      <Center py={10}>
-        <Spinner size="xl" />
-      </Center>
-    );
+    return <Loading />;
   }
 
   if (!registrationsQuery) {
@@ -92,6 +90,8 @@ const TabCompetitors: React.FC<CompetitorData> = ({ id }) => {
               registrations={registrationsQuery}
               setPsychSheetEvent={setPsychSheetEvent}
               t={t}
+              linkToLive={isLive}
+              competitionId={id}
             />
           )}
         </Table.ScrollArea>