Added react native big calendar patch

components/pages/brain_dump/AddBrainDump.tsx

@@ -13,6 +13,8 @@ import { Dimensions, Keyboard, StyleSheet } from "react-native";
 
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
 import { useBrainDumpContext } from "@/contexts/DumpContext";
+import KeyboardManager from "react-native-keyboard-manager";
+
 
 interface IAddBrainDumpProps {
   isVisible: boolean;
@@ -29,14 +31,26 @@ const AddBrainDump = ({
   const [dumpDesc, setDumpDesc] = useState<string>("");
   const { width } = Dimensions.get("screen");
 
+
   // Refs for the two TextFields
   const descriptionRef = useRef<TextFieldRef>(null);
+  const titleRef = useRef<TextFieldRef>(null);
 
   useEffect(() => {
     setDumpDesc("");
     setDumpTitle("");
   }, [addBrainDumpProps.isVisible]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      titleRef?.current?.focus()
+    }, 500)
+  }, []);
+
+  useEffect(() => {
+    KeyboardManager.setEnableAutoToolbar(false);
+  },[])
+
   return (
     <Dialog
       bottom={true}
@@ -72,7 +86,7 @@ const AddBrainDump = ({
       <View marginH-20>
         <TextField
           value={dumpTitle}
-          autoFocus
+          ref={titleRef}
           placeholder="Set Title"
           text60R
           onChangeText={(text) => {

components/pages/calendar/EventCalendar.tsx

@@ -1,293 +1,325 @@
-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,
+    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, 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 { isWithinInterval, subDays, addDays, compareAsc } 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 setEventForEdit = useSetAtom(eventForEditAtom);
+        const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
 
-    const [isRendering, setIsRendering] = useState(true);
-    const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
+        const [isRendering, setIsRendering] = useState(true);
+        const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
 
-    const todaysDate = new Date();
+        const todaysDate = new Date();
 
-    useEffect(() => {
-      if (events && mode) {
-        setIsRendering(true);
-        const timeout = setTimeout(() => {
-          setIsRendering(false);
-        }, 10 );
-        return () => clearTimeout(timeout);
-      }
-    }, [events, mode]);
+        useEffect(() => {
+            if (events && mode) {
+                setIsRendering(true);
+                const timeout = setTimeout(() => {
+                    setIsRendering(false);
+                }, 10);
+                return () => clearTimeout(timeout);
+            }
+        }, [events, mode]);
 
-    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 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 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 handleSwipeEnd = useCallback(
+            (date: Date) => {
+                setSelectedDate(date);
+            },
+            [setSelectedDate]
+        );
 
-    const memoizedEventCellStyle = useCallback(
-      (event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
-      []
-    );
+        const memoizedEventCellStyle = useCallback(
+            (event: CalendarEvent) => ({backgroundColor: event.eventColor}),
+            []
+        );
 
-    const memoizedWeekStartsOn = useMemo(
-      () => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
-      [profileData]
-    );
+        const memoizedWeekStartsOn = useMemo(
+            () => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
+            [profileData]
+        );
 
-    const isSameDate = useCallback((date1: Date, date2: Date) => {
-      return (
-        date1.getDate() === date2.getDate() &&
-        date1.getMonth() === date2.getMonth() &&
-        date1.getFullYear() === date2.getFullYear()
-      );
-    }, []);
+        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 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 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 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 memoizedEvents = useMemo(() => {
-          const startOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
-          const endOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
 
-          return 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) })
-          ) ?? [];
-      }, [events, selectedDate, 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
+                });
+
+                // Sort events for this dateKey from oldest to newest by event.start
+                acc[dateKey].sort((a, b) => compareAsc(a.start, b.start));
+
+                return acc;
+            }, {} as Record<string, CalendarEvent[]>);
+
+            const endTime = Date.now(); // End timer
+            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,
-        }),
-        []
-      );
+                    height: 30,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    borderRadius: 15,
+                }),
+                []
+            );
 
-      const defaultStyle = useMemo<ViewStyle>(
-        () => ({
-          ...circleStyle,
-        }),
-        [circleStyle]
-      );
+            const defaultStyle = useMemo<ViewStyle>(
+                () => ({
+                    ...circleStyle,
+                }),
+                [circleStyle]
+            );
 
-      const currentDateStyle = useMemo<ViewStyle>(
-        () => ({
-          ...circleStyle,
-          backgroundColor: "#4184f2",
-        }),
-        [circleStyle]
-      );
+            const currentDateStyle = useMemo<ViewStyle>(
+                () => ({
+                    ...circleStyle,
+                    backgroundColor: "#4184f2",
+                }),
+                [circleStyle]
+            );
 
-      const renderDate = useCallback(
-        (date: Date) => {
-          const isCurrentDate = isSameDate(todaysDate, date);
-          const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
+            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 (
+                        <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);
-    };
+            return renderDate(date);
+        };
 
-    useEffect(() => {
-      setOffsetMinutes(getTotalMinutes());
-    }, [events, mode]);
+        useEffect(() => {
+            setOffsetMinutes(getTotalMinutes());
+        }, [events, mode]);
 
-    if (isLoading || isRendering) {
-      return (
-        <View style={styles.loadingContainer}>
-          <ActivityIndicator size="large" color="#0000ff" />
-        </View>
-      );
-    }
+        if (isLoading || isRendering) {
+            return (
+                <View style={styles.loadingContainer}>
+                    <ActivityIndicator size="large" color="#0000ff"/>
+                </View>
+            );
+        }
 
-    return (
-      <Calendar
-        bodyContainerStyle={styles.calHeader}
-        swipeEnabled
-        enableEnrichedEvents
-        mode={mode}
-        events={memoizedEvents}
-        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"}
-        // renderCustomDateForMonth={renderCustomDateForMonth}
-        showAdjacentMonths
-        hourStyle={styles.hourStyle}
-        ampm
+        // 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}
+                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/interfaces.ts

@@ -10,5 +10,7 @@ export interface CalendarEvent {
     eventColor?: string; // Optional color to represent the event
     participants?: string[]; // Optional list of participants or attendees
     private?: boolean;
-    notes?: string
+    notes?: string,
+    overlapPosition?: number
+    overlapCount?: number
 }

components/pages/settings/user_settings_views/MyGroup.tsx

@@ -28,7 +28,7 @@ import CircledXIcon from "@/assets/svgs/CircledXIcon";
 import ProfileIcon from "@/assets/svgs/ProfileIcon";
 import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
 import Ionicons from "@expo/vector-icons/Ionicons";
-import { PreviousNextView } from "react-native-keyboard-manager";
+import KeyboardManager, { PreviousNextView } from "react-native-keyboard-manager";
 
 const MyGroup = () => {
   const [showAddUserDialog, setShowAddUserDialog] = useState(false);
@@ -100,12 +100,17 @@ const MyGroup = () => {
     }
   };
 
+  useEffect(() => {
+    KeyboardManager.setEnableAutoToolbar(true);
+  },[])
+
   useEffect(() => {
     setFirstName("");
     setLastName("");
     setEmail("");
   }, []);
 
+
   // @ts-ignore
   return (
     <View style={{ flex: 1, minHeight: 500 }}>