Fix Frontend Tests (#319)

* correctly save and display guests * Correctly disable the button if no comment is set and show placeholder * Don't disable the register button if you are an organizer * safe access user id * fix rubocop * fix update competing lane * safe access of user * don't show error message if not logged in * don't show error message if not logged in * set user to null explicitly if not logged in * combing permission messages * Don't show Delete Registration button if you are not allowed to * switch to column parameters * rubocop changes * Only show delete registration button if registration is open * Don't allow whitespace comments * Don't show update button after event change deadline * Show Re-Register button if registration status is cancelled * Handle cases where no event_change_deadline is set * Don't show update event button when deadline has passed for admins * fix typo when updating events as an admin * fix eslint * fix rubocop * move guests out of competing lane in factory * fix typo * fix typo * remove include and better control flow for reset method * new token route * localstack 3.0 fixes * fix event_details being accessed wrong * don't fetch user info if there are no registrations * switch get_stripe_config to GET * add whitespace: break to competition ui * distinguish betwenn Closed and Not Yet Open * show message when Registration edit deadline has passed * rename time cutoff to cutoff
thewca · Nov 28, 2023 · 53d6505 · 53d6505
1 parent ad610a4
commit 53d6505
Show file tree

Hide file tree

Showing 20 changed files with 266 additions and 163 deletions.
diff --git a/Frontend/src/api/helper/routes.ts b/Frontend/src/api/helper/routes.ts
@@ -1,6 +1,7 @@
-export const tokenRoute = `${process.env.WCA_URL}/api/v0/users/token`
+export const tokenRoute = `${process.env.WCA_URL}/api/v0/users/me/token`
 export const permissionsRoute = `${process.env.WCA_URL}/api/v0/users/me/permissions`
-export const paymentConfigRoute = `${process.env.WCA_URL}/payment/config`
+export const paymentConfigRoute = (competitionId: string, paymentId: string) =>
+  `${process.env.WCA_URL}/payment/config?competition_id=${competitionId}&payment_id=${paymentId}`
 export const paymentFinishRoute = (competitionId: string, userId: string) =>
   `${process.env.WCA_URL}/payment/finish?attendee_id=${competitionId}-${userId}`
 

diff --git a/Frontend/src/api/payment/get/get_stripe_config.ts b/Frontend/src/api/payment/get/get_stripe_config.ts
@@ -11,12 +11,5 @@ export default async function getStripeConfig(
   competitionId: string,
   paymentId: string
 ): Promise<StripeConfig> {
-  return externalServiceFetch(paymentConfigRoute, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      competition_id: competitionId,
-      payment_id: paymentId,
-    }),
-  })
+  return externalServiceFetch(paymentConfigRoute(competitionId, paymentId))
 }
diff --git a/Frontend/src/api/registration/get/get_registrations.ts b/Frontend/src/api/registration/get/get_registrations.ts
@@ -25,13 +25,16 @@ export async function getConfirmedRegistrations(
   if (!response.ok) {
     throw new BackendError(500, response.status)
   }
-  const userInfos = await getCompetitorsInfo(data!.map((d) => d.user_id))
-  return data!.map((registration) => ({
-    ...registration,
-    user: userInfos.users.find(
-      (user) => user.id === Number(registration.user_id)
-    ),
-  }))
+  if (data!.length > 0) {
+    const userInfos = await getCompetitorsInfo(data!.map((d) => d.user_id))
+    return data!.map((registration) => ({
+      ...registration,
+      user: userInfos.users.find(
+        (user) => user.id === Number(registration.user_id)
+      ),
+    }))
+  }
+  return []
 }
 
 export async function getAllRegistrations(

diff --git a/Frontend/src/pages/home/index.jsx b/Frontend/src/pages/home/index.jsx
@@ -42,42 +42,54 @@ export default function HomePage() {
       <Segment padded attached>
         <Grid>
           <Grid.Column width={3}>
-            <Header>Date</Header>
-            <Header>City</Header>
-            <Header>Venue</Header>
-            <Header color="grey">Address</Header>
+            <Header className={styles.informationHeader}>Date</Header>
+            <Header className={styles.informationHeader}>City</Header>
+            <Header className={styles.informationHeader}>Venue</Header>
+            <Header className={styles.informationHeader} color="grey">
+              Address
+            </Header>
             {competitionInfo.venue_details && (
-              <Header color="grey">Details</Header>
+              <Header className={styles.informationHeader} color="grey">
+                Details
+              </Header>
             )}
-            <Header>Competitor Limit</Header>
-            <Header>Contact</Header>
-            <Header>Organizers</Header>
-            <Header>Delegates</Header>
+            <Header className={styles.informationHeader}>
+              Competitor Limit
+            </Header>
+            <Header className={styles.informationHeader}>Contact</Header>
+            <Header className={styles.informationHeader}>Organizers</Header>
+            <Header className={styles.informationHeader}>Delegates</Header>
           </Grid.Column>
           <Grid.Column width={12}>
-            <Header>
+            <Header className={styles.informationHeader}>
               {competitionInfo.start_date === competitionInfo.end_date
                 ? `${moment(competitionInfo.start_date).format('ll')}`
                 : `${moment(competitionInfo.start_date).format(
                     'll'
                   )} to ${moment(competitionInfo.end_date).format('ll')}`}
             </Header>
-            <Header>
+            <Header className={styles.informationHeader}>
               {competitionInfo.city}, {competitionInfo.country_iso2}
             </Header>
-            <Header>
+            <Header className={styles.informationHeader}>
               <p
                 dangerouslySetInnerHTML={{
                   __html: marked(competitionInfo.venue),
                 }}
               />
             </Header>
-            <Header color="grey">{competitionInfo.venue_address}</Header>
+            <Header className={styles.informationHeader} color="grey">
+              {competitionInfo.venue_address}
+            </Header>
             {competitionInfo.venue_details && (
-              <Header color="grey">{competitionInfo.venue_details}</Header>
+              <Header className={styles.informationHeader} color="grey">
+                {competitionInfo.venue_details}
+              </Header>
             )}
-            <Header>{competitionInfo.competitor_limit}</Header>
-            <Header>
+            <Header className={styles.informationHeader}>
+              {competitionInfo.competitor_limit}
+            </Header>
+            <Header className={styles.informationHeader}>
               {competitionInfo.contact ? (
                 <span
                   dangerouslySetInnerHTML={{
@@ -92,7 +104,7 @@ export default function HomePage() {
                 </a>
               )}
             </Header>
-            <Header>
+            <Header className={styles.informationHeader}>
               {competitionInfo.organizers.map((organizer, index) => (
                 <a
                   key={`competition-organizer-${organizer.id}`}
@@ -103,7 +115,7 @@ export default function HomePage() {
                 </a>
               ))}
             </Header>
-            <Header>
+            <Header className={styles.informationHeader}>
               {competitionInfo.delegates.map((delegate, index) => (
                 <a
                   key={`competition-organizer-${delegate.id}`}
@@ -116,7 +128,7 @@ export default function HomePage() {
             </Header>
           </Grid.Column>
         </Grid>
-        <Header>
+        <Header className={styles.informationHeader}>
           <UiIcon name="print" />
           <Header.Content>
             Download all of the competitions details as a PDF{' '}

diff --git a/Frontend/src/pages/home/index.module.scss b/Frontend/src/pages/home/index.module.scss
@@ -3,4 +3,10 @@
   img{
     display: none;
   }
-}
+}
+
+.information-header{
+  @media only screen and (max-width: 600px) {
+    font-size: 1.1em !important;
+  }
+}
diff --git a/Frontend/src/pages/register/components/CompetingStep.jsx b/Frontend/src/pages/register/components/CompetingStep.jsx
@@ -52,7 +52,8 @@ export default function CompetingStep({ nextStep }) {
       setRegistration(registrationRequest.registration)
       setComment(registrationRequest.registration.competing.comment ?? '')
       setSelectedEvents(registrationRequest.registration.competing.event_ids)
-      setGuests(registrationRequest.registration.guests)
+      // Ruby sends this as "1.0"
+      setGuests(Number(registrationRequest.registration.guests))
     }
   }, [registrationRequest])
   const { mutate: updateRegistrationMutation, isLoading: isUpdating } =
@@ -189,12 +190,17 @@ export default function CompetingStep({ nextStep }) {
           </div>
           <div className={styles.commentWrapper}>
             <TextArea
-              maxLength={180}
+              maxLength={240}
               onChange={(_, data) => setComment(data.value)}
               value={comment}
+              placeholder={
+                competitionInfo.force_comment_in_registration
+                  ? 'A comment is required. Read the Registration Requirements to find out why.'
+                  : ''
+              }
               id="comment"
             />
-            <div className={styles.commentCounter}>{comment.length}/180</div>
+            <div className={styles.commentCounter}>{comment.length}/240</div>
           </div>
         </div>
         <div className={styles.registrationRow}>
@@ -243,45 +249,80 @@ export default function CompetingStep({ nextStep }) {
                   }
                 />
               </div>
-              <Button
-                disabled={
-                  isUpdating ||
-                  (competitionInfo.force_comment_in_registration &&
-                    comment === '') ||
-                  !canUpdateRegistration
-                }
-                color="blue"
-                onClick={() => {
-                  setMessage('Registration is being updated', 'basic')
-                  updateRegistrationMutation({
-                    user_id: registration.user_id,
-                    competition_id: competitionInfo.id,
-                    competing: {
-                      comment,
-                      guests,
-                      event_ids: selectedEvents,
-                    },
-                  })
-                }}
-              >
-                Update Registration
-              </Button>
-              <Button
-                disabled={isUpdating}
-                negative
-                onClick={() => {
-                  setMessage('Registration is being deleted', 'basic')
-                  updateRegistrationMutation({
-                    user_id: registration.user_id,
-                    competition_id: competitionInfo.id,
-                    competing: {
-                      status: 'cancelled',
-                    },
-                  })
-                }}
-              >
-                Delete Registration
-              </Button>
+              {moment(
+                // If no deadline is set default to always be in the future
+                competitionInfo.event_change_deadline_date ?? Date.now() + 1
+              ).isAfter() &&
+                registration.competing.registration_status !== 'cancelled' && (
+                  <Button
+                    disabled={
+                      isUpdating ||
+                      !competitionInfo.allow_registration_edits ||
+                      (competitionInfo.force_comment_in_registration &&
+                        comment.trim() === '')
+                    }
+                    color="blue"
+                    onClick={() => {
+                      setMessage('Registration is being updated', 'basic')
+                      updateRegistrationMutation({
+                        user_id: registration.user_id,
+                        competition_id: competitionInfo.id,
+                        competing: {
+                          comment,
+                          guests,
+                          event_ids: selectedEvents,
+                        },
+                      })
+                    }}
+                  >
+                    Update Registration
+                  </Button>
+                )}
+              {registration.competing.registration_status === 'cancelled' && (
+                <Button
+                  disabled={
+                    isUpdating ||
+                    (competitionInfo.force_comment_in_registration &&
+                      comment.trim() === '')
+                  }
+                  color="blue"
+                  onClick={() => {
+                    setMessage('Registration is being updated', 'basic')
+                    updateRegistrationMutation({
+                      user_id: registration.user_id,
+                      competition_id: competitionInfo.id,
+                      competing: {
+                        comment,
+                        guests,
+                        event_ids: selectedEvents,
+                        status: 'pending',
+                      },
+                    })
+                  }}
+                >
+                  Re-Register
+                </Button>
+              )}
+              {competitionInfo.allow_registration_self_delete_after_acceptance &&
+                competitionInfo['registration_opened?'] &&
+                registration.competing.registration_status !== 'cancelled' && (
+                  <Button
+                    disabled={isUpdating}
+                    negative
+                    onClick={() => {
+                      setMessage('Registration is being deleted', 'basic')
+                      updateRegistrationMutation({
+                        user_id: registration.user_id,
+                        competition_id: competitionInfo.id,
+                        competing: {
+                          status: 'cancelled',
+                        },
+                      })
+                    }}
+                  >
+                    Delete Registration
+                  </Button>
+                )}
             </div>
           ) : (
             <div className={styles.registrationButtonWrapper}>
@@ -303,7 +344,7 @@ export default function CompetingStep({ nextStep }) {
                   isCreating ||
                   selectedEvents.length === 0 ||
                   (competitionInfo.force_comment_in_registration &&
-                    comment === '')
+                    comment.trim() === '')
                 }
                 onClick={async () => {
                   setMessage('Registration is being processed', 'basic')

diff --git a/Frontend/src/pages/register/index.jsx b/Frontend/src/pages/register/index.jsx
@@ -19,22 +19,18 @@ export default function Register() {
       <div>
         <RegistrationRequirements />
       </div>
-      {!loggedIn ? (
-        <PermissionMessage>
-          You need to log in to Register for a competition
-        </PermissionMessage>
-      ) : // eslint-disable-next-line unicorn/no-nested-ternary
-      competitionInfo['registration_opened?'] ||
-        competitionInfo.organizers
-          .concat(competitionInfo.delegates)
-          .find((u) => u.id === user.id) ? (
+      {competitionInfo['registration_opened?'] ||
+      competitionInfo.organizers
+        .concat(competitionInfo.delegates)
+        .find((u) => u.id === user?.id) ? (
         <div>
           {canAttendCompetition ? (
             <StepPanel />
           ) : (
             <PermissionMessage>
-              You are not allowed to Register for a competition, make sure your
-              profile is complete and you are not banned
+              {loggedIn
+                ? 'You are not allowed to Register for a competition, make sure your profile is complete and you are not banned.'
+                : 'You need to log in to Register for a competition.'}
             </PermissionMessage>
           )}
         </div>
@@ -49,7 +45,9 @@ export default function Register() {
                   competitionInfo.registration_open
                 ).fromNow()} on ${moment(
                   competitionInfo.registration_open
-                ).format('lll')}`}
+                ).format('lll')}, ${
+                  !loggedIn ? 'you will need a WCA Account to register' : ''
+                }`}
           </Message>
         </div>
       )}