Merge remote-tracking branch 'origin/dev' into dev

app/(auth)/calendar/index.tsx

@@ -1,8 +1,40 @@
-import React from "react";
+import React, { useState } from "react";
+import { ScrollView, RefreshControl } from "react-native";
+import { useSetAtom } from "jotai";
 import CalendarPage from "@/components/pages/calendar/CalendarPage";
+import { refreshTriggerAtom } from "@/components/pages/calendar/atoms";
 
 export default function Screen() {
+  const [refreshing, setRefreshing] = useState(false);
+  const setRefreshTrigger = useSetAtom(refreshTriggerAtom);
+
+  const onRefresh = React.useCallback(async () => {
+    setRefreshing(true);
+
+    const minimumDelay = new Promise((resolve) => setTimeout(resolve, 1000));
+
+    try {
+      setRefreshTrigger((prev) => !prev);
+
+      await Promise.all([minimumDelay]);
+    } catch (error) {
+      console.error("Refresh failed:", error);
+    } finally {
+      setRefreshing(false);
+    }
+  }, [setRefreshTrigger]);
+
   return (
-        <CalendarPage/>
+    <ScrollView
+      style={{ flex: 1 }}
+      contentContainerStyle={{ flex: 1 }}
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+      }
+      bounces={true}
+      showsVerticalScrollIndicator={false}
+    >
+      <CalendarPage />
+    </ScrollView>
   );
 }

components/pages/calendar/CalendarPage.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import {View,} from "react-native-ui-lib";
+import { View } from "react-native-ui-lib";
 import HeaderTemplate from "@/components/shared/HeaderTemplate";
-import {InnerCalendar} from "@/components/pages/calendar/InnerCalendar";
+import { InnerCalendar } from "@/components/pages/calendar/InnerCalendar";
 
 export default function CalendarPage() {
   return (
     <View
-            style={{flex: 1, height: "100%", padding: 10}}
+      style={{ flex: 1, height: "100%", padding: 10 }}
       paddingH-22
       paddingT-0
     >
@@ -15,7 +15,7 @@ export default function CalendarPage() {
         isWelcome
         isCalendar={true}
       />
-            <InnerCalendar/>
+      <InnerCalendar />
     </View>
   );
 }

components/pages/calendar/EventCalendar.tsx

@@ -2,12 +2,13 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Calendar } from "react-native-big-calendar";
 import { ActivityIndicator, ScrollView, StyleSheet, View, ViewStyle } from "react-native";
 import { useGetEvents } from "@/hooks/firebase/useGetEvents";
-import { useAtom, useSetAtom } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
   editVisibleAtom,
   eventForEditAtom,
   isAllDayAtom,
   modeAtom,
+  refreshTriggerAtom,
   selectedDateAtom,
   selectedNewEventDateAtom,
 } from "@/components/pages/calendar/atoms";
@@ -31,7 +32,7 @@ const getTotalMinutes = () => {
 
 export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
   ({ calendarHeight }) => {
-    const { data: events, isLoading } = useGetEvents();
+    const { data: events, isLoading, refetch } = useGetEvents();
     const { profileData } = useAuthContext();
     const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
     const [mode, setMode] = useAtom(modeAtom);
@@ -39,6 +40,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
     const setEditVisible = useSetAtom(editVisibleAtom);
     const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
     const setEventForEdit = useSetAtom(eventForEditAtom);
+    const shouldRefresh = useAtomValue(refreshTriggerAtom);
     const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
 
     const {isSyncing} = useSyncEvents()
@@ -233,6 +235,17 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
       setOffsetMinutes(getTotalMinutes());
     }, [events, mode]);
 
+    useEffect(() => {
+      refetch()
+      .then(() => {
+        console.log('✅ Events refreshed successfully');
+      })
+      .catch((error) => {
+        console.error('❌ Events refresh failed:', error);
+      });
+    }, [shouldRefresh, refetch])
+    
+
     if (isLoading) {
       return (
         <View style={styles.loadingContainer}>

components/pages/calendar/InnerCalendar.tsx

@@ -1,5 +1,5 @@
 import {View} from "react-native-ui-lib";
-import React, {useRef, useState} from "react";
+import React, {useCallback, useRef, useState} from "react";
 import {LayoutChangeEvent} from "react-native";
 import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch";
 import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog";
@@ -11,12 +11,16 @@ export const InnerCalendar = () => {
     const [calendarHeight, setCalendarHeight] = useState(0);
     const [calendarWidth, setCalendarWidth] = useState(0);
     const calendarContainerRef = useRef(null);
+    const hasSetInitialSize = useRef(false);
 
-    const onLayout = (event: LayoutChangeEvent) => {
+    const onLayout = useCallback((event: LayoutChangeEvent) => {
+        if (!hasSetInitialSize.current) {
             const {height, width} = event.nativeEvent.layout;
             setCalendarHeight(height);
             setCalendarWidth(width);
-    };
+            hasSetInitialSize.current = true;
+        }
+    }, []);
 
     return (
         <>

components/pages/calendar/atoms.ts

@@ -11,3 +11,4 @@ export const selectedNewEventDateAtom = atom<Date | undefined>(undefined);
 export const settingsPageIndex = atom<number>(0);
 export const userSettingsView = atom<boolean>(true);
 export const toDosPageIndex = atom<number>(0);
+export const refreshTriggerAtom = atom<boolean>(false);