Merge pull request #28 from cubing/manage-competitors-page

Finish up manage competitors page
cubing · Aug 23, 2024 · aceb89f · aceb89f
2 parents 2446810 + ce9d59d
commit aceb89f
Show file tree

Hide file tree

Showing 18 changed files with 260 additions and 256 deletions.
diff --git a/.vscode/nest-js.code-snippets b/.vscode/nest-js.code-snippets
@@ -52,5 +52,9 @@
   "Pretty JSON output": {
     "prefix": "jsonstringify",
     "body": "console.log(JSON.stringify($0, null, 2))"
+  },
+  "Use limit requests hook": {
+    "prefix": "uselimitrequests",
+    "body": "const [ limit$1Requests, isLoading$1 ] = useLimitRequests();$0"
   }
 }
diff --git a/client/app/admin/record-types/page.tsx b/client/app/admin/record-types/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { useMyFetch } from '~/helpers/customHooks';
-import RecordTypesForm from './RecordTypesForm';
+// import RecordTypesForm from './RecordTypesForm';
 import { IRecordType } from '@sh/types';
 import Loading from '@c/UI/Loading';
 
@@ -21,8 +21,8 @@ const ConfigureRecordTypesPage = () => {
     return (
       <div>
         <h2 className="mb-4 text-center">Record Types</h2>
-
-        <RecordTypesForm recordTypes={recordTypes} />
+        TEMPORARILY REMOVED
+        {/* <RecordTypesForm recordTypes={recordTypes} /> */}
       </div>
     );
   }

