Fix day circle rendering

components/pages/calendar/EventCalendar.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {useCallback, useEffect, useMemo, useState} from "react";
-import { Calendar } from "react-native-big-calendar";
+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 {useGetEvents} from "@/hooks/firebase/useGetEvents";
-import { useAtom, useSetAtom } from "jotai";
+import {useAtom, useSetAtom} from "jotai";
 import {
     editVisibleAtom,
     eventForEditAtom,
@@ -10,9 +10,9 @@ import {
     selectedDateAtom,
     selectedNewEventDateAtom,
 } from "@/components/pages/calendar/atoms";
-import { useAuthContext } from "@/contexts/AuthContext";
+import {useAuthContext} from "@/contexts/AuthContext";
-import { CalendarEvent } from "@/components/pages/calendar/interfaces";
+import {CalendarEvent} from "@/components/pages/calendar/interfaces";
-import { act } from "react-test-renderer";
+import {Text} from "react-native-ui-lib";
 
 interface EventCalendarProps {
     calendarHeight: number;
@@ -26,11 +26,10 @@ const getTotalMinutes = () => {
 };
 
 export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
-  ({ calendarHeight }) => {
+    ({calendarHeight}) => {
-    const { data: events, isLoading } = useGetEvents();
+        const {data: events, isLoading} = useGetEvents();
-    const { profileData } = useAuthContext();
+        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);
@@ -54,7 +55,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
             (event: CalendarEvent) => {
                 if (mode === "day" || mode === "week") {
                     setEditVisible(true);
-          console.log({ event });
+                    console.log({event});
                     setEventForEdit(event);
                 } else {
                     setMode("day");
@@ -84,7 +85,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         );
 
         const memoizedEventCellStyle = useCallback(
-      (event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
+            (event: CalendarEvent) => ({backgroundColor: event.eventColor}),
             []
         );
 
@@ -93,32 +94,23 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
             [profileData]
         );
 
-    useEffect(() => {
+        const isSameDate = useCallback((date1: Date, date2: Date) => {
-      setActiveDate(new Date());
+            return (
-
+                date1.getDate() === date2.getDate() &&
-      const interval = setInterval(() => setActiveDate(new Date()), 60000);
+                date1.getMonth() === date2.getMonth() &&
-      return () => clearInterval(interval);
+                date1.getFullYear() === date2.getFullYear()
+            );
         }, []);
 
         const dayHeaderColor = useMemo(() => {
-      const isSameDate =
+            return isSameDate(todaysDate, selectedDate) && mode === "day" ? "white" : "#4d4d4d";
-        activeDate.getDate() === selectedDate.getDate() &&
+        }, [selectedDate, mode]);
-        activeDate.getMonth() === selectedDate.getMonth() &&
-        activeDate.getFullYear() === selectedDate.getFullYear();
-
-      return isSameDate && mode === "day" ? "white" : "#4d4d4d";
-    }, [selectedDate, mode, activeDate]);
 
         const dateStyle = useMemo(() => {
-      const isSameDate =
+            return isSameDate(todaysDate, selectedDate) && mode === "day"
-        activeDate.getDate() === selectedDate.getDate() &&
-        activeDate.getMonth() === selectedDate.getMonth() &&
-        activeDate.getFullYear() === selectedDate.getFullYear();
-
-      return isSameDate && 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]);
@@ -141,7 +182,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         if (isLoading || isRendering) {
             return (
                 <View style={styles.loadingContainer}>
-          <ActivityIndicator size="large" color="#0000ff" />
+                    <ActivityIndicator size="large" color="#0000ff"/>
                 </View>
             );
         }
@@ -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>