Prevent event registration button from moving when event opens

Also improve skeleton components on sidebar. There's still issues with the user grid skeleton, but that can be saved for later :)
webkom · Oct 26, 2024 · 83aff05 · 83aff05
1 parent a55962e
commit 83aff05
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 46 deletions.
diff --git a/app/routes/events/components/EventDetail/AttendeeSection.tsx b/app/routes/events/components/EventDetail/AttendeeSection.tsx
@@ -10,7 +10,6 @@ import RegistrationMeta, {
 } from 'app/routes/events/components/RegistrationMeta';
 import { getEventSemesterFromStartTime } from 'app/routes/events/utils';
 import { useAppSelector } from 'app/store/hooks';
-import styles from './EventDetail.module.css';
 import type {
   PoolWithRegistrations,
   PoolRegistrationWithUser,
@@ -26,6 +25,7 @@ interface Props {
   currentRegistration?: PoolRegistrationWithUser;
   pools: PoolWithRegistrations[];
   currentPool?: PoolWithRegistrations;
+  fiveMinutesBeforeActivation: boolean;
 }
 
 export const AttendeeSection = ({
@@ -34,6 +34,7 @@ export const AttendeeSection = ({
   currentRegistration,
   pools,
   currentPool,
+  fiveMinutesBeforeActivation,
 }: Props) => {
   const loggedIn = useIsLoggedIn();
   const fetching = useAppSelector((state) => state.events.fetching);
@@ -49,10 +50,7 @@ export const AttendeeSection = ({
 
   // The UserGrid is expanded when there's less than 5 minutes till activation
   const minUserGridRows =
-    event &&
-    currentMoment.isAfter(moment(event.activationTime).subtract(5, 'minutes'))
-      ? MIN_USER_GRID_ROWS
-      : 0;
+    event && fiveMinutesBeforeActivation ? MIN_USER_GRID_ROWS : 0;
 
   return (
     <Flex column>
@@ -65,27 +63,24 @@ export const AttendeeSection = ({
         minUserGridRows={minUserGridRows}
         maxUserGridRows={MAX_USER_GRID_ROWS}
         legacyRegistrationCount={event?.legacyRegistrationCount}
-        skeleton={fetching && registrations.length === 0}
+        skeleton={fetching && !registrations}
       />
 
-      <div className={styles.registrationMeta}>
-        {loggedIn &&
-          (showSkeleton || !event ? (
-            <RegistrationMetaSkeleton />
-          ) : (
-            <RegistrationMeta
-              useConsent={event.useConsent}
-              hasOpened={moment(event.activationTime).isBefore(currentMoment)}
-              photoConsents={event.photoConsents}
-              eventSemester={getEventSemesterFromStartTime(event.startTime)}
-              hasEnded={moment(event.endTime).isBefore(currentMoment)}
-              registration={currentRegistration}
-              isPriced={event.isPriced}
-              waitingListPosition={waitingListPosition}
-              skeleton={showSkeleton}
-            />
-          ))}
-      </div>
+      {loggedIn &&
+        (showSkeleton || !event ? (
+          <RegistrationMetaSkeleton />
+        ) : (
+          <RegistrationMeta
+            useConsent={event.useConsent}
+            fiveMinutesBeforeActivation={fiveMinutesBeforeActivation}
+            photoConsents={event.photoConsents}
+            eventSemester={getEventSemesterFromStartTime(event.startTime)}
+            hasEnded={moment(event.endTime).isBefore(currentMoment)}
+            registration={currentRegistration}
+            isPriced={event.isPriced}
+            waitingListPosition={waitingListPosition}
+          />
+        ))}
     </Flex>
   );
 };
diff --git a/app/routes/events/components/EventDetail/index.tsx b/app/routes/events/components/EventDetail/index.tsx
@@ -2,6 +2,7 @@ import { Flex, Page, Skeleton } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { isEmpty } from 'lodash';
 import { FilePenLine } from 'lucide-react';
+import moment from 'moment-timezone';
 import { useEffect } from 'react';
 import { useNavigate, useParams, Link } from 'react-router-dom';
 import { fetchEvent } from 'app/actions/EventActions';
@@ -143,6 +144,10 @@ const EventDetail = () => {
   const deadlinesInfoList = useDeadlineInfoList(event);
   const eventCreatorInfoList = useEventCreatorInfoList(event);
 
+  const fiveMinutesBeforeActivation = moment().isAfter(
+    moment(event?.activationTime).subtract(5, 'minutes'),
+  );
+
   return (
     <Page
       cover={
@@ -221,6 +226,7 @@ const EventDetail = () => {
                   currentRegistration={currentRegistration}
                   pools={pools as PoolWithRegistrations[]}
                   currentPool={currentPool}
+                  fiveMinutesBeforeActivation={fiveMinutesBeforeActivation}
                 />
               )}
 
@@ -238,6 +244,7 @@ const EventDetail = () => {
                   <JoinEventForm
                     event={event}
                     registration={currentRegistration}
+                    fiveMinutesBeforeActivation={fiveMinutesBeforeActivation}
                   />
                 )
               )}

diff --git a/app/routes/events/components/JoinEventForm.tsx b/app/routes/events/components/JoinEventForm.tsx
@@ -182,9 +182,15 @@ export type Props = {
   event: UserDetailedEvent | AuthUserDetailedEvent;
   registration?: PoolRegistrationWithUser;
   registrationPending?: boolean;
+  fiveMinutesBeforeActivation?: boolean;
 };
 
-const JoinEventForm = ({ title, event, registration }: Props) => {
+const JoinEventForm = ({
+  title,
+  event,
+  registration,
+  fiveMinutesBeforeActivation = false,
+}: Props) => {
   const { buttonOpen, formOpen, captchaOpen, registrationOpensIn } =
     useRegistrationCountdown(event, registration);
 
@@ -432,19 +438,18 @@ const JoinEventForm = ({ title, event, registration }: Props) => {
                             />
 
                             <SubmissionError />
-
-                            {!registration && (
-                              <div>
-                                Ved å melde deg på arrangementet samtykker du
-                                til{' '}
-                                <Link to="/pages/arrangementer/26-arrangementsregler">
-                                  arrangementsreglene
-                                </Link>
-                              </div>
-                            )}
                           </>
                         )}
 
+                        {!registration && fiveMinutesBeforeActivation && (
+                          <div>
+                            Ved å melde deg på arrangementet samtykker du til{' '}
+                            <Link to="/pages/arrangementer/26-arrangementsregler">
+                              arrangementsreglene
+                            </Link>
+                          </div>
+                        )}
+
                         {submitting ||
                           (registrationPending &&
                             !registrationPendingDelayed && (

diff --git a/app/routes/events/components/RegistrationMeta.tsx b/app/routes/events/components/RegistrationMeta.tsx
@@ -35,11 +35,10 @@ type Props = {
   isPriced: boolean;
   waitingListPosition?: WaitingListPosition;
   useConsent: boolean;
-  hasOpened: boolean;
+  fiveMinutesBeforeActivation: boolean;
   hasEnded: boolean;
   photoConsents?: Array<PhotoConsent>;
   eventSemester: EventSemester;
-  skeleton?: boolean;
 };
 
 const TextWithIconWrapper = (props: TextWithIconProps) => (
@@ -241,29 +240,24 @@ const PaymentStatus = ({
 };
 
 export const RegistrationMetaSkeleton = () => (
-  <Flex column gap="var(--spacing-sm)">
+  <Flex column gap="var(--spacing-sm)" className={styles.registrationMeta}>
     <Skeleton array={2} className={styles.sidebarInfo} />
   </Flex>
 );
 
 const RegistrationMeta = ({
   registration,
-  hasOpened,
+  fiveMinutesBeforeActivation,
   hasEnded,
   useConsent,
   isPriced,
   waitingListPosition,
   photoConsents,
   eventSemester,
-  skeleton,
 }: Props) => {
-  if (skeleton) {
-    return <RegistrationMetaSkeleton />;
-  }
-
   return (
-    <Flex column gap="var(--spacing-sm)">
-      {!registration && hasOpened && (
+    <Flex column gap="var(--spacing-sm)" className={styles.registrationMeta}>
+      {!registration && fiveMinutesBeforeActivation && (
         <TextWithIconWrapper
           iconName="close-circle-outline"
           content={`Du ${hasEnded ? 'var' : 'er'} ikke påmeldt`}