diff --git a/client/app/components/CreatorDetails.tsx b/client/app/components/CreatorDetails.tsx
@@ -21,12 +21,7 @@ const CreatorDetails = ({
 
   creator = creator as IFeUser;
   const username = <a href={`mailto:${creator.email}`}>{creator.username}</a>;
-  const competitor =
-    creator.person !== null ? (
-      <Competitor person={creator.person} noFlag />
-    ) : (
-      <span className="text-danger fw-bold">NOT FOUND</span>
-    );
+  const competitor = creator.person !== null ? <Competitor person={creator.person} noFlag /> : 'Not found';
 
   if (small) {
     return (

diff --git a/client/app/components/adminAndModerator/ResultsSubmissionForm.tsx b/client/app/components/adminAndModerator/ResultsSubmissionForm.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { useMyFetch } from '~/helpers/customHooks';
+import { useLimitRequests, useMyFetch } from '~/helpers/customHooks';
 import ResultForm from '@c/adminAndModerator/ResultForm';
 import Loading from '@c/UI/Loading';
 import Form from '@c/form/Form';
@@ -15,7 +15,7 @@ import { IAttempt, IEvent, IPerson, IResult, IResultsSubmissionInfo, IUpdateResu
 import { RoundFormat } from '@sh/enums';
 import { roundFormats } from '@sh/roundFormats';
 import C from '@sh/constants';
-import { getUserInfo, limitRequests } from '~/helpers/utilityFunctions';
+import { getUserInfo } from '~/helpers/utilityFunctions';
 import { IUserInfo } from '~/helpers/interfaces/UserInfo';
 import { MainContext } from '~/helpers/contexts';
 import { useCheckErrorsThenSubmit } from '~/helpers/customHooks';
@@ -32,9 +32,9 @@ const ResultsSubmissionForm = ({ resultId }: { resultId?: string }) => {
 
   const searchParams = useSearchParams();
   const myFetch = useMyFetch();
+  const [limitRecordPairsRequests, isLoadingRecordPairs] = useLimitRequests();
   const { changeSuccessMessage, loadingId } = useContext(MainContext);
   const checkErrorsThenSubmit = useCheckErrorsThenSubmit();
-  const fetchRecordPairsTimer = useRef<NodeJS.Timeout>(null);
 
   const [showRules, setShowRules] = useState(false);
   const [submissionInfo, setSubmissionInfo] = useState<IResultsSubmissionInfo>();
@@ -160,7 +160,7 @@ const ResultsSubmissionForm = ({ resultId }: { resultId?: string }) => {
 
     // Update the record pairs with the new date
     if (newDate) {
-      limitRequests(fetchRecordPairsTimer, async () => {
+      limitRecordPairsRequests(async () => {
         const eventsStr = submissionInfo.events.map((e) => e.eventId).join(',');
         const queryParams = resultId ? `?excludeResultId=${resultId}` : '';
 
@@ -307,7 +307,7 @@ const ResultsSubmissionForm = ({ resultId }: { resultId?: string }) => {
             text="Submit"
             onClick={() => submitResult()}
             loadingId={loadingId}
-            disabled={fetchRecordPairsTimer.current !== null}
+            disabled={isLoadingRecordPairs}
             className="mt-3"
           />
           {resultId && submissionInfo.result.unapproved && (
@@ -316,7 +316,7 @@ const ResultsSubmissionForm = ({ resultId }: { resultId?: string }) => {
               text="Submit and approve"
               onClick={() => submitResult(true)}
               loadingId={loadingId}
-              disabled={fetchRecordPairsTimer.current !== null}
+              disabled={isLoadingRecordPairs}
               className="btn-success mt-3 ms-3"
             />
           )}

diff --git a/client/app/components/form/FormPersonInputs.tsx b/client/app/components/form/FormPersonInputs.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { useContext, useRef, useState } from 'react';
-import { useMyFetch } from '~/helpers/customHooks';
+import { useContext, useState } from 'react';
+import { useLimitRequests, useMyFetch } from '~/helpers/customHooks';
 import Loading from '@c/UI/Loading';
 import FormTextInput from './FormTextInput';
 import Competitor from '@c/Competitor';
-import { IPerson } from '@sh/types';
+import { IWcaPersonDto, IPerson } from '@sh/types';
 import C from '@sh/constants';
-import { getUserInfo, limitRequests } from '~/helpers/utilityFunctions';
+import { getUserInfo } from '~/helpers/utilityFunctions';
 import { IUserInfo } from '~/helpers/interfaces/UserInfo';
 import { MainContext } from '~/helpers/contexts';
 
@@ -44,8 +44,8 @@ const FormPersonInputs = ({
   noGrid?: boolean;
 }) => {
   const myFetch = useMyFetch();
-  const { changeErrorMessages, resetMessagesAndLoadingId } = useContext(MainContext);
-  const fetchMatchedPersonsTimer = useRef<NodeJS.Timeout>(null);
+  const [limitMatchedPersonsRequests, isLoadingMatchedPersons] = useLimitRequests();
+  const { resetMessagesAndLoadingId } = useContext(MainContext);
 
   // The null element represents the option "add new person" and is only an option given to an admin/moderator
   const defaultMatchedPersons: IPerson[] = userInfo.isMod ? [null] : [];
@@ -61,22 +61,21 @@ const FormPersonInputs = ({
     value = value.trim();
 
     if (value) {
-      limitRequests(fetchMatchedPersonsTimer, async () => {
+      limitMatchedPersonsRequests(async () => {
         if (!C.wcaIdRegexLoose.test(value)) {
-          const { payload, errors } = await myFetch.get(`/persons?name=${value}`, { loadingId: null });
+          const { payload, errors } = await myFetch.get(`/persons?name=${value}`);
 
-          if (errors) {
-            changeErrorMessages(errors);
-          } else if (payload.length > 0) {
+          if (!errors && payload.length > 0) {
             const newMatchedPersons = [...payload.slice(0, MAX_MATCHES), ...defaultMatchedPersons];
             setMatchedPersons(newMatchedPersons);
             if (newMatchedPersons.length < personSelection) setPersonSelection(0);
           }
         } else {
-          const { payload, errors } = await myFetch.get(`/persons/${value}`, { authorize: true, loadingId: null });
+          const { payload, errors } = await myFetch.get<IWcaPersonDto>(`/persons/${value}`, {
+            authorize: true,
+          });
 
-          if (errors) changeErrorMessages(errors);
-          else setMatchedPersons([payload]);
+          if (!errors) setMatchedPersons([payload.person]);
         }
       });
     }
@@ -213,7 +212,7 @@ const FormPersonInputs = ({
           />
           {inputIndex === focusedInput && personName && (
             <ul className="position-absolute list-group" style={{ zIndex: 10 }}>
-              {fetchMatchedPersonsTimer.current !== null ? (
+              {isLoadingMatchedPersons ? (
                 <li className="list-group-item">
                   <div style={{ width: '200px' }}>
                     <Loading small />

diff --git a/client/app/mod/competition/ContestForm.tsx b/client/app/mod/competition/ContestForm.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { addHours, differenceInDays } from 'date-fns';
 import { toZonedTime, fromZonedTime } from 'date-fns-tz';
-import { useFetchWcaCompDetails, useMyFetch } from '~/helpers/customHooks';
+import { useFetchWcaCompDetails, useLimitRequests, useMyFetch } from '~/helpers/customHooks';
 import Form from '@c/form/Form';
 import FormTextInput from '@c/form/FormTextInput';
 import FormCountrySelect from '@c/form/FormCountrySelect';
@@ -56,7 +56,7 @@ import {
   roundProceedOptions,
 } from '~/helpers/multipleChoiceOptions';
 import { roundTypes } from '~/helpers/roundTypes';
-import { getContestIdFromName, getUserInfo, limitRequests } from '~/helpers/utilityFunctions';
+import { getContestIdFromName, getUserInfo } from '~/helpers/utilityFunctions';
 import { MultiChoiceOption } from '~/helpers/interfaces/MultiChoiceOption';
 import C from '@sh/constants';
 import { MainContext } from '~/helpers/contexts';
@@ -73,10 +73,10 @@ const ContestForm = ({
   mode: 'new' | 'edit' | 'copy';
 }) => {
   const myFetch = useMyFetch();
+  const [limitTimezoneRequests, isLoadingTimezone] = useLimitRequests();
   const fetchWcaCompDetails = useFetchWcaCompDetails();
   const { changeErrorMessages, changeSuccessMessage, loadingId, changeLoadingId, resetMessagesAndLoadingId } =
     useContext(MainContext);
-  const fetchTimezoneTimer = useRef<NodeJS.Timeout>(null);
 
   const [activeTab, setActiveTab] = useState('details');
   const [detailsImported, setDetailsImported] = useState(mode === 'edit' && contest?.type === ContestType.WcaComp);
@@ -458,7 +458,7 @@ const ContestForm = ({
       setLatitude(processedLatitude);
       setLongitude(processedLongitude);
 
-      limitRequests(fetchTimezoneTimer, async () => {
+      limitTimezoneRequests(async () => {
         // Adjust all times to the new time zone
         const timeZone: string = await fetchTimeZone(processedLatitude, processedLongitude);
 
@@ -811,7 +811,7 @@ const ContestForm = ({
       <Form
         buttonText={mode === 'edit' ? 'Edit Contest' : 'Create Contest'}
         onSubmit={handleSubmit}
-        disableButton={disableIfCompFinished || fetchTimezoneTimer.current !== null}
+        disableButton={disableIfCompFinished}
       >
         {isAdmin && mode === 'edit' && <CreatorDetails creator={creator} />}
 
@@ -933,7 +933,7 @@ const ContestForm = ({
                     </div>
                     <div className="row">
                       <div className="text-secondary fs-6">
-                        Time zone: {fetchTimezoneTimer.current === null ? venueTimeZone : <Loading small dontCenter />}
+                        Time zone: {isLoadingTimezone ? <Loading small dontCenter /> : venueTimeZone}
                       </div>
                     </div>
                   </div>
@@ -946,11 +946,7 @@ const ContestForm = ({
                   <FormDatePicker
                     id="start_date"
                     title={`Start date and time (${
-                      type === ContestType.Meetup
-                        ? fetchTimezoneTimer.current === null
-                          ? venueTimeZone
-                          : '...'
-                        : 'UTC'
+                      type === ContestType.Meetup ? (isLoadingTimezone ? '...' : venueTimeZone) : 'UTC'
                     })`}
                     value={startTime}
                     setValue={changeStartDate}