Refactor and fix types in event pages

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/actions/UserActions.ts

@@ -10,13 +10,16 @@ import { User, Penalty } from './ActionTypes';
 import { uploadFile } from './FileActions';
 import { fetchMeta } from './MetaActions';
 import type { EntityId } from '@reduxjs/toolkit';
-import type { PhotoConsent } from 'app/models';
 import type { FormValues as ChangePasswordFormValues } from 'app/routes/users/components/ChangePassword';
 import type { FormValues as UserConfirmationFormValues } from 'app/routes/users/components/UserConfirmation';
 import type { AppDispatch } from 'app/store/createStore';
 import type { RejectedPromiseAction } from 'app/store/middleware/promiseMiddleware';
 import type { Penalty as PenaltyType } from 'app/store/models/Penalty';
-import type { CurrentUser, UpdateUser } from 'app/store/models/User';
+import type {
+  CurrentUser,
+  PhotoConsent,
+  UpdateUser,
+} from 'app/store/models/User';
 import type { Thunk, Token, EncodedToken, GetCookie } from 'app/types';
 
 const USER_STORAGE_KEY = 'lego.auth';

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/MazemapEmbed/MazemapButton.tsx

@@ -0,0 +1,31 @@
+import { Button, Flex } from '@webkom/lego-bricks';
+import { useState } from 'react';
+import mazemapLogo from 'app/assets/mazemap.svg';
+import { MazemapEmbed } from 'app/components/MazemapEmbed/index';
+import styles from 'app/routes/events/components/EventDetail/EventDetail.css';
+import type { ComponentProps } from 'react';
+
+type Props = ComponentProps<typeof MazemapEmbed> & {
+  defaultOpen?: boolean;
+};
+
+export const MazemapButton = ({ defaultOpen = false, ...props }: Props) => {
+  const [mapIsOpen, setMapIsOpen] = useState(defaultOpen);
+
+  return (
+    <Flex column gap="var(--spacing-xs)">
+      <Button
+        className={styles.mapButton}
+        onPress={() => setMapIsOpen(!mapIsOpen)}
+      >
+        <img
+          className={styles.mazemapImg}
+          alt="MazeMap sin logo"
+          src={mazemapLogo}
+        />
+        {mapIsOpen ? 'Skjul kart' : 'Vis kart'}
+      </Button>
+      {mapIsOpen && <MazemapEmbed {...props} />}
+    </Flex>
+  );
+};

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,16 +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,
-  Registration,
-} from 'app/components/UserAttendance/AttendanceModalContent';
+import type { AttendanceModalPool } from 'app/components/UserAttendance/AttendanceModalContent';
 import type { SummaryRegistration } from 'app/routes/events/components/RegisteredSummary';
 
 type Props = {
-  pools: Pool[];
+  pools: AttendanceModalPool[];
   registrations?: SummaryRegistration[];
-  currentRegistration?: Registration;
+  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;
 };