Fix day circle rendering

components/pages/calendar/EventCalendar.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useMemo, useState} from "react";
 import {Calendar} from "react-native-big-calendar";
-import { ActivityIndicator, StyleSheet, View } from "react-native";
+import {ActivityIndicator, StyleSheet, View, ViewStyle} from "react-native";
 import {useGetEvents} from "@/hooks/firebase/useGetEvents";
 import {useAtom, useSetAtom} from "jotai";
 import {
@@ -12,7 +12,7 @@ import {
 } from "@/components/pages/calendar/atoms";
 import {useAuthContext} from "@/contexts/AuthContext";
 import {CalendarEvent} from "@/components/pages/calendar/interfaces";
-import { act } from "react-test-renderer";
+import {Text} from "react-native-ui-lib";
 
 interface EventCalendarProps {
     calendarHeight: number;
@@ -30,7 +30,6 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         const {data: events, isLoading} = useGetEvents();
         const {profileData} = useAuthContext();
         const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
-    const [activeDate, setActiveDate] = useState<Date>(new Date());
         const [mode, setMode] = useAtom(modeAtom);
 
         const setEditVisible = useSetAtom(editVisibleAtom);
@@ -40,6 +39,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         const [isRendering, setIsRendering] = useState(true);
         const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
 
+        const todaysDate = new Date()
+
         useEffect(() => {
             if (events && mode) {
                 setIsRendering(true);
@@ -93,32 +94,23 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
             [profileData]
         );
 
-    useEffect(() => {
-      setActiveDate(new Date());
-
-      const interval = setInterval(() => setActiveDate(new Date()), 60000);
-      return () => clearInterval(interval);
+        const isSameDate = useCallback((date1: Date, date2: Date) => {
+            return (
+                date1.getDate() === date2.getDate() &&
+                date1.getMonth() === date2.getMonth() &&
+                date1.getFullYear() === date2.getFullYear()
+            );
         }, []);
 
         const dayHeaderColor = useMemo(() => {
-      const isSameDate =
-        activeDate.getDate() === selectedDate.getDate() &&
-        activeDate.getMonth() === selectedDate.getMonth() &&
-        activeDate.getFullYear() === selectedDate.getFullYear();
-
-      return isSameDate && mode === "day" ? "white" : "#4d4d4d";
-    }, [selectedDate, mode, activeDate]);
+            return isSameDate(todaysDate, selectedDate) && mode === "day" ? "white" : "#4d4d4d";
+        }, [selectedDate, mode]);
 
         const dateStyle = useMemo(() => {
-      const isSameDate =
-        activeDate.getDate() === selectedDate.getDate() &&
-        activeDate.getMonth() === selectedDate.getMonth() &&
-        activeDate.getFullYear() === selectedDate.getFullYear();
-
-      return isSameDate && mode === "day"
+            return isSameDate(todaysDate, selectedDate) && mode === "day"
                 ? styles.dayHeader
                 : styles.otherDayHeader;
-    }, [selectedDate, mode, activeDate]);
+        }, [selectedDate, mode]);
 
         const memoizedHeaderContentStyle = useMemo(() => {
             if (mode === "day") {
@@ -134,6 +126,55 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
 
         const memoizedEvents = useMemo(() => events ?? [], [events]);
 
+        const renderCustomDateForMonth = (date: Date) => {
+            const circleStyle = useMemo<ViewStyle>(
+                () => ({
+                    position: "absolute",
+                    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]);
@@ -157,7 +198,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
                 onPressEvent={handlePressEvent}
                 weekStartsOn={memoizedWeekStartsOn}
                 height={calendarHeight}
-        activeDate={activeDate}
+                activeDate={todaysDate}
                 date={selectedDate}
                 onPressCell={handlePressCell}
                 headerContentStyle={memoizedHeaderContentStyle}
@@ -165,6 +206,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
                 scrollOffsetMinutes={offsetMinutes}
                 dayHeaderStyle={dateStyle}
                 dayHeaderHighlightColor={dayHeaderColor}
+                renderCustomDateForMonth={renderCustomDateForMonth}
+                showAdjacentMonths
             />
         );
     }

ios/cally/Info.plist

@@ -118,6 +118,7 @@
       <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
       <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
       <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
+      <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
     </array>
     <key>UILaunchStoryboardName</key>
     <string>SplashScreen</string>