Added attendees

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -5,6 +5,8 @@ import {
     DateTimePicker,
     LoaderScreen,
     Modal,
+    Picker,
+    PickerModes,
     Switch,
     Text,
     TextField,
@@ -28,6 +30,7 @@ import CameraIcon from "@/assets/svgs/CameraIcon";
 import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
 import {useAtom} from "jotai";
 import {selectedNewEventDateAtom} from "@/components/pages/calendar/atoms";
+import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
 
 const daysOfWeek = [
     {label: "Monday", value: "monday"},
@@ -70,9 +73,13 @@ export const ManuallyAddEventModal = () => {
     const [startDate, setStartDate] = useState(initialDate ?? new Date());
     const [endDate, setEndDate] = useState(initialDate ?? new Date());
 
+    const [selectedAttendees, setSelectedAttendees] = useState<string[]>([]);
+
     const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
 
     const {mutateAsync: createEvent, isLoading, isError} = useCreateEvent();
+    const {data: members} = useGetFamilyMembers(true)
+
 
     if (!selectedNewEventDate) return null;
 
@@ -111,6 +118,7 @@ export const ManuallyAddEventModal = () => {
             startDate: finalStartDate,
             endDate: finalEndDate,
             allDay: isAllDay,
+            attendees: selectedAttendees,
         };
 
         await createEvent(eventData);
@@ -338,6 +346,13 @@ export const ManuallyAddEventModal = () => {
                         >
                             Attendees
                         </Text>
+                        <View flex-1/>
+                        <Picker
+                            value={selectedAttendees}
+                            onChange={(value) => setSelectedAttendees(value as string[] ?? [])}
+                            style={{marginLeft: "auto"}}
+                            mode={PickerModes.MULTI}
+                            renderInput={() =>
                                 <Button
                                     size={ButtonSize.small}
                                     paddingH-8
@@ -355,10 +370,21 @@ export const ManuallyAddEventModal = () => {
                                     label="Add"
                                     labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
                                 />
+                            }>
+                            {members?.map((member) => (
+                                <Picker.Item
+                                    key={member?.uid}
+                                    value={member?.uid!}
+                                    label={member?.firstName + " " + member?.lastName}
+                                />
+                            ))}
+                        </Picker>
                     </View>
+
                     <View marginL-35>
-                        <AssigneesDisplay/>
+                        <AssigneesDisplay setSlectedAttendees={setSelectedAttendees} selectedAttendees={selectedAttendees}/>
                     </View>
+
                     <View style={styles.divider}/>
                     <View marginH-30 marginB-0 row spread centerV>
                         <View row centerV>

components/shared/AssigneesDisplay.tsx

@@ -1,23 +1,77 @@
 import React from "react";
-import { ImageBackground, StyleSheet } from "react-native";
+import {ImageBackground, StyleSheet} from "react-native";
-import { View } from "react-native-ui-lib";
+import {Text, TouchableOpacity, View} from "react-native-ui-lib";
 import RemoveAssigneeBtn from "./RemoveAssigneeBtn";
+import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
+
+const AssigneesDisplay = ({selectedAttendees, setSlectedAttendees}: {
+    selectedAttendees: string[],
+    setSlectedAttendees: (value: React.SetStateAction<string[]>) => void
+}) => {
+    const {data: members} = useGetFamilyMembers(true);
+
+    const selectedMembers = members?.filter((x) => selectedAttendees.includes(x?.uid!));
+
+    const getInitials = (firstName: string, lastName: string) => {
+        return `${firstName.charAt(0)}${lastName.charAt(0)}`;
+    };
+
+    const removeAttendee = (uid: string) => {
+        setSlectedAttendees((prev) => prev.filter((x) => x !== uid));
+    }
 
-const AssigneesDisplay = () => {
     return (
         <View row marginH-13 marginT-13 gap-20>
+            {selectedMembers?.map((member) => (
+                <TouchableOpacity key={member.uid} style={styles.assigneeWrapper}
+                                  onPress={() => removeAttendee(member.uid!)}>
+                    {member?.pfp ? (
                         <ImageBackground
-        source={require("../../assets/images/child-picture.png")}
+                            source={{uri: member?.pfp}}
-        style={{ aspectRatio: 1, width: 58.08, overflow: "hidden" }}
+                            style={styles.image}
-        children={<RemoveAssigneeBtn />}
+                            children={<RemoveAssigneeBtn/>}
-      />
-      <ImageBackground
-        source={require("../../assets/images/child1-picture.png")}
-        style={{ aspectRatio: 1, width: 58.08, overflow: "hidden" }}
-        children={<RemoveAssigneeBtn />}
                         />
+                    ) : (
+                        <View style={styles.initialsCircle}>
+                            <Text style={styles.initialsText}>
+                                {getInitials(member.firstName, member.lastName)}
+                            </Text>
+                        </View>
+                    )}
+                    <RemoveAssigneeBtn/>
+                </TouchableOpacity>
+            ))}
+
+            {selectedAttendees.length === 0 && <Text>No attendees added</Text>}
         </View>
     );
 };
 
+const styles = StyleSheet.create({
+    assigneeWrapper: {
+        position: 'relative',
+        width: 58.08,
+        aspectRatio: 1,
+    },
+    image: {
+        aspectRatio: 1,
+        width: '100%',
+        borderRadius: 100, // Makes the image circular
+        overflow: 'hidden',
+    },
+    initialsCircle: {
+        backgroundColor: '#ccc',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 100, // Circular shape
+        width: '100%',
+        height: '100%',
+    },
+    initialsText: {
+        color: '#fff',
+        fontSize: 24,
+        fontWeight: 'bold',
+    },
+});
+
 export default AssigneesDisplay;

hooks/firebase/types/eventData.ts

@@ -11,4 +11,5 @@ export interface EventData {
     notes?: string,
     reminders?: string[]
     id?: string | number,
+    attendees?: string[]
 }

hooks/firebase/types/profileTypes.ts

@@ -17,6 +17,7 @@ export interface UserProfile {
     password: string;
     familyId?: string;
     uid?: string;
+    pfp?: string;
     googleToken?: string | null;
     microsoftToken?: string | null;
     appleToken?: string | null;

hooks/firebase/useGetEvents.ts

@@ -14,7 +14,8 @@ export const useGetEvents = () => {
         queryFn: async () => {
             const eventsQuery = firestore()
                 .collection("Events")
-                .where("creatorId", "==", user?.uid);
+                .where("creatorId", "==", user?.uid)
+                .where("attendees", "array-contains", user?.uid);
 
             if (isFamilyView) {
                 eventsQuery.where("familyID", "==", profileData?.familyId);