Merge pull request #4977 from webkom/improve-redux-events

Refactor and fix types in events redux code

app/actions/EventActions.ts

@@ -3,7 +3,7 @@ import { eventSchema, eventAdministrateSchema } from 'app/reducers';
 import { Event } from './ActionTypes';
 import type { EntityId } from '@reduxjs/toolkit';
 import type { DetailedEvent } from 'app/store/models/Event';
-import type { Presence } from 'app/store/models/Registration';
+import type { Presence, ReadRegistration } from 'app/store/models/Registration';
 import type { Thunk, Action } from 'app/types';
 
 export const waitinglistPoolId = -1;
@@ -225,7 +225,7 @@ export function updateFeedback(
 }
 
 export function markUsernamePresent(eventId: EntityId, username: string) {
-  return callAPI({
+  return callAPI<ReadRegistration>({
     types: Event.UPDATE_REGISTRATION,
     endpoint: `/events/${eventId}/registration_search/`,
     method: 'POST',

app/components/AnnouncementInLine/index.tsx

@@ -2,12 +2,12 @@ import { Icon, LinkButton } from '@webkom/lego-bricks';
 import { Send } from 'lucide-react';
 import { useAppSelector } from 'app/store/hooks';
 import type { AnnouncementCreateLocationState } from 'app/routes/announcements/components/AnnouncementsCreate';
-import type { UnknownEvent } from 'app/store/models/Event';
+import type { CompleteEvent } from 'app/store/models/Event';
 import type { UnknownGroup } from 'app/store/models/Group';
 import type { UnknownMeeting } from 'app/store/models/Meeting';
 
 type Props = {
-  event?: UnknownEvent;
+  event?: Pick<CompleteEvent, 'id' | 'title'>;
   meeting?: UnknownMeeting;
   group?: UnknownGroup;
 };

app/components/EventItem/index.tsx

@@ -3,9 +3,9 @@ import {
   AlarmClock,
   Calendar,
   CalendarClock,
-  Clock,
   CircleAlert,
   CircleCheckBig,
+  Clock,
   Timer,
 } from 'lucide-react';
 import { Link } from 'react-router-dom';
@@ -14,51 +14,54 @@ import Tag from 'app/components/Tags/Tag';
 import Time from 'app/components/Time';
 import Tooltip from 'app/components/Tooltip';
 import { colorForEventType } from 'app/routes/events/utils';
+import { EventStatusType } from 'app/store/models/Event';
 import { eventAttendanceAbsolute } from 'app/utils/eventStatus';
 import styles from './styles.css';
-import type { ListEvent } from 'app/store/models/Event';
+import type { CompleteEvent, ListEvent } from 'app/store/models/Event';
 import type { ReactNode } from 'react';
 
 export type EventStyle = 'default' | 'extra-compact' | 'compact';
 
-type statusIconProps = {
-  status: string;
+type RegistrationIconOptions = {
   icon: ReactNode;
   color: string;
   tooltip: string;
 };
 
-const eventStatusObject = (event: ListEvent): statusIconProps => {
+const getRegistrationIconOptions = (
+  event: Pick<CompleteEvent, 'eventStatusType' | 'isAdmitted'>,
+): RegistrationIconOptions => {
   const { isAdmitted, eventStatusType } = event;
 
   switch (eventStatusType) {
-    case 'NORMAL':
-    case 'INFINITE':
+    case EventStatusType.NORMAL:
+    case EventStatusType.INFINITE:
       if (isAdmitted) {
         return {
-          status: 'Admitted',
           icon: <CircleCheckBig />,
           color: 'var(--success-color)',
           tooltip: 'Du er påmeldt',
-        } as statusIconProps;
+        } satisfies RegistrationIconOptions;
       }
       return {
-        status: 'Waitlist',
         icon: <Timer />,
         color: 'var(--color-orange-6)',
         tooltip: 'Du er på ventelisten',
-      } as statusIconProps;
+      } satisfies RegistrationIconOptions;
     default:
       return {
-        status: 'Error',
         icon: <CircleAlert />,
         color: 'var(--danger-color)',
         tooltip: 'Det har oppstått en feil',
-      } as statusIconProps;
+      } satisfies RegistrationIconOptions;
   }
 };
 
-const Attendance = ({ event }) => {
+const Attendance = ({
+  event,
+}: {
+  event: Parameters<typeof eventAttendanceAbsolute>[0];
+}) => {
   const attendance = eventAttendanceAbsolute(event);
   return !!attendance && <Pill>{attendance}</Pill>;
 };
@@ -103,13 +106,13 @@ const TimeStartAndRegistration = ({ event }: TimeStampProps) => {
 };
 
 const RegistrationIcon = ({ event }: TimeStampProps) => {
-  const iconStyle = eventStatusObject(event);
+  const registrationIconOptions = getRegistrationIconOptions(event);
   return (
-    <Tooltip content={iconStyle.tooltip}>
+    <Tooltip content={registrationIconOptions.tooltip}>
       <Icon
-        iconNode={iconStyle.icon}
+        iconNode={registrationIconOptions.icon}
         size={18}
-        style={{ color: iconStyle.color }}
+        style={{ color: registrationIconOptions.color }}
       />
     </Tooltip>
   );

app/components/Table/index.tsx

@@ -44,7 +44,7 @@ export type ColumnProps<T = unknown> = {
   inlineFiltering?: boolean;
   filterMessage?: string;
   render?: (data: any, object: T) => ReactNode;
-  columnChoices?: ColumnProps[];
+  columnChoices?: ColumnProps<T>[];
   visible?: boolean;
   centered?: boolean;
   padding?: number /** Affects only body columns */;

app/components/UserAttendance/Attendance.tsx

@@ -4,14 +4,13 @@ import AttendanceStatus from 'app/components/UserAttendance/AttendanceStatus';
 import UserGrid from 'app/components/UserGrid';
 import { useIsLoggedIn } from 'app/reducers/auth';
 import RegisteredSummary from 'app/routes/events/components/RegisteredSummary';
-import type { Pool } from 'app/components/UserAttendance/AttendanceModalContent';
+import type { AttendanceModalPool } from 'app/components/UserAttendance/AttendanceModalContent';
 import type { SummaryRegistration } from 'app/routes/events/components/RegisteredSummary';
-import type { PaymentRegistration } from 'app/store/models/Registration';
 
 type Props = {
-  pools: Pool[];
+  pools: AttendanceModalPool[];
   registrations?: SummaryRegistration[];
-  currentRegistration?: PaymentRegistration;
+  currentRegistration?: SummaryRegistration;
   minUserGridRows?: number;
   maxUserGridRows?: number;
   isMeeting?: boolean;

app/components/UserAttendance/AttendanceModal.tsx

@@ -1,9 +1,9 @@
 import { Modal } from '@webkom/lego-bricks';
 import AttendanceModalContent from './AttendanceModalContent';
-import type { Pool } from './AttendanceModalContent';
+import type { AttendanceModalPool } from './AttendanceModalContent';
 
 export type AttendanceModalProps = {
-  pools: Pool[];
+  pools: AttendanceModalPool[];
   title: string;
   isMeeting?: boolean;
   isOpen: boolean;

app/components/UserAttendance/AttendanceModalContent.tsx

@@ -11,19 +11,19 @@ import styles from './AttendanceModalContent.css';
 import type { EntityId } from '@reduxjs/toolkit';
 import type { PublicUser } from 'app/store/models/User';
 
-export type Registration = {
+export type AttendanceModalRegistration = {
   id: EntityId;
   user: PublicUser;
-  pool?: Pool;
+  pool?: EntityId;
 };
 
-export type Pool = {
+export type AttendanceModalPool = {
   name: string;
-  registrations: Registration[];
+  registrations: AttendanceModalRegistration[];
 };
 
 type Props = {
-  pools: Pool[];
+  pools: AttendanceModalPool[];
   togglePool: (index: number) => void;
   selectedPool: number;
   isMeeting?: boolean;
@@ -48,7 +48,7 @@ const Tab = ({ name, index, activePoolIndex, togglePool }: TabProps) => (
   </button>
 );
 
-const generateAmendedPools = (pools: Pool[]) => {
+const generateAmendedPools = (pools: AttendanceModalPool[]) => {
   if (pools.length === 1) return pools;
 
   const registrations = flatMap(pools, (pool) => pool.registrations);

app/components/UserAttendance/AttendanceStatus.tsx

@@ -1,9 +1,9 @@
 import { Button, Flex, Skeleton } from '@webkom/lego-bricks';
 import Tooltip from 'app/components/Tooltip';
 import styles from './AttendanceStatus.css';
-import type { Pool } from './AttendanceModalContent';
+import type { AttendanceModalPool } from './AttendanceModalContent';
 
-type AttendancePool = Pool & {
+type AttendancePool = AttendanceModalPool & {
   capacity?: number;
   registrationCount?: number;
 };

app/components/UserValidator/index.tsx

@@ -1,7 +1,7 @@
 import { Button, Flex, Icon, Modal } from '@webkom/lego-bricks';
 import { get, debounce } from 'lodash';
 import { ScanQrCode } from 'lucide-react';
-import { useCallback, useRef, useState, type ComponentProps } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { QrReader } from 'react-qr-reader';
 import { useNavigate, useParams } from 'react-router-dom';
 import { autocomplete } from 'app/actions/SearchActions';
@@ -28,10 +28,7 @@ type ScanResult = {
   count: number;
 };
 
-type Props = Omit<
-  ComponentProps<typeof SearchPage<UserSearchResult>>,
-  'handleSelect'
-> & {
+type Props = {
   handleSelect: (arg0: UserWithUsername) => Promise<SearchUser | Res>;
   validateAbakusGroup: boolean;
 };

app/models.ts

@@ -143,16 +143,11 @@ export type Group = {
   contactEmail: string;
 };
 
-export type Cover = {
-  url: string;
-  fileKey: string;
-};
-
 type EventBase = {
   id: EntityId;
   title: string;
   slug: string;
-  cover: Cover;
+  cover: string;
   coverPlaceholder: string;
   description: string;
   createdAt: Dateish | null | undefined;
@@ -262,7 +257,7 @@ export type Event = EventBase & {
   comments: Comment[];
   contentTarget: string;
   pools: Array<EventPool>;
-  survey: EntityId | null | undefined;
+  survey: EntityId | undefined;
   userReg: EventRegistration;
   useConsent: boolean;
   unansweredSurveys: Array<EntityId>;

app/reducers/__tests__/events.spec.ts

@@ -139,6 +139,7 @@ describe('reducers', () => {
             registrationCount: 0,
             waitingRegistrationCount: 1,
             waitingRegistrations: [99],
+            following: 14,
           } as unknown as UnknownEvent,
         },
       };
@@ -181,6 +182,7 @@ describe('reducers', () => {
             registrationCount: 0,
             waitingRegistrationCount: 1,
             waitingRegistrations: [99],
+            following: 14,
           } as unknown as UnknownEvent,
         },
       };
@@ -223,6 +225,7 @@ describe('reducers', () => {
             registrationCount: 3,
             waitingRegistrationCount: 0,
             waitingRegistrations: [],
+            following: 14,
           } as unknown as UnknownEvent,
         },
       };

app/reducers/__tests__/registrations.spec.ts

@@ -160,7 +160,7 @@ describe('reducers', () => {
         entities: {
           3: {
             id: 3,
-            fetching: true,
+            unregistering: true,
           },
           4: {
             id: 4,
@@ -182,7 +182,7 @@ describe('reducers', () => {
         entities: {
           3: {
             id: 3,
-            fetching: false,
+            unregistering: false,
           },
           4: {
             id: 4,

app/reducers/companies.ts

@@ -7,7 +7,7 @@ import { isNotNullish } from 'app/utils';
 import createLegoAdapter from 'app/utils/legoAdapter/createLegoAdapter';
 import { Company } from '../actions/ActionTypes';
 import { selectCompanySemesterEntities } from './companySemesters';
-import { selectEvents } from './events';
+import { selectAllEvents } from './events';
 import { selectUserEntities } from './users';
 import type { EntityId } from '@reduxjs/toolkit';
 import type { Semester } from 'app/models';
@@ -19,7 +19,7 @@ import type {
   UnknownCompany,
 } from 'app/store/models/Company';
 import type CompanySemester from 'app/store/models/CompanySemester';
-import type { UnknownEvent } from 'app/store/models/Event';
+import type { ListEvent } from 'app/store/models/Event';
 import type { UnknownUser } from 'app/store/models/User';
 import type { AnyAction } from 'redux';
 import type { Overwrite } from 'utility-types';
@@ -189,14 +189,14 @@ export const transformSemesterStatuses = (
   });
 
 export const selectEventsForCompany = createSelector(
-  selectEvents,
+  selectAllEvents<ListEvent>,
   (_: RootState, companyId: EntityId) => companyId,
   (events, companyId) => {
     if (!companyId || !events) return [];
     return events.filter(
       (event) =>
         event.company && Number(event.company.id) === Number(companyId),
-    ) as UnknownEvent[];
+    );
   },
 );
 export const selectJoblistingsForCompany = createSelector(