divide event attendee list into attendees and ppl on waitlist

.env.localow4

@@ -0,0 +1,2 @@
+OW4_SSO_CLIENT_ID='837461'
+OW4_ADDRESS='http://localhost:8000

src/events/api/publicAttendee.ts

@@ -4,9 +4,17 @@ import { IPublicAttendee } from 'events/models/Attendee';
 import { getUser } from 'authentication/api';
 
 const getPublicAttendeesUrl = (eventId: number) => `/api/v1/event/attendance-events/${eventId}/public-attendees/`;
+const getPublicUsersOnWaitlistUrl = (eventId: number) =>
+  `/api/v1/event/attendance-events/${eventId}/public-on-waitlist/`;
 
 export const getPublicAttendeesForEvent = async (eventId: number) => {
   const user = await getUser();
   const attendees = await get<IPublicAttendee[]>(getPublicAttendeesUrl(eventId), { format: 'json' }, { user });
   return attendees;
 };
+
+export const getPublicUsersOnWaitlistForEvent = async (eventId: number) => {
+  const user = await getUser();
+  const attendees = await get<IPublicAttendee[]>(getPublicUsersOnWaitlistUrl(eventId), { format: 'json' }, { user });
+  return attendees;
+};

src/events/components/DetailView/PublicAttendeesModal/ParticipantsButton.tsx

@@ -18,9 +18,20 @@ interface IAttendeeListProps {
 
 const AttendeeList: FC<IAttendeeListProps> = ({ attendees }) => (
   <div className={style.grid}>
-    {attendees.map((attendee, index) => (
-      <Attendee key={attendee.id} attendee={attendee} count={index + 1} />
-    ))}
+    <hr />
+    Påmeldt
+    {attendees
+      .filter((att) => !att.waitlist)
+      .map((attendee, index) => (
+        <Attendee key={attendee.id} attendee={attendee} count={index + 1} />
+      ))}
+    <hr />
+    På venteliste
+    {attendees
+      .filter((att) => att.waitlist)
+      .map((attendee, index) => (
+        <Attendee key={attendee.id} attendee={attendee} count={index + 1} />
+      ))}
   </div>
 );
 

src/events/models/Attendee.ts

@@ -21,4 +21,5 @@ export interface IPublicAttendee {
   full_name: string;
   year_of_study: number;
   field_of_study: string;
+  waitlist: boolean;
 }

src/events/slices/publicAttendees.ts

@@ -2,7 +2,7 @@ import { createAsyncThunk, createEntityAdapter, createSlice, SerializedError } f
 
 import { State } from 'core/redux/Store';
 import { IPublicAttendee } from 'events/models/Attendee';
-import { getPublicAttendeesForEvent } from 'events/api/publicAttendee';
+import { getPublicAttendeesForEvent, getPublicUsersOnWaitlistForEvent } from 'events/api/publicAttendee';
 
 const publicAttendeesAdapter = createEntityAdapter<IPublicAttendee>({
   sortComparer: (attendeeA, attendeeB) => {
@@ -16,7 +16,12 @@ export const fetchPublicAttendeesByEventId = createAsyncThunk(
   'publicAttendees/fetchByEventId',
   async (eventId: number) => {
     const attendees = await getPublicAttendeesForEvent(eventId);
-    return attendees;
+    const onWaitlist = await getPublicUsersOnWaitlistForEvent(eventId);
+
+    // merge the two arrays, using waitlist true or false
+    const mergedAttendees = attendees.map((attendee) => ({ ...attendee, waitlist: false }));
+    const mergedOnWaitlist = onWaitlist.map((attendee) => ({ ...attendee, waitlist: true }));
+    return [...mergedAttendees, ...mergedOnWaitlist];
   }
 );