Merge pull request #5105 from webkom/events-skeletons

webkom · Oct 28, 2024 · d4fddd7 · d4fddd7
2 parents d3dc9fc + 83aff05
commit d4fddd7
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 56 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`}

diff --git a/app/routes/frontpage/components/CompactEvents.tsx b/app/routes/frontpage/components/CompactEvents.tsx
@@ -3,6 +3,7 @@ import { Pin } from 'lucide-react';
 import moment from 'moment-timezone';
 import { Link } from 'react-router-dom';
 import Circle from 'app/components/Circle';
+import EmptyState from 'app/components/EmptyState';
 import Time from 'app/components/Time';
 import Tooltip from 'app/components/Tooltip';
 import { selectAllEvents } from 'app/reducers/events';
@@ -23,6 +24,10 @@ type Props = {
 
 const EVENT_COLUMN_LIMIT = 5;
 
+const EventItemSkeleton = ({ events }: { events: number }) => (
+  <Skeleton array={EVENT_COLUMN_LIMIT - events} className={styles.eventItem} />
+);
+
 const CompactEvents = ({ className, style }: Props) => {
   const events = useAppSelector(selectAllEvents<FrontpageEvent>);
 
@@ -77,24 +82,17 @@ const CompactEvents = ({ className, style }: Props) => {
     EventType.BREAKFAST_TALK,
     EventType.NEXUS_EVENT,
   ]);
-  const leftEvents =
-    presentations.length > 0 ? presentations : ['Ingen presentasjoner'];
   const other = mapEvents([
     EventType.OTHER,
     EventType.EVENT,
     EventType.SOCIAL,
     EventType.PARTY,
   ]);
-  const rightEvents = other.length > 0 ? other : ['Ingen arrangementer'];
 
   const fetching = useAppSelector(
     (state) => state.frontpage.fetching || state.events.fetching,
   );
 
-  const skeleton = (
-    <Skeleton array={EVENT_COLUMN_LIMIT} className={styles.eventItem} />
-  );
-
   return (
     <Flex column className={className} style={style}>
       <Flex className={styles.compactEvents}>
@@ -113,7 +111,10 @@ const CompactEvents = ({ className, style }: Props) => {
             <h3 className="u-ui-heading">Bedpres og kurs</h3>
           </Link>
           <Flex column gap="var(--spacing-xs)">
-            {fetching && !presentations.length ? skeleton : leftEvents}
+            {presentations
+              ? presentations
+              : !fetching && <EmptyState body="Ingen presentasjoner" />}
+            {fetching && <EventItemSkeleton events={presentations.length} />}
           </Flex>
         </Flex>
         <Flex column className={styles.compactRight}>
@@ -128,10 +129,13 @@ const CompactEvents = ({ className, style }: Props) => {
               ),
             }}
           >
-            <h3 className="u-ui-heading">Arrangementer</h3>
+            <h3 className="u-ui-heading">Sosialt</h3>
           </Link>
           <Flex column gap="var(--spacing-xs)">
-            {fetching && !other.length ? skeleton : rightEvents}
+            {other
+              ? other
+              : !fetching && <EmptyState body="Ingen arrangementer" />}
+            {fetching && <EventItemSkeleton events={other.length} />}
           </Flex>
         </Flex>
       </Flex>