From 72aa06ad22186c0c663cd555fed2d819dfd164d0 Mon Sep 17 00:00:00 2001
From: Milan Paunovic <milan.paunovic@visit.com>
Date: Sun, 15 Dec 2024 18:45:04 +0100
Subject: [PATCH] Notifications sorting, modal fixes

---
 app/_layout.tsx                               |  2 -
 .../pages/calendar/DetailedCalendar.tsx       |  3 +-
 .../pages/calendar/ManuallyAddEventModal.tsx  | 77 ++++++++++++-------
 .../pages/calendar/useFormattedEvents.ts      |  2 +-
 hooks/firebase/useGetNotifications.ts         |  2 +-
 5 files changed, 52 insertions(+), 34 deletions(-)

diff --git a/app/_layout.tsx b/app/_layout.tsx
index f9d6af6..d8f9032 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -209,8 +209,6 @@ export default function RootLayout() {
 
     useEffect(() => {
         if (loaded) {
-            SplashScreen.hideAsync();
-
             const typographies: Partial<Record<TextStyle, FontStyle>> = {};
             (
                 [
diff --git a/components/pages/calendar/DetailedCalendar.tsx b/components/pages/calendar/DetailedCalendar.tsx
index 3599df9..8a18961 100644
--- a/components/pages/calendar/DetailedCalendar.tsx
+++ b/components/pages/calendar/DetailedCalendar.tsx
@@ -50,7 +50,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
     }), []);
 
     const containerProps = useMemo(() => ({
-        hourWidth: 60,
+        hourWidth: 70,
         allowPinchToZoom: true,
         useHaptic: true,
         scrollToNow: true,
@@ -84,6 +84,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
             {...containerProps}
             numberOfDays={numberOfDays}
             calendarWidth={calendarWidth}
+
             onDateChanged={debouncedOnDateChanged}
             firstDay={firstDay}
             events={formattedEvents ?? []}
diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx
index acbd67c..131d35e 100644
--- a/components/pages/calendar/ManuallyAddEventModal.tsx
+++ b/components/pages/calendar/ManuallyAddEventModal.tsx
@@ -113,7 +113,7 @@ export const ManuallyAddEventModal = () => {
         }
 
         const baseDate = editEvent?.end ?? initialDate ?? new Date();
-        return addHours(startOfHour(baseDate), 1);
+        return addHours(baseDate, 1);
     });
     const [startDate, setStartDate] = useState(initialDate ?? new Date());
     const [endDate, setEndDate] = useState(
@@ -162,7 +162,7 @@ export const ManuallyAddEventModal = () => {
             }
 
             const baseDate = editEvent?.end ?? initialDate ?? new Date();
-            return addHours(startOfHour(baseDate), 1);
+            return addHours(baseDate, 1);
         });
 
         setStartDate(initialDate ?? new Date());
@@ -356,6 +356,14 @@ export const ManuallyAddEventModal = () => {
                             newDate.setHours(currentDate.getHours());
                             newDate.setMinutes(currentDate.getMinutes());
                             setDate(newDate);
+
+                            if (isStart && newDate > endDate) {
+                                const newEndDate = new Date(newDate);
+                                newEndDate.setHours(endDate.getHours());
+                                newEndDate.setMinutes(endDate.getMinutes());
+                                setEndDate(newEndDate);
+                            }
+
                             onDismiss();
                         }}
                         theme={{
@@ -397,18 +405,18 @@ export const ManuallyAddEventModal = () => {
                 </View>
             </View>
 
-            <TouchableOpacity
-                onPress={() => setShowStartDatePicker(true)}
-                style={styles.dateButton}
-            >
-                <View row centerV spread paddingR-30>
-                    <View row centerV>
-                        <Feather name="calendar" size={25} color="#919191"/>
+            <View row marginB-10 spread centerV>
+                <View row centerV>
+                    <Feather name="calendar" size={25} color="#919191"/>
+                    <TouchableOpacity onPress={() => setShowStartDatePicker(true)}>
                         <Text marginL-8 style={styles.dateText}>
                             {format(startDate, 'MMM d, yyyy')}
                         </Text>
-                    </View>
-                    {!isAllDay && (
+                    </TouchableOpacity>
+                </View>
+
+                {!isAllDay && (
+                    <View right marginR-30>
                         <DateTimePicker
                             value={startTime}
                             onChange={(time) => {
@@ -419,24 +427,24 @@ export const ManuallyAddEventModal = () => {
                             minuteInterval={5}
                             mode="time"
                             timeFormat="HH:mm"
-                            style={styles.timePicker}
+                            style={[styles.timePicker]}
                         />
-                    )}
-                </View>
-            </TouchableOpacity>
+                    </View>
+                )}
+            </View>
 
             {!isAllDay && (
-                <TouchableOpacity
-                    onPress={() => setShowEndDatePicker(true)}
-                    style={styles.dateButton}
-                >
-                    <View row centerV spread paddingR-30>
-                        <View row centerV>
-                            <Feather name="calendar" size={25} color="#919191"/>
+                <View row marginB-10 spread centerV>
+                    <View row centerV>
+                        <Feather name="calendar" size={25} color="#919191"/>
+                        <TouchableOpacity onPress={() => setShowEndDatePicker(true)}>
                             <Text marginL-8 style={styles.dateText}>
                                 {format(endDate, 'MMM d, yyyy')}
                             </Text>
-                        </View>
+                        </TouchableOpacity>
+                    </View>
+
+                    <View right marginR-30>
                         <DateTimePicker
                             value={endTime}
                             onChange={(time) => {
@@ -453,15 +461,16 @@ export const ManuallyAddEventModal = () => {
                             minuteInterval={5}
                             mode="time"
                             timeFormat="HH:mm"
-                            style={styles.timePicker}
+                            style={[styles.timePicker]}
                         />
                     </View>
-                </TouchableOpacity>
+                </View>
             )}
 
             {renderCalendarPicker(true, showStartDatePicker, () => setShowStartDatePicker(false))}
             {renderCalendarPicker(false, showEndDatePicker, () => setShowEndDatePicker(false))}
-        </View>)
+        </View>
+    )
 
     return (
         <>
@@ -533,9 +542,8 @@ export const ManuallyAddEventModal = () => {
                                 Cancel
                             </Text>
                         </TouchableOpacity>
-                        <View row center>
-                            <DropModalIcon onPress={close}/>
-                        </View>
+
+
                         <View flexS row gap-10>
                             <TouchableOpacity onPress={handleSave}>
                                 <Text
@@ -822,4 +830,15 @@ const styles = StyleSheet.create({
         marginBottom: 10,
         marginTop: 25,
     },
+    timePicker: {
+        fontFamily: "PlusJakartaSans_500Medium",
+        fontSize: 16,
+    },
+    dateText: {
+        fontFamily: "PlusJakartaSans_500Medium",
+        fontSize: 16,
+    },
+    dateButton: {
+        marginTop: 10,
+    }
 });
diff --git a/components/pages/calendar/useFormattedEvents.ts b/components/pages/calendar/useFormattedEvents.ts
index 65597f8..d61ea74 100644
--- a/components/pages/calendar/useFormattedEvents.ts
+++ b/components/pages/calendar/useFormattedEvents.ts
@@ -31,7 +31,7 @@ interface FormattedEvent {
 
 // Precompute time constants
 const DAY_IN_MS = 24 * 60 * 60 * 1000;
-const PERIOD_IN_MS = 5 * DAY_IN_MS;
+const PERIOD_IN_MS = 45 * DAY_IN_MS;
 const TIME_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
 // Memoize date range calculations
diff --git a/hooks/firebase/useGetNotifications.ts b/hooks/firebase/useGetNotifications.ts
index 00c9f56..6294f48 100644
--- a/hooks/firebase/useGetNotifications.ts
+++ b/hooks/firebase/useGetNotifications.ts
@@ -35,11 +35,11 @@ export const useGetNotifications = () => {
             const snapshot = await firestore()
                 .collection("Notifications")
                 .where("familyId", "==", profileData?.familyId)
+                .orderBy("timestamp", "desc")
                 .get();
 
             return snapshot.docs.map((doc) => {
                 const data = doc.data() as NotificationFirestore;
-
                 return {
                     id: doc.id,
                     ...data,