fixed some calendar bugs

components/pages/calendar/EventCalendar.tsx

@@ -1,315 +1,337 @@
-import React, {useCallback, useEffect, useMemo, useState} from "react";
-import {Calendar} from "react-native-big-calendar";
-import {ActivityIndicator, StyleSheet, View, ViewStyle} from "react-native";
-import {useGetEvents} from "@/hooks/firebase/useGetEvents";
-import {useAtom, useSetAtom} from "jotai";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Calendar } from "react-native-big-calendar";
+import { ActivityIndicator, StyleSheet, View, ViewStyle } from "react-native";
+import { useGetEvents } from "@/hooks/firebase/useGetEvents";
+import { useAtom, useSetAtom } from "jotai";
 import {
-    editVisibleAtom,
-    eventForEditAtom,
-    modeAtom,
-    selectedDateAtom,
-    selectedNewEventDateAtom,
+  editVisibleAtom,
+  eventForEditAtom,
+  isAllDayAtom,
+  modeAtom,
+  selectedDateAtom,
+  selectedNewEventDateAtom,
 } from "@/components/pages/calendar/atoms";
-import {useAuthContext} from "@/contexts/AuthContext";
-import {CalendarEvent} from "@/components/pages/calendar/interfaces";
-import {Text} from "react-native-ui-lib";
-import {addDays, compareAsc, isWithinInterval, subDays} from "date-fns";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { CalendarEvent } from "@/components/pages/calendar/interfaces";
+import { Text } from "react-native-ui-lib";
+import { addDays, compareAsc, isWithinInterval, subDays } from "date-fns";
 
 interface EventCalendarProps {
-    calendarHeight: number;
-    // WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
-    calendarWidth: number;
+  calendarHeight: number;
+  // WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
+  calendarWidth: number;
 }
 
 const getTotalMinutes = () => {
-    const date = new Date();
-    return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
+  const date = new Date();
+  return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
 };
 
 export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
-    ({calendarHeight}) => {
-        const {data: events, isLoading} = useGetEvents();
-        const {profileData} = useAuthContext();
-        const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
-        const [mode, setMode] = useAtom(modeAtom);
+  ({ calendarHeight }) => {
+    const { data: events, isLoading } = useGetEvents();
+    const { profileData } = useAuthContext();
+    const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
+    const [mode, setMode] = useAtom(modeAtom);
 
-        const setEditVisible = useSetAtom(editVisibleAtom);
-        const setEventForEdit = useSetAtom(eventForEditAtom);
-        const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
+    const setEditVisible = useSetAtom(editVisibleAtom);
+    const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
+    const setEventForEdit = useSetAtom(eventForEditAtom);
+    const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
 
-        const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
+    const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
 
-        const todaysDate = new Date();
+    const todaysDate = new Date();
 
-        const handlePressEvent = useCallback(
-            (event: CalendarEvent) => {
-                if (mode === "day" || mode === "week") {
-                    setEditVisible(true);
-                    console.log({event});
-                    setEventForEdit(event);
-                } else {
-                    setMode("day");
-                    setSelectedDate(event.start);
-                }
-            },
-            [setEditVisible, setEventForEdit, mode]
-        );
-
-        const handlePressCell = useCallback(
-            (date: Date) => {
-                if (mode === "day" || mode === "week") {
-                    setSelectedNewEndDate(date);
-                } else {
-                    setMode("day");
-                    setSelectedDate(date);
-                }
-            },
-            [mode, setSelectedNewEndDate, setSelectedDate]
-        );
-
-        const handleSwipeEnd = useCallback(
-            (date: Date) => {
-                setSelectedDate(date);
-            },
-            [setSelectedDate]
-        );
-
-        const memoizedEventCellStyle = useCallback(
-            (event: CalendarEvent) => ({backgroundColor: event.eventColor}),
-            []
-        );
-
-        const memoizedWeekStartsOn = useMemo(
-            () => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
-            [profileData]
-        );
-
-        console.log({memoizedWeekStartsOn, profileData: profileData?.firstDayOfWeek})
-
-        const isSameDate = useCallback((date1: Date, date2: Date) => {
-            return (
-                date1.getDate() === date2.getDate() &&
-                date1.getMonth() === date2.getMonth() &&
-                date1.getFullYear() === date2.getFullYear()
-            );
-        }, []);
-
-        const dayHeaderColor = useMemo(() => {
-            return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
-        }, [selectedDate, mode]);
-
-        const dateStyle = useMemo(() => {
-            if (mode === "week") return undefined;
-            return isSameDate(todaysDate, selectedDate) && mode === "day"
-                ? styles.dayHeader
-                : styles.otherDayHeader;
-        }, [selectedDate, mode]);
-
-        const memoizedHeaderContentStyle = useMemo(() => {
-            if (mode === "day") {
-                return styles.dayModeHeader;
-            } else if (mode === "week") {
-                return styles.weekModeHeader;
-            } else if (mode === "month") {
-                return styles.monthModeHeader;
-            } else {
-                return {};
-            }
-        }, [mode]);
-
-
-        const {enrichedEvents, filteredEvents} = useMemo(() => {
-            const startTime = Date.now(); // Start timer
-
-            const startOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
-            const endOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
-
-            const filteredEvents = events?.filter(event =>
-                event.start && event.end &&
-                isWithinInterval(event.start, {
-                    start: subDays(selectedDate, startOffset),
-                    end: addDays(selectedDate, endOffset)
-                }) &&
-                isWithinInterval(event.end, {
-                    start: subDays(selectedDate, startOffset),
-                    end: addDays(selectedDate, endOffset)
-                })
-            ) ?? [];
-
-            const enrichedEvents = filteredEvents.reduce((acc, event) => {
-                const dateKey = event.start.toISOString().split('T')[0];
-                acc[dateKey] = acc[dateKey] || [];
-                acc[dateKey].push({
-                    ...event,
-                    overlapPosition: false,
-                    overlapCount: 0
-                });
-
-                acc[dateKey].sort((a, b) => compareAsc(a.start, b.start));
-
-                return acc;
-            }, {} as Record<string, CalendarEvent[]>);
-
-            const endTime = Date.now();
-            console.log("memoizedEvents computation time:", endTime - startTime, "ms");
-
-            return {enrichedEvents, filteredEvents};
-        }, [events, selectedDate, mode]);
-
-        const renderCustomDateForMonth = (date: Date) => {
-            const circleStyle = useMemo<ViewStyle>(
-                () => ({
-                    width: 30,
-                    height: 30,
-                    justifyContent: "center",
-                    alignItems: "center",
-                    borderRadius: 15,
-                }),
-                []
-            );
-
-            const defaultStyle = useMemo<ViewStyle>(
-                () => ({
-                    ...circleStyle,
-                }),
-                [circleStyle]
-            );
-
-            const currentDateStyle = useMemo<ViewStyle>(
-                () => ({
-                    ...circleStyle,
-                    backgroundColor: "#4184f2",
-                }),
-                [circleStyle]
-            );
-
-            const renderDate = useCallback(
-                (date: Date) => {
-                    const isCurrentDate = isSameDate(todaysDate, date);
-                    const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
-
-                    return (
-                        <View style={{alignItems: "center"}}>
-                            <View style={appliedStyle}>
-                                <Text style={{color: isCurrentDate ? "white" : "black"}}>
-                                    {date.getDate()}
-                                </Text>
-                            </View>
-                        </View>
-                    );
-                },
-                [todaysDate, currentDateStyle, defaultStyle] // dependencies
-            );
-
-            return renderDate(date);
-        };
-
-        useEffect(() => {
-            setOffsetMinutes(getTotalMinutes());
-        }, [events, mode]);
-
-        if (isLoading) {
-            return (
-                <View style={styles.loadingContainer}>
-                    <ActivityIndicator size="large" color="#0000ff"/>
-                </View>
-            );
+    const handlePressEvent = useCallback(
+      (event: CalendarEvent) => {
+        if (mode === "day" || mode === "week") {
+          setEditVisible(true);
+          console.log({ event });
+          setEventForEdit(event);
+        } else {
+          setMode("day");
+          setSelectedDate(event.start);
         }
+      },
+      [setEditVisible, setEventForEdit, mode]
+    );
 
-        // console.log(enrichedEvents, filteredEvents)
+    const handlePressCell = useCallback(
+      (date: Date) => {
+        if (mode === "day" || mode === "week") {
+          setSelectedNewEndDate(date);
+        } else {
+          setMode("day");
+          setSelectedDate(date);
+        }
+      },
+      [mode, setSelectedNewEndDate, setSelectedDate]
+    );
 
-        return (
-            <Calendar
-                bodyContainerStyle={styles.calHeader}
-                swipeEnabled
-                mode={mode}
-                enableEnrichedEvents={true}
-                sortedMonthView
-                // enrichedEventsByDate={enrichedEvents}
-                events={filteredEvents}
-                // eventCellStyle={memoizedEventCellStyle}
-                onPressEvent={handlePressEvent}
-                weekStartsOn={memoizedWeekStartsOn}
-                height={calendarHeight}
-                activeDate={todaysDate}
-                date={selectedDate}
-                onPressCell={handlePressCell}
-                headerContentStyle={memoizedHeaderContentStyle}
-                onSwipeEnd={handleSwipeEnd}
-                scrollOffsetMinutes={offsetMinutes}
-                theme={{
-                    palette: {
-                        nowIndicator: profileData?.eventColor || "#fd1575",
-                        gray: {
-                            "100": "#e8eaed",
-                            "200": "#e8eaed",
-                            "500": "#b7b7b7",
-                            "800": "#919191",
-                        },
-                    },
-                    typography: {
-                        fontFamily: "PlusJakartaSans_500Medium",
-                        sm: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
-                        xl: {
-                            fontFamily: "PlusJakartaSans_500Medium",
-                            fontSize: 16,
-                        },
-                        moreLabel: {},
-                        xs: {fontSize: 10},
-                    },
-                }}
-                dayHeaderStyle={dateStyle}
-                dayHeaderHighlightColor={"white"}
-                showAdjacentMonths
-                hourStyle={styles.hourStyle}
-                ampm
-                // renderCustomDateForMonth={renderCustomDateForMonth}
-            />
-        );
+    const handlePressDayHeader = useCallback(
+      (date: Date) => {
+        setIsAllDay(true);
+        console.log(isAllDay);
+        setSelectedNewEndDate(date);
+        setEditVisible(true);
+      },
+      [setSelectedNewEndDate]
+    );
+
+    const handleSwipeEnd = useCallback(
+      (date: Date) => {
+        setSelectedDate(date);
+      },
+      [setSelectedDate]
+    );
+
+    const memoizedEventCellStyle = useCallback(
+      (event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
+      []
+    );
+
+    const memoizedWeekStartsOn = useMemo(
+      () => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
+      [profileData]
+    );
+
+    console.log({
+      memoizedWeekStartsOn,
+      profileData: profileData?.firstDayOfWeek,
+    });
+
+    const isSameDate = useCallback((date1: Date, date2: Date) => {
+      return (
+        date1.getDate() === date2.getDate() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getFullYear() === date2.getFullYear()
+      );
+    }, []);
+
+    const dayHeaderColor = useMemo(() => {
+      return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
+    }, [selectedDate, mode]);
+
+    const dateStyle = useMemo(() => {
+      if (mode === "week") return undefined;
+      return isSameDate(todaysDate, selectedDate) && mode === "day"
+        ? styles.dayHeader
+        : styles.otherDayHeader;
+    }, [selectedDate, mode]);
+
+    const memoizedHeaderContentStyle = useMemo(() => {
+      if (mode === "day") {
+        return styles.dayModeHeader;
+      } else if (mode === "week") {
+        return styles.weekModeHeader;
+      } else if (mode === "month") {
+        return styles.monthModeHeader;
+      } else {
+        return {};
+      }
+    }, [mode]);
+
+    const { enrichedEvents, filteredEvents } = useMemo(() => {
+      const startTime = Date.now(); // Start timer
+
+      const startOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
+      const endOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
+
+      const filteredEvents =
+        events?.filter(
+          (event) =>
+            event.start &&
+            event.end &&
+            isWithinInterval(event.start, {
+              start: subDays(selectedDate, startOffset),
+              end: addDays(selectedDate, endOffset),
+            }) &&
+            isWithinInterval(event.end, {
+              start: subDays(selectedDate, startOffset),
+              end: addDays(selectedDate, endOffset),
+            })
+        ) ?? [];
+
+      const enrichedEvents = filteredEvents.reduce((acc, event) => {
+        const dateKey = event.start.toISOString().split("T")[0];
+        acc[dateKey] = acc[dateKey] || [];
+        acc[dateKey].push({
+          ...event,
+          overlapPosition: false,
+          overlapCount: 0,
+        });
+
+        acc[dateKey].sort((a, b) => compareAsc(a.start, b.start));
+
+        return acc;
+      }, {} as Record<string, CalendarEvent[]>);
+
+      const endTime = Date.now();
+      console.log(
+        "memoizedEvents computation time:",
+        endTime - startTime,
+        "ms"
+      );
+
+      return { enrichedEvents, filteredEvents };
+    }, [events, selectedDate, mode]);
+
+    const renderCustomDateForMonth = (date: Date) => {
+      const circleStyle = useMemo<ViewStyle>(
+        () => ({
+          width: 30,
+          height: 30,
+          justifyContent: "center",
+          alignItems: "center",
+          borderRadius: 15,
+        }),
+        []
+      );
+
+      const defaultStyle = useMemo<ViewStyle>(
+        () => ({
+          ...circleStyle,
+        }),
+        [circleStyle]
+      );
+
+      const currentDateStyle = useMemo<ViewStyle>(
+        () => ({
+          ...circleStyle,
+          backgroundColor: "#4184f2",
+        }),
+        [circleStyle]
+      );
+
+      const renderDate = useCallback(
+        (date: Date) => {
+          const isCurrentDate = isSameDate(todaysDate, date);
+          const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
+
+          return (
+            <View style={{ alignItems: "center" }}>
+              <View style={appliedStyle}>
+                <Text style={{ color: isCurrentDate ? "white" : "black" }}>
+                  {date.getDate()}
+                </Text>
+              </View>
+            </View>
+          );
+        },
+        [todaysDate, currentDateStyle, defaultStyle] // dependencies
+      );
+
+      return renderDate(date);
+    };
+
+    useEffect(() => {
+      setOffsetMinutes(getTotalMinutes());
+    }, [events, mode]);
+
+    if (isLoading) {
+      return (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color="#0000ff" />
+        </View>
+      );
     }
+
+    // console.log(enrichedEvents, filteredEvents)
+
+    return (
+      <Calendar
+        bodyContainerStyle={styles.calHeader}
+        swipeEnabled
+        mode={mode}
+        enableEnrichedEvents={true}
+        sortedMonthView
+        // enrichedEventsByDate={enrichedEvents}
+        events={filteredEvents}
+        // eventCellStyle={memoizedEventCellStyle}
+        onPressEvent={handlePressEvent}
+        weekStartsOn={memoizedWeekStartsOn}
+        height={calendarHeight}
+        activeDate={todaysDate}
+        date={selectedDate}
+        onPressCell={handlePressCell}
+        headerContentStyle={memoizedHeaderContentStyle}
+        onSwipeEnd={handleSwipeEnd}
+        scrollOffsetMinutes={offsetMinutes}
+        theme={{
+          palette: {
+            nowIndicator: profileData?.eventColor || "#fd1575",
+            gray: {
+              "100": "#e8eaed",
+              "200": "#e8eaed",
+              "500": "#b7b7b7",
+              "800": "#919191",
+            },
+          },
+          typography: {
+            fontFamily: "PlusJakartaSans_500Medium",
+            sm: { fontFamily: "Manrope_600SemiBold", fontSize: 15 },
+            xl: {
+              fontFamily: "PlusJakartaSans_500Medium",
+              fontSize: 16,
+            },
+            moreLabel: {},
+            xs: { fontSize: 10 },
+          },
+        }}
+        dayHeaderStyle={dateStyle}
+        dayHeaderHighlightColor={"white"}
+        showAdjacentMonths
+        hourStyle={styles.hourStyle}
+        onPressDateHeader={handlePressDayHeader}
+        ampm
+        // renderCustomDateForMonth={renderCustomDateForMonth}
+      />
+    );
+  }
 );
 
 const styles = StyleSheet.create({
-    segmentslblStyle: {
-        fontSize: 12,
-        fontFamily: "Manrope_600SemiBold",
-    },
-    calHeader: {
-        borderWidth: 0,
-    },
-    dayModeHeader: {
-        alignSelf: "flex-start",
-        justifyContent: "space-between",
-        alignContent: "center",
-        width: 38,
-        right: 42,
-        height: 13,
-    },
-    weekModeHeader: {},
-    monthModeHeader: {},
-    loadingContainer: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    dayHeader: {
-        backgroundColor: "#4184f2",
-        aspectRatio: 1,
-        borderRadius: 100,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    otherDayHeader: {
-        backgroundColor: "transparent",
-        color: "#919191",
-        aspectRatio: 1,
-        borderRadius: 100,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    hourStyle: {
-        color: "#5f6368",
-        fontSize: 12,
-        fontFamily: "Manrope_500Medium",
-    },
+  segmentslblStyle: {
+    fontSize: 12,
+    fontFamily: "Manrope_600SemiBold",
+  },
+  calHeader: {
+    borderWidth: 0,
+  },
+  dayModeHeader: {
+    alignSelf: "flex-start",
+    justifyContent: "space-between",
+    alignContent: "center",
+    width: 38,
+    right: 42,
+    height: 13,
+  },
+  weekModeHeader: {},
+  monthModeHeader: {},
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  dayHeader: {
+    backgroundColor: "#4184f2",
+    aspectRatio: 1,
+    borderRadius: 100,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  otherDayHeader: {
+    backgroundColor: "transparent",
+    color: "#919191",
+    aspectRatio: 1,
+    borderRadius: 100,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  hourStyle: {
+    color: "#5f6368",
+    fontSize: 12,
+    fontFamily: "Manrope_500Medium",
+  },
 });

components/pages/calendar/atoms.ts

@@ -2,6 +2,7 @@ import { atom } from "jotai";
 import { CalendarEvent } from "@/components/pages/calendar/interfaces";
 
 export const editVisibleAtom = atom<boolean>(false);
+export const isAllDayAtom = atom<boolean>(false);
 export const eventForEditAtom = atom<CalendarEvent | undefined>(undefined);
 export const isFamilyViewAtom = atom<boolean>(false);
 export const modeAtom = atom<"week" | "month" | "day">("week");

components/pages/settings/user_components/DeleteProfileDialogs.tsx

@@ -25,7 +25,7 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
         containerStyle={styles.dialog}
       >
         <View centerH>
-          <Feather name="alert-triangle" size={70} color="#FF5449" />
+          <Feather name="alert-triangle" size={70} color="#ff1637" />
         </View>
         <Text center style={styles.title}>
           Are you sure?
@@ -101,7 +101,7 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
 // Empty stylesheet for future styles
 const styles = StyleSheet.create({
   confirmBtn: {
-    backgroundColor: "#FF5449",
+    backgroundColor: "#ff1637",
   },
   cancelBtn: {
     backgroundColor: "white",

components/pages/settings/user_settings_views/MyProfile.tsx

@@ -217,7 +217,7 @@ const MyProfile = () => {
       </View>
       <Button
         size="large"
-        backgroundColor="#FF5449"
+        backgroundColor="#ff1637"
         label="Delete Profile"
         style={{ marginTop: 10 }}
         labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}

components/pages/todos/ToDoItem.tsx

@@ -111,7 +111,7 @@ const ToDoItem = (props: {
           height={0.7}
           width={"100%"}
           style={{
-            backgroundColor: props.item.done ? "#b8b8b8" : "#e7e7e7",
+            backgroundColor: "#e7e7e7",
           }}
           centerH
         />