Merge branch 'dev'

# Conflicts:
#	components/pages/calendar/EventCalendar.tsx

components/pages/calendar/EventCalendar.tsx

@@ -102,7 +102,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         const memoizedEventCellStyle = useCallback(
             (event: CalendarEvent) => {
                 let eventColor = event.eventColor;
-                if (!isFamilyView && event.attendees?.includes(user?.uid)) {
+                if (!isFamilyView && (event.attendees?.includes(user?.uid) || event.creatorId === user?.uid)) {
                     eventColor = profileData?.eventColor ?? colorMap.teal;
                 }
 
@@ -268,6 +268,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
                     // enrichedEventsByDate={enrichedEvents}
                     events={filteredEvents}
                     eventCellStyle={memoizedEventCellStyle}
+                    allDayEventCellStyle={memoizedEventCellStyle}
                     onPressEvent={handlePressEvent}
                     weekStartsOn={memoizedWeekStartsOn}
                     height={calendarHeight}

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -22,7 +22,7 @@ import { PickerMultiValue } from "react-native-ui-lib/src/components/picker/type
 import { useCreateEvent } from "@/hooks/firebase/useCreateEvent";
 import { EventData } from "@/hooks/firebase/types/eventData";
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
-import { StyleSheet } from "react-native";
+import {Alert, StyleSheet} from "react-native";
 import ClockIcon from "@/assets/svgs/ClockIcon";
 import LockIcon from "@/assets/svgs/LockIcon";
 import MenuIcon from "@/assets/svgs/MenuIcon";
@@ -38,6 +38,7 @@ import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
 import BinIcon from "@/assets/svgs/BinIcon";
 import DeleteEventDialog from "./DeleteEventDialog";
 import { useDeleteEvent } from "@/hooks/firebase/useDeleteEvent";
+import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
 
 const daysOfWeek = [
   { label: "Monday", value: "monday" },
@@ -66,12 +67,12 @@ export const ManuallyAddEventModal = () => {
       setDeleteModalVisible(false);
       setSelectedNewEndDate(undefined);
       setEditEvent(undefined);
+      setCreator(null)
     },
     initialDate: selectedNewEventDate || editEvent?.start,
   };
 
   const detailsRef = useRef<TextFieldRef>(null);
-  const locationRef = useRef<TextFieldRef>(null);
   
   const [title, setTitle] = useState<string>(editEvent?.title || "");
   const [details, setDetails] = useState<string>(editEvent?.notes || "");
@@ -142,6 +143,15 @@ export const ManuallyAddEventModal = () => {
   const { data: members } = useGetFamilyMembers(true);
   const titleRef = useRef<TextFieldRef>(null);
 
+  const [creator, setCreator] = useState('');
+  useEffect(() => {
+    if (editEvent) {
+      let creatorMember = members?.find((member) => member?.uid === editEvent.creatorId);
+      const fullName = `${creatorMember?.firstName ?? ""}`;
+      setCreator(fullName);
+    }
+  }, [members])
+
   const isLoading = isDeleting || isAdding;
 
   useEffect(() => {
@@ -257,12 +267,29 @@ export const ManuallyAddEventModal = () => {
 
     if (editEvent?.id) eventData.id = editEvent?.id;
 
+    if (validateEvent()) {
       await createEvent(eventData);
       setEditEvent(undefined);
 
       close();
+    } else {
+      return;
+    }
   };
 
+  const validateEvent = () => {
+    if (!title) {
+      Alert.alert('Alert', 'Title field cannot be empty');
+      return false;
+    }
+    if (!selectedAttendees || selectedAttendees?.length === 0) {
+      Alert.alert('Alert', 'Cannot have an event without any attendees');
+      return false;
+    }
+
+    return true;
+  }
+
   const getRepeatLabel = () => {
     const selectedDays = repeatInterval;
     const allDays = [
@@ -647,34 +674,38 @@ export const ManuallyAddEventModal = () => {
             </View>
           </View>
           <View style={styles.divider} />
-          <View marginH-25 marginB-0 spread centerV flex-1>
+          <View marginH-28 marginB-0 centerV flex-1>
-            <TouchableOpacity onPress={() => locationRef?.current?.focus()}>
+            <View row centerV style={{ flexGrow: 1}}>
-              <View row centerV>
+              <Ionicons name="location-outline" size={25} color={"#919191"}/>
-                <Ionicons name="location-outline" size={28} color="#919191" />
-                <Text
-                    style={{
-                      fontFamily: "PlusJakartaSans_500Medium",
-                      fontSize: 16,
-                    }}
-                    marginL-10
-                >
-                  Location
-                </Text>
-              </View>
-            </TouchableOpacity>
-
               <TextField
+                  placeholder="Location"
                   value={location}
-                onChangeText={(text) => setLocation(text)}
+                  onChangeText={(text) => {
-                ref={locationRef}
+                    setLocation(text);
-                maxLength={2000}
+                  }}
-                multiline
+                  placeholderTextColor="#2d2d30"
-                numberOfLines={2}
+                  style={{ fontFamily: "Manrope_500Medium", fontSize: 16, minWidth: "100%"}}
-                marginT-5
+                  marginL-12
-                marginL-10
+                  paddingR-12
-                style={{ flex: 1 }}
               />
             </View>
+          </View>
+          {editEvent && <>
+            <View style={styles.divider} />
+            <View marginH-32 marginB-0 centerV flex-1>
+              <View row centerV style={{ flexGrow: 1}}>
+                <AddPersonIcon />
+                <TextField
+                    editable={false}
+                    value={creator}
+                    placeholderTextColor="#2d2d30"
+                    style={{ fontFamily: "Manrope_500Medium", fontSize: 16, minWidth: "100%", color: "black"}}
+                    marginL-12
+                    paddingR-12
+                />
+              </View>
+            </View>
+          </>}
           <View style={styles.divider} />
           <View marginH-30 marginB-0 spread centerV flex-1>
             <TouchableOpacity onPress={() => detailsRef?.current?.focus()}>

components/pages/todos/ToDoItem.tsx

@@ -8,7 +8,7 @@ import {
   Checkbox,
 } from "react-native-ui-lib";
 
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 import { useToDosContext } from "@/contexts/ToDosContext";
 import { Ionicons } from "@expo/vector-icons";
 import PointsSlider from "@/components/shared/PointsSlider";
@@ -33,6 +33,13 @@ const ToDoItem = (props: {
   const [visible, setVisible] = useState<boolean>(false);
   const [points, setPoints] = useState(props.item.points);
   const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
+  const [creator, setCreator] = useState('');
+
+  useEffect(() => {
+    let creatorMember = members?.find((member) => member?.uid === props.item.creatorId);
+    const fullName = `${creatorMember?.firstName ?? ""}`;
+    setCreator(fullName);
+  }, [])
 
   const handlePointsChange = (text: string) => {
     const numericValue = parseInt(text, 10);
@@ -117,6 +124,7 @@ const ToDoItem = (props: {
         />
       </View>
       <View centerV centerH marginT-8 row spread>
+        <View>
           <View row>
             {props.item.points && props.item.points > 0 ? (
               <TouchableOpacity
@@ -169,6 +177,14 @@ const ToDoItem = (props: {
               </View>
             )}
           </View>
+          <View row centerV marginL-3>
+            <Text
+                style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
+            >
+              Created by: {creator}
+            </Text>
+          </View>
+        </View>
         <View row style={{ gap: 3 }}>
           {selectedMembers?.map((member) => {
             return member?.pfp ? (