New calendar

app/(auth)/_layout.tsx

@@ -36,6 +36,7 @@ import DrawerIcon from "@/assets/svgs/DrawerIcon";
 import { RouteProp } from "@react-navigation/core";
 import RefreshButton from "@/components/shared/RefreshButton";
 import { useCalSync } from "@/hooks/useCalSync";
+import {useIsFetching} from "@tanstack/react-query";
 
 type DrawerParamList = {
   index: undefined;
@@ -77,6 +78,11 @@ export default function TabLayout() {
   const setToDosIndex = useSetAtom(toDosPageIndex);
   const { resyncAllCalendars, isSyncing } = useCalSync();
 
+  const isFormatting = useIsFetching({queryKey: ['formattedEvents']}) > 0;
+  const isFetching = useIsFetching({queryKey: ['events']}) > 0;
+
+  const isLoading = isSyncing || isFormatting || isFetching;
+
   const onRefresh = React.useCallback(async () => {
     try {
       await resyncAllCalendars();
@@ -116,7 +122,7 @@ export default function TabLayout() {
       if (Device.deviceType !== DeviceType.TABLET || !showViewSwitch) {
         return isCalendarPage ? (
           <View marginR-16>
-            <RefreshButton onRefresh={onRefresh} isSyncing={isSyncing} />
+            <RefreshButton onRefresh={onRefresh} isSyncing={isLoading} />
           </View>
         ) : null;
       }
@@ -124,7 +130,7 @@ export default function TabLayout() {
       return (
         <View marginR-16 row centerV>
           {isCalendarPage && (
-            <View marginR-16><RefreshButton onRefresh={onRefresh} isSyncing={isSyncing} /></View>
+            <View marginR-16><RefreshButton onRefresh={onRefresh} isSyncing={isLoading} /></View>
           )}
           <MemoizedViewSwitch navigation={navigation} />
         </View>

app/(auth)/calendar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, {useEffect} from "react";
 import {RefreshControl, ScrollView, View} from "react-native";
 import CalendarPage from "@/components/pages/calendar/CalendarPage";
 import TabletCalendarPage from "@/components/pages/(tablet_pages)/calendar/TabletCalendarPage";
@@ -6,9 +6,9 @@ import * as Device from "expo-device";
 import {DeviceType} from "expo-device";
 import {useCalSync} from "@/hooks/useCalSync";
 import {colorMap} from "@/constants/colorMap";
-import { useSetAtom } from "jotai";
-import { selectedUserAtom } from "@/components/pages/calendar/atoms";
-import { useAuthContext } from "@/contexts/AuthContext";
+import {useSetAtom} from "jotai";
+import {selectedUserAtom} from "@/components/pages/calendar/atoms";
+import {useAuthContext} from "@/contexts/AuthContext";
 
 export default function Screen() {
     const isTablet = Device.deviceType === DeviceType.TABLET;
@@ -17,9 +17,14 @@ export default function Screen() {
     const {profileData} = useAuthContext()
 
     useEffect(() => {
-      if(!isTablet && profileData) setSelectedUser({firstName: profileData.firstName, lastName: profileData.lastName, eventColor: profileData.eventColor})
+        if (!isTablet && profileData) setSelectedUser({
+            uid: profileData.uid!,
+            firstName: profileData.firstName,
+            lastName: profileData.lastName,
+            eventColor: profileData?.eventColor!
+        })
     }, [])
-    
+
 
     const onRefresh = React.useCallback(async () => {
         try {
@@ -80,15 +85,8 @@ export default function Screen() {
     }
 
     return (
-        <ScrollView
-            style={{flex: 1, height: "100%"}}
-            contentContainerStyle={{flex: 1, height: "100%"}}
-            bounces={true}
-            showsVerticalScrollIndicator={false}
-        >
-            <View style={{flex: 1}}>
-                <CalendarPage/>
-            </View>
-        </ScrollView>
+        <View style={{flex: 1}}>
+            <CalendarPage/>
+        </View>
     );
 }

app/_layout.tsx

@@ -50,19 +50,17 @@ import {Stack} from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import "react-native-reanimated";
 import {AuthContextProvider} from "@/contexts/AuthContext";
-import {QueryClient, QueryClientProvider} from "react-query";
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 import {TextProps, ThemeManager, Toast, Typography,} from "react-native-ui-lib";
 import {Platform} from 'react-native';
 import KeyboardManager from 'react-native-keyboard-manager';
 import {enableScreens} from 'react-native-screens';
+import {PersistQueryClientProvider} from "@/contexts/PersistQueryClientProvider";
 
 enableScreens(true)
 
 SplashScreen.preventAutoHideAsync();
 
-const queryClient = new QueryClient();
-
-
 if (Platform.OS === 'ios') {
     KeyboardManager.setEnable(true);
     KeyboardManager.setToolbarPreviousNextButtonEnable(true);
@@ -262,7 +260,7 @@ export default function RootLayout() {
     }
 
     return (
-        <QueryClientProvider client={queryClient}>
+        <PersistQueryClientProvider>
             <AuthContextProvider>
                 <ThemeProvider value={DefaultTheme}>
                     <Stack>
@@ -273,6 +271,6 @@ export default function RootLayout() {
                     <Toast/>
                 </ThemeProvider>
             </AuthContextProvider>
-        </QueryClientProvider>
+        </PersistQueryClientProvider>
     );
 }