From 3eb5b4ff1e9e4fb250f8ee2ed6141bdf554261a3 Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Fri, 20 Jun 2025 00:03:11 +0200
Subject: [PATCH] feat: enhance event management with participant selection and
 user search functionality

---
 src/app/event/[eventID]/page.tsx           | 51 ++++++++----
 src/app/layout.tsx                         | 19 +++--
 src/components/buttons/redirect-button.tsx |  4 +-
 src/components/forms/event-form.tsx        | 88 ++++++++++----------
 src/components/misc/user-search.tsx        | 96 ++++++++++++++++++++++
 5 files changed, 189 insertions(+), 69 deletions(-)
 create mode 100644 src/components/misc/user-search.tsx

diff --git a/src/app/event/[eventID]/page.tsx b/src/app/event/[eventID]/page.tsx
index f3db559..05df3aa 100644
--- a/src/app/event/[eventID]/page.tsx
+++ b/src/app/event/[eventID]/page.tsx
@@ -9,8 +9,11 @@ import { Label } from '@/components/ui/label';
 import { useGetApiEventEventID } from '@/generated/api/event/event';
 import { useGetApiUserMe } from '@/generated/api/user/user';
 import { RedirectButton } from '@/components/buttons/redirect-button';
+import { useSession } from 'next-auth/react';
+import ParticipantListEntry from '@/components/custom-ui/participant-list-entry';
 
 export default function ShowEvent() {
+  const session = useSession();
   const pathname = usePathname();
 
   // Extract eventId from URL like /event/[eventId]
@@ -61,20 +64,17 @@ export default function ShowEvent() {
 
         <CardContent>
           <div className='flex flex-col gap-5 w-full'>
-            <div className='grid grid-row-start:auto gap-8'>
-              <div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:flex-col max-sm:mb-6 max-sm:mt-10'>
-                <div className='w-[100px]'>
+            <div className='grid grid-row-start:auto gap-4 sm:gap-8'>
+              <div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:grid max-sm:grid-row-start:auto max-sm:mb-6 max-sm:mt-10 max-sm:ml-0'>
+                <div className='w-[100px] max-sm:w-full max-sm:flex max-sm:justify-center'>
                   <Logo colorType='monochrome' logoType='submark' width={50} />
                 </div>
-                <div className='items-center ml-auto mr-auto max-sm:mb-6'>
-                  <h1>{event.title || 'Untitled Event'}</h1>
-                </div>
-                <div className='w-0 sm:w-[100px]'>
-                  <RedirectButton
-                    redirectUrl={`/event/edit/${eventId}`}
-                    buttonText='edit'
-                  />
+                <div className='items-center ml-auto mr-auto max-sm:mb-6 max-sm:w-full max-sm:flex max-sm:justify-center'>
+                  <h1 className='text-center'>
+                    {event.title || 'Untitled Event'}
+                  </h1>
                 </div>
+                <div className='w-0 sm:w-[100px]'></div>
               </div>
               <div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
                 <div>
@@ -123,7 +123,7 @@ export default function ShowEvent() {
                 </div>
               </div>
               <div className='h-full w-full grid grid-cols-2 gap-4 max-sm:grid-cols-1'>
-                <div className='h-full w-full grid grid-flow-row gap-8'>
+                <div className='h-full w-full grid grid-flow-row gap-4 sm:gap-8'>
                   <div className='h-full w-full'>
                     <div className='flex flex-row gap-2'>
                       <Label className='text-[var(--color-neutral-300)]'>
@@ -139,13 +139,32 @@ export default function ShowEvent() {
                     <Label size='large'>{event.description || '-'}</Label>
                   </div>
                 </div>
-                <div className='h-full w-full'>
-                  <Label>Participants</Label>{' '}
-                  {/* TODO: add participants display */}
+                <div className='h-full w-full mt-2'>
+                  <Label className='text-[var(--color-neutral-300)] mb-2'>
+                    Participants
+                  </Label>{' '}
+                  <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
+                    {event.participants?.map((user) => (
+                      <ParticipantListEntry
+                        key={user.user.id}
+                        participant={user.user.name}
+                      ></ParticipantListEntry>
+                    ))}
+                  </div>
                 </div>
               </div>
 
-              <div className='flex flex-row gap-2 justify-end mt-4 mb-6'></div>
+              <div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
+                <div className='w-[20%] grid max-sm:w-full'>
+                  {session.data?.user?.id === event.organizer.id ? (
+                    <RedirectButton
+                      redirectUrl={`/event/edit/${eventId}`}
+                      buttonText='edit'
+                      className='w-full'
+                    />
+                  ) : null}
+                </div>
+              </div>
             </div>
           </div>
         </CardContent>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c37fc2e..c3097ba 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import type { Metadata } from 'next';
 import './globals.css';
 import { QueryProvider } from '@/components/query-provider';
 import { Toaster } from '@/components/ui/sonner';
+import { SessionProvider } from 'next-auth/react';
 
 export const metadata: Metadata = {
   title: 'MeetUp',
@@ -51,14 +52,16 @@ export default function RootLayout({
         <link rel='manifest' href='/site.webmanifest' />
       </head>
       <body>
-        <ThemeProvider
-          attribute='class'
-          defaultTheme='system'
-          enableSystem
-          disableTransitionOnChange
-        >
-          <QueryProvider>{children}</QueryProvider>
-        </ThemeProvider>
+        <SessionProvider>
+          <ThemeProvider
+            attribute='class'
+            defaultTheme='system'
+            enableSystem
+            disableTransitionOnChange
+          >
+            <QueryProvider>{children}</QueryProvider>
+          </ThemeProvider>
+        </SessionProvider>
         <Toaster />
       </body>
     </html>
diff --git a/src/components/buttons/redirect-button.tsx b/src/components/buttons/redirect-button.tsx
index d4e358a..e67acc1 100644
--- a/src/components/buttons/redirect-button.tsx
+++ b/src/components/buttons/redirect-button.tsx
@@ -4,13 +4,15 @@ import Link from 'next/link';
 export function RedirectButton({
   redirectUrl,
   buttonText,
+  className,
 }: {
   redirectUrl: string;
   buttonText: string;
+  className?: string;
 }) {
   return (
     <Link href={redirectUrl}>
-      <Button>{buttonText}</Button>
+      <Button className={className}>{buttonText}</Button>
     </Link>
   );
 }
diff --git a/src/components/forms/event-form.tsx b/src/components/forms/event-form.tsx
index 77fe8da..362196a 100644
--- a/src/components/forms/event-form.tsx
+++ b/src/components/forms/event-form.tsx
@@ -11,10 +11,16 @@ import {
   useGetApiEventEventID,
   usePatchApiEventEventID,
 } from '@/generated/api/event/event';
-import ParticipantListEntry from '@/components/custom-ui/participantListEntry';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import { ToastInner } from '@/components/misc/toast-inner';
+import { UserSearchInput } from '@/components/misc/user-search';
+import ParticipantListEntry from '../custom-ui/participant-list-entry';
+
+interface User {
+  id: string;
+  name: string;
+}
 
 interface EventFormProps {
   type: 'create' | 'edit';
@@ -45,13 +51,11 @@ const EventForm: React.FC<EventFormProps> = (props) => {
   const [startTime, setStartTime] = React.useState('');
   const [endDate, setEndDate] = React.useState<Date | undefined>(undefined);
   const [endTime, setEndTime] = React.useState('');
+
   // State for participants
-  const [selectedParticipants, setSelectedParticipants] = React.useState<{
-    [name: string]: boolean;
-  }>({
-    'Max Muster': false,
-    // Add more participants as needed
-  });
+  const [selectedParticipants, setSelectedParticipants] = React.useState<
+    User[]
+  >([]);
 
   // State for form fields
   const [title, setTitle] = React.useState('');
@@ -75,6 +79,12 @@ const EventForm: React.FC<EventFormProps> = (props) => {
       }
       setLocation(event.location || '');
       setDescription(event.description || '');
+      setSelectedParticipants(
+        event.participants?.map((u) => ({
+          id: u.user.id,
+          name: u.user.name,
+        })) || [],
+      );
     }
   }, [event, props.type]);
 
@@ -115,6 +125,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
       created_at: formData.get('createdAt') as string,
       updated_at: formData.get('updatedAt') as string,
       organiser: formData.get('organiser') as string,
+      participants: selectedParticipants.map((u) => u.id),
     };
 
     if (props.type === 'edit' && props.eventId) {
@@ -126,6 +137,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
           start_time: data.start_time,
           end_time: data.end_time,
           location: data.location,
+          participants: data.participants,
         },
       });
       console.log('Updating event');
@@ -173,12 +185,12 @@ const EventForm: React.FC<EventFormProps> = (props) => {
 
   return (
     <form className='flex flex-col gap-5 w-full' onSubmit={handleSubmit}>
-      <div className='grid grid-row-start:auto gap-8'>
-        <div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:flex-col max-sm:mb-6 max-sm:mt-10'>
-          <div className='w-[50px]'>
+      <div className='grid grid-row-start:auto gap-4 sm:gap-8 w-full'>
+        <div className='h-full w-full mt-0 ml-2 mb-16 flex items-center max-sm:grid max-sm:grid-row-start:auto max-sm:mb-6 max-sm:mt-10 max-sm:ml-0'>
+          <div className='w-[100px] max-sm:w-full max-sm:flex max-sm:justify-center'>
             <Logo colorType='monochrome' logoType='submark' width={50} />
           </div>
-          <div className='items-center ml-auto mr-auto max-sm:mb-6'>
+          <div className='items-center ml-auto mr-auto max-sm:mb-6 max-sm:w-full'>
             <LabeledInput
               type='text'
               label='Event Name'
@@ -260,17 +272,27 @@ const EventForm: React.FC<EventFormProps> = (props) => {
             </div>
           </div>
           <div className='h-full w-full'>
-            <Label>Participants</Label> {/* TODO: add participants input */}
-            <ParticipantListEntry
-              participant='Max Muster'
-              checked={selectedParticipants['Max Muster']}
-              onCheck={(checked) =>
-                setSelectedParticipants((prev) => ({
-                  ...prev,
-                  ['Max Muster']: checked,
-                }))
-              }
-            ></ParticipantListEntry>
+            <Label>Participants</Label>
+            <UserSearchInput
+              selectedUsers={selectedParticipants}
+              addUserAction={(user) => {
+                setSelectedParticipants((current) =>
+                  current.find((u) => u.id === user.id)
+                    ? current
+                    : [...current, user],
+                );
+              }}
+              removeUserAction={(user) => {
+                setSelectedParticipants((current) =>
+                  current.filter((u) => u.id !== user.id),
+                );
+              }}
+            />
+            <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
+              {selectedParticipants.map((user) => (
+                <ParticipantListEntry key={user.id} participant={user.name} />
+              ))}
+            </div>
           </div>
         </div>
 
@@ -300,28 +322,6 @@ const EventForm: React.FC<EventFormProps> = (props) => {
         {isSuccess && <p>Event created!</p>}
         {error && <p className='text-red-500'>Error: {error.message}</p>}
       </div>
-      {/* Hidden inputs for formData */}
-      <input
-        type='hidden'
-        name='startTime'
-        value={
-          startDate && startTime
-            ? `${startDate.toISOString().split('T')[0]}T${startTime}`
-            : ''
-        }
-      />
-      <input
-        type='hidden'
-        name='endTime'
-        value={
-          endDate && endTime
-            ? `${endDate.toISOString().split('T')[0]}T${endTime}`
-            : ''
-        }
-      />
-      <input type='hidden' name='organiser' value={organiserValue} />
-      <input type='hidden' name='createdAt' value={createdAtValue} />
-      <input type='hidden' name='updatedAt' value={updatedAtValue} />
     </form>
   );
 };
diff --git a/src/components/misc/user-search.tsx b/src/components/misc/user-search.tsx
new file mode 100644
index 0000000..82b7c38
--- /dev/null
+++ b/src/components/misc/user-search.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import * as React from 'react';
+import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { useGetApiSearchUser } from '@/generated/api/search/search';
+
+interface User {
+  id: string;
+  name: string;
+}
+
+export function UserSearchInput({
+  addUserAction,
+  removeUserAction,
+  selectedUsers,
+}: {
+  addUserAction: (user: User) => void;
+  removeUserAction: (user: User) => void;
+  selectedUsers: User[];
+}) {
+  const [userSearch, setUserSearch] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+  const { data: searchUserData } = useGetApiSearchUser({ query: userSearch });
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline_muted'
+          role='combobox'
+          aria-expanded={open}
+          className='w-[200px] justify-between'
+        >
+          {'Select user...'}
+          <ChevronsUpDownIcon className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className='w-[200px] p-0'>
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder='Search user...'
+            value={userSearch}
+            onValueChange={setUserSearch}
+          />
+          <CommandList>
+            <CommandEmpty>No users found.</CommandEmpty>
+            <CommandGroup>
+              {searchUserData?.data.users?.map((user) => {
+                const isSelected = selectedUsers.some((u) => u.id === user.id);
+
+                return (
+                  <CommandItem
+                    key={user.id}
+                    value={user.id}
+                    onSelect={() => {
+                      if (isSelected) {
+                        removeUserAction(user);
+                      } else {
+                        addUserAction(user);
+                      }
+                      setOpen(false);
+                    }}
+                  >
+                    <CheckIcon
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        isSelected ? 'opacity-100' : 'opacity-0',
+                      )}
+                    />
+                    {user.name}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}