From c528f72b2e7806d7b895a27656481714c984e26b Mon Sep 17 00:00:00 2001 From: Dejan Date: Thu, 21 Nov 2024 22:55:54 +0100 Subject: [PATCH 1/4] - Added created by label in the todo item --- components/pages/todos/ToDoItem.tsx | 116 ++++++++++++++++------------ 1 file changed, 66 insertions(+), 50 deletions(-) diff --git a/components/pages/todos/ToDoItem.tsx b/components/pages/todos/ToDoItem.tsx index 4eff2c7..f837588 100644 --- a/components/pages/todos/ToDoItem.tsx +++ b/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(false); const [points, setPoints] = useState(props.item.points); const [pointsModalVisible, setPointsModalVisible] = useState(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,57 +124,66 @@ const ToDoItem = (props: { /> - - {props.item.points && props.item.points > 0 ? ( - { - if (props.isSettings) { - setPointsModalVisible(true); - } - }} - > - - - - {props.item.points} points - - - - ) : ( - - )} - - {!(props.item.repeatType == "None") && ( - - - + + {props.item.points && props.item.points > 0 ? ( + { + if (props.isSettings) { + setPointsModalVisible(true); + } }} > - {(() => { - switch (props.item.repeatType) { - case "Once a month": - return "Monthly"; - case "Every week": - return "Weekly"; - case "Once a year": - return "Yearly"; - default: - return props.item.repeatType; - } - })()} - {props.item.date && - props.is7Days && - " / " + format(props.item.date, "EEEE")} - - - )} + + + + {props.item.points} points + + + + ) : ( + + )} + + {!(props.item.repeatType == "None") && ( + + + + {(() => { + switch (props.item.repeatType) { + case "Once a month": + return "Monthly"; + case "Every week": + return "Weekly"; + case "Once a year": + return "Yearly"; + default: + return props.item.repeatType; + } + })()} + {props.item.date && + props.is7Days && + " / " + format(props.item.date, "EEEE")} + + + )} + + + + Created by: {creator} + + {selectedMembers?.map((member) => { From 726668921b284e85a02070b7c5d8d958a3e1dbd1 Mon Sep 17 00:00:00 2001 From: Dejan Date: Thu, 21 Nov 2024 23:25:52 +0100 Subject: [PATCH 2/4] - Changed the location field style - Added creator information on the events in the events dialog --- .../pages/calendar/ManuallyAddEventModal.tsx | 69 +++++++++++-------- 1 file changed, 41 insertions(+), 28 deletions(-) diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx index efb3f48..394ec93 100644 --- a/components/pages/calendar/ManuallyAddEventModal.tsx +++ b/components/pages/calendar/ManuallyAddEventModal.tsx @@ -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" }, @@ -71,7 +72,6 @@ export const ManuallyAddEventModal = () => { }; const detailsRef = useRef(null); - const locationRef = useRef(null); const [title, setTitle] = useState(editEvent?.title || ""); const [details, setDetails] = useState(editEvent?.notes || ""); @@ -142,6 +142,15 @@ export const ManuallyAddEventModal = () => { const { data: members } = useGetFamilyMembers(true); const titleRef = useRef(null); + const [creator, setCreator] = useState(''); + useEffect(() => { + if (editEvent) { + let creatorMember = members?.find((member) => member?.uid === editEvent.creatorId); + const fullName = `${creatorMember?.firstName ?? ""}`; + setCreator(fullName); + } + }, []) + const isLoading = isDeleting || isAdding; useEffect(() => { @@ -647,34 +656,38 @@ export const ManuallyAddEventModal = () => { - - locationRef?.current?.focus()}> - - - - Location - - - - - setLocation(text)} - ref={locationRef} - maxLength={2000} - multiline - numberOfLines={2} - marginT-5 - marginL-10 - style={{ flex: 1 }} - /> + + + + { + setLocation(text); + }} + placeholderTextColor="#2d2d30" + style={{ fontFamily: "Manrope_500Medium", fontSize: 16, minWidth: "100%"}} + marginL-12 + paddingR-12 + /> + + {editEvent && <> + + + + + + + + } detailsRef?.current?.focus()}> From fb27079f10942b25b7d4f5d23de991f8d88c139e Mon Sep 17 00:00:00 2001 From: Dejan Date: Thu, 21 Nov 2024 23:32:50 +0100 Subject: [PATCH 3/4] - Added validation for title and attendees when creation/updating event --- .../pages/calendar/ManuallyAddEventModal.tsx | 25 ++++++++++++++++--- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx index 394ec93..4770af3 100644 --- a/components/pages/calendar/ManuallyAddEventModal.tsx +++ b/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"; @@ -266,12 +266,29 @@ export const ManuallyAddEventModal = () => { if (editEvent?.id) eventData.id = editEvent?.id; - await createEvent(eventData); - setEditEvent(undefined); + if (validateEvent()) { + await createEvent(eventData); + setEditEvent(undefined); - close(); + 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 = [ From 29ec985ffabd0919e4755f11d652cfb5a5eefced Mon Sep 17 00:00:00 2001 From: Dejan Date: Thu, 21 Nov 2024 23:53:18 +0100 Subject: [PATCH 4/4] - Fixed event coloring issue on the my view/family view --- components/pages/calendar/EventCalendar.tsx | 3 ++- components/pages/calendar/ManuallyAddEventModal.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/pages/calendar/EventCalendar.tsx b/components/pages/calendar/EventCalendar.tsx index a2bb06f..eeb40c1 100644 --- a/components/pages/calendar/EventCalendar.tsx +++ b/components/pages/calendar/EventCalendar.tsx @@ -104,7 +104,7 @@ export const EventCalendar: React.FC = 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; } @@ -283,6 +283,7 @@ export const EventCalendar: React.FC = React.memo( // enrichedEventsByDate={enrichedEvents} events={filteredEvents} eventCellStyle={memoizedEventCellStyle} + allDayEventCellStyle={memoizedEventCellStyle} onPressEvent={handlePressEvent} weekStartsOn={memoizedWeekStartsOn} height={calendarHeight} diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx index 4770af3..3a92335 100644 --- a/components/pages/calendar/ManuallyAddEventModal.tsx +++ b/components/pages/calendar/ManuallyAddEventModal.tsx @@ -67,6 +67,7 @@ export const ManuallyAddEventModal = () => { setDeleteModalVisible(false); setSelectedNewEndDate(undefined); setEditEvent(undefined); + setCreator(null) }, initialDate: selectedNewEventDate || editEvent?.start, }; @@ -149,7 +150,7 @@ export const ManuallyAddEventModal = () => { const fullName = `${creatorMember?.firstName ?? ""}`; setCreator(fullName); } - }, []) + }, [members]) const isLoading = isDeleting || isAdding;