[#7] fixed attendee search in full display

src/components/Attendees/AttendeeSearch.tsx

@@ -9,6 +9,7 @@ import {
 } from "@mui/material";
 import { useEffect, useState } from "react";
 import { searchUsers } from "../../features/User/userAPI";
+import { userAttendee } from "../../features/User/userDataTypes";
 
 interface User {
   email: string;
@@ -17,9 +18,13 @@ interface User {
 }
 
 export default function UserSearch({
+  attendees,
   setAttendees,
+  disabled,
 }: {
+  attendees: userAttendee[];
   setAttendees: Function;
+  disabled?: boolean;
 }) {
   const [query, setQuery] = useState("");
   const [options, setOptions] = useState<User[]>([]);
@@ -40,6 +45,7 @@ export default function UserSearch({
     <Autocomplete
       multiple
       options={options}
+      disabled={disabled}
       loading={loading}
       filterOptions={(x) => x}
       fullWidth
@@ -75,14 +81,20 @@ export default function UserSearch({
           }}
         />
       )}
-      renderOption={(props, option) => (
-        <ListItem {...props} key={option.email} disableGutters>
-          <ListItemAvatar>
-            <Avatar src={option.avatarUrl} alt={option.displayName} />
-          </ListItemAvatar>
-          <ListItemText primary={option.displayName} secondary={option.email} />
-        </ListItem>
-      )}
+      renderOption={(props, option) => {
+        if (attendees.find((a) => a.cal_address === option.email)) return;
+        return (
+          <ListItem {...props} key={option.email} disableGutters>
+            <ListItemAvatar>
+              <Avatar src={option.avatarUrl} alt={option.displayName} />
+            </ListItemAvatar>
+            <ListItemText
+              primary={option.displayName}
+              secondary={option.email}
+            />
+          </ListItem>
+        );
+      }}
     />
   );
 }

src/features/Events/EventDisplay.tsx

@@ -360,7 +360,15 @@ export default function EventDisplayModal({
             rows={2}
           />
 
-          <AttendeeSelector setAttendees={setAttendees} />
+          {isOwn && (
+            <AttendeeSelector
+              attendees={attendees}
+              setAttendees={(value: userAttendee[]) => {
+                const newAttendeeList = attendees.concat(value);
+                setAttendees(newAttendeeList);
+              }}
+            />
+          )}
 
           <TextField
             fullWidth

src/features/Events/EventModal.tsx

@@ -275,7 +275,7 @@ function EventPopover({
             size="small"
             margin="dense"
           />
-          <AttendeeSelector setAttendees={setAttendees} />
+          <AttendeeSelector attendees={attendees} setAttendees={setAttendees} />
           {/* Extended options */}
           {showMore && (
             <>

src/features/User/userAPI.ts

@@ -16,14 +16,12 @@ export async function searchUsers(query: string) {
     })
     .json();
 
-  return response
-    .filter((user) => user.objectType === "user")
-    .map((user) => ({
-      email: user.emailAddresses?.[0]?.value || "",
-      displayName:
-        user.names?.[0]?.displayName || user.emailAddresses?.[0]?.value,
-      avatarUrl: user.photos?.[0]?.url || "",
-    }));
+  return response.map((user) => ({
+    email: user.emailAddresses?.[0]?.value || "",
+    displayName:
+      user.names?.[0]?.displayName || user.emailAddresses?.[0]?.value,
+    avatarUrl: user.photos?.[0]?.url || "",
+  }));
 }
 
 export async function getUserDetails(id: string) {