Registration button disabled/invalid data state (#369)

* Minor formatting * Formatting & typo correction * Extract registration update fn * Add validation check constants * Update click handler to display invalidities instead of disabling it * fix eslint --------- Co-authored-by: FinnIckler <[email protected]>
thewca · Dec 4, 2023 · f3f9a90 · f3f9a90
1 parent ed960ec
commit f3f9a90
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 19 deletions.
diff --git a/Frontend/src/pages/register/components/CompetingStep.jsx b/Frontend/src/pages/register/components/CompetingStep.jsx
@@ -328,7 +328,7 @@ export default function CompetingStep({ nextStep }) {
             <div className={styles.registrationButtonWrapper}>
               <div className={styles.registrationWarning}>
                 <Popup
-                  content="You will only be accepted if you have met all reigstration requirements"
+                  content="You will only be accepted if you have met all registration requirements"
                   position="top center"
                   trigger={
                     <span>

diff --git a/Frontend/src/pages/registration_edit/components/RegistrationEditor.jsx b/Frontend/src/pages/registration_edit/components/RegistrationEditor.jsx
@@ -1,7 +1,8 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { EventSelector } from '@thewca/wca-components'
+import _ from 'lodash'
 import moment from 'moment/moment'
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import {
   Button,
@@ -23,12 +24,14 @@ import Refunds from './Refunds'
 export default function RegistrationEditor() {
   const { user_id } = useParams()
   const { competitionInfo } = useContext(CompetitionContext)
+
   const [comment, setComment] = useState('')
   const [adminComment, setAdminComment] = useState('')
   const [status, setStatus] = useState('')
   const [selectedEvents, setSelectedEvents] = useState([])
   const [registration, setRegistration] = useState({})
   const [isCheckingRefunds, setIsCheckingRefunds] = useState(false)
+
   const queryClient = useQueryClient()
   const { data: serverRegistration } = useQuery({
     queryKey: ['registration', competitionInfo.id, user_id],
@@ -59,6 +62,7 @@ export default function RegistrationEditor() {
         )
       },
     })
+
   useEffect(() => {
     if (serverRegistration) {
       setRegistration(serverRegistration.registration)
@@ -71,6 +75,66 @@ export default function RegistrationEditor() {
     }
   }, [serverRegistration])
 
+  const hasEventsChanged =
+    serverRegistration &&
+    _.xor(serverRegistration.registration.competing.event_ids, selectedEvents)
+      .length > 0
+  const hasCommentChanged =
+    serverRegistration &&
+    comment !== (serverRegistration.registration.competing.comment ?? '')
+  const hasAdminCommentChanged =
+    serverRegistration &&
+    adminComment !==
+      (serverRegistration.registration.competing.admin_comment ?? '')
+  const hasStatusChanged =
+    serverRegistration &&
+    status !== serverRegistration.registration.competing.registration_status
+  const hasGuestsChanged = false
+
+  const hasChanges =
+    hasEventsChanged ||
+    hasCommentChanged ||
+    hasAdminCommentChanged ||
+    hasStatusChanged ||
+    hasGuestsChanged
+
+  const commentIsValid =
+    comment || !competitionInfo.force_comment_in_registration
+  const eventsAreValid = selectedEvents.length > 0
+
+  const handleRegisterClick = useCallback(() => {
+    if (!hasChanges) {
+      setMessage('There are no changes', 'basic')
+    } else if (!commentIsValid) {
+      setMessage('You must include a comment', 'basic')
+    } else if (!eventsAreValid) {
+      setMessage('You must select at least 1 event', 'basic')
+    } else {
+      setMessage('Updating Registration', 'basic')
+      updateRegistrationMutation({
+        user_id,
+        competing: {
+          status,
+          event_ids: selectedEvents,
+          comment,
+          admin_comment: adminComment,
+        },
+        competition_id: competitionInfo.id,
+      })
+    }
+  }, [
+    adminComment,
+    comment,
+    commentIsValid,
+    competitionInfo.id,
+    eventsAreValid,
+    hasChanges,
+    selectedEvents,
+    status,
+    updateRegistrationMutation,
+    user_id,
+  ])
+
   const registrationEditDeadlinePassed = moment(
     // If no deadline is set default to always be in the future
     competitionInfo.event_change_deadline_date ?? Date.now() + 1
@@ -90,7 +154,8 @@ export default function RegistrationEditor() {
             events={competitionInfo.event_ids}
             size="2x"
           />
-          <Header> Comment </Header>
+
+          <Header>Comment</Header>
           <TextArea
             id="competitor-comment"
             maxLength={240}
@@ -100,7 +165,8 @@ export default function RegistrationEditor() {
               setComment(data.value)
             }}
           />
-          <Header> Administrative Notes </Header>
+
+          <Header>Administrative Notes</Header>
           <TextArea
             id="admin-comment"
             maxLength={240}
@@ -110,7 +176,8 @@ export default function RegistrationEditor() {
               setAdminComment(data.value)
             }}
           />
-          <Header> Status </Header>
+
+          <Header>Status</Header>
           <div className={styles.registrationStatus}>
             <Checkbox
               radio
@@ -152,29 +219,19 @@ export default function RegistrationEditor() {
               onChange={(_, data) => setStatus(data.value)}
             />
           </div>
+
           {registrationEditDeadlinePassed ? (
             <Message negative>Registration edit deadline has passed.</Message>
           ) : (
             <Button
               color="blue"
-              onClick={() => {
-                setMessage('Updating Registration', 'basic')
-                updateRegistrationMutation({
-                  user_id,
-                  competing: {
-                    status,
-                    event_ids: selectedEvents,
-                    comment,
-                    admin_comment: adminComment,
-                  },
-                  competition_id: competitionInfo.id,
-                })
-              }}
-              disabled={isUpdating || selectedEvents.length === 0}
+              onClick={handleRegisterClick}
+              disabled={isUpdating}
             >
               Update Registration
             </Button>
           )}
+
           {competitionInfo['using_stripe_payments?'] && (
             <>
               <Header>