Handle no-competitor-limit UI cases (#377)

* Handle registration requirements case

* Minor formatting and punctuation

* Add blank line separation

* Omit limit in approved table when undefined

* Add spots remaining text to approved and waitlist

* Add suggestion as comment

Author: kr-matthews

Frontend/src/pages/register/components/RegistrationRequirements.jsx

@@ -11,10 +11,12 @@ import styles from './requirements.module.scss'
 export default function RegistrationRequirements() {
   const { competitionInfo } = useContext(CompetitionContext)
   const [activeIndex, setActiveIndex] = useState(-1)
-  const handleClick = (e, titleProps) => {
+
+  const handleClick = (_, titleProps) => {
     const { index } = titleProps
     setActiveIndex(activeIndex === index ? -1 : index)
   }
+
   return (
     <div className={styles.requirements}>
       <Header as="h1" attached="top">
@@ -23,6 +25,7 @@ export default function RegistrationRequirements() {
           [INSERT ORGANIZER MESSAGE REGARDING REQUIREMENTS]
         </Header.Subheader>
       </Header>
+
       <Segment padded inverted color="orange" attached size="big">
         <Accordion inverted>
           <Accordion.Title
@@ -39,20 +42,33 @@ export default function RegistrationRequirements() {
               <a href="/users/sign_up">here</a> to create one.
             </p>
           </Accordion.Content>
+
           <Accordion.Title
             active={activeIndex === 1}
             index={1}
             onClick={handleClick}
           >
             <UiIcon name="dropdown" />
-            {competitionInfo.competitor_limit} person Competitor Limit
+            {competitionInfo.competitor_limit
+              ? `${competitionInfo.competitor_limit} Person Competitor Limit`
+              : 'No Competitor Limit'}
           </Accordion.Title>
           <Accordion.Content active={activeIndex === 1}>
-            <p>
-              Once the competitor Limit has been reached you will be put onto
-              the waiting list.
-            </p>
+            {competitionInfo.competitor_limit ? (
+              <p>
+                Once the competitor limit has been reached you will be put onto
+                the waiting list.
+              </p>
+            ) : (
+              <p>
+                There is no competitor limit, but if this competition has
+                multiple locations then each location may have a separate
+                competitor limit. Please review the other tabs for more
+                information.
+              </p>
+            )}
           </Accordion.Content>
+
           <Accordion.Title
             active={activeIndex === 2}
             index={2}
@@ -76,6 +92,7 @@ export default function RegistrationRequirements() {
               before this date.`}
             </p>
           </Accordion.Content>
+
           <Accordion.Title
             active={activeIndex === 3}
             index={3}
@@ -91,6 +108,7 @@ export default function RegistrationRequirements() {
           <Accordion.Content active={activeIndex === 3}>
             <p>You can edit your registration until this date.</p>
           </Accordion.Content>
+
           <Accordion.Title
             active={activeIndex === 4}
             index={4}
@@ -117,6 +135,7 @@ export default function RegistrationRequirements() {
                 : 'This competition is free'}
             </p>
           </Accordion.Content>
+
           <Accordion.Title
             active={activeIndex === 5}
             index={5}
@@ -141,6 +160,7 @@ export default function RegistrationRequirements() {
                 : 'Guests attend for free.'}
             </p>
           </Accordion.Content>
+
           {competitionInfo.extra_registration_requirements && (
             <>
               <Accordion.Title

Frontend/src/pages/registration_administration/components/RegistrationAdministrationList.jsx

@@ -141,6 +141,7 @@ const truncateComment = (comment) =>
 
 export default function RegistrationAdministrationList() {
   const { competitionInfo } = useContext(CompetitionContext)
+
   const {
     isLoading,
     data: registrations,
@@ -157,6 +158,7 @@ export default function RegistrationAdministrationList() {
       setMessage(err.message, 'error')
     },
   })
+
   const [selected, dispatch] = useReducer(reducer, {
     pending: [],
     accepted: [],
@@ -168,6 +170,13 @@ export default function RegistrationAdministrationList() {
     () => partitionRegistrations(registrations ?? []),
     [registrations]
   )
+
+  // some sticky/floating bar somewhere with totals/info would be better
+  // than putting this in the table headers which scroll out of sight
+  const spotsRemaining = `; ${
+    competitionInfo?.competitor_limit - accepted?.length
+  } spot(s) remaining`
+
   return isLoading ? (
     <LoadingMessage />
   ) : (
@@ -181,9 +190,16 @@ export default function RegistrationAdministrationList() {
           competition_id={competitionInfo.id}
           selected={selected.pending}
         />
+
         <Header>
-          Approved registrations ({accepted.length}/
-          {competitionInfo.competitor_limit})
+          Approved registrations ({accepted.length}
+          {competitionInfo.competitor_limit && (
+            <>
+              {`/${competitionInfo.competitor_limit}`}
+              {spotsRemaining}
+            </>
+          )}
+          )
         </Header>
         <RegistrationAdministrationTable
           registrations={accepted}
@@ -192,14 +208,19 @@ export default function RegistrationAdministrationList() {
           competition_id={competitionInfo.id}
           selected={selected.accepted}
         />
-        <Header> Waitlisted registrations ({waiting.length}) </Header>
+
+        <Header>
+          Waitlisted registrations ({waiting.length}
+          {competitionInfo.competitor_limit && spotsRemaining})
+        </Header>
         <RegistrationAdministrationTable
           registrations={waiting}
           add={(attendee) => dispatch({ type: 'add-waiting', attendee })}
           remove={(attendee) => dispatch({ type: 'remove-waiting', attendee })}
           competition_id={competitionInfo.id}
           selected={selected.waiting}
         />
+
         <Header> Cancelled registrations ({cancelled.length}) </Header>
         <RegistrationAdministrationTable
           registrations={cancelled}
@@ -211,6 +232,7 @@ export default function RegistrationAdministrationList() {
           selected={selected.cancelled}
         />
       </div>
+
       <RegistrationActions
         selected={selected}
         refresh={async () => {
@@ -231,6 +253,7 @@ function RegistrationAdministrationTable({
   selected,
 }) {
   const { competitionInfo } = useContext(CompetitionContext)
+
   return (
     <Table striped textAlign="left">
       <Table.Header>
@@ -264,6 +287,7 @@ function RegistrationAdministrationTable({
           <Table.HeaderCell>Email</Table.HeaderCell>
         </Table.Row>
       </Table.Header>
+
       <Table.Body>
         {registrations.length > 0 ? (
           registrations.map((registration) => {