refresh pages when focused

GenerateNU · Dec 3, 2024 · 3c9d4f0 · 3c9d4f0
1 parent d7a298c
commit 3c9d4f0
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 7 deletions.
diff --git a/frontend/app/(app)/(tabs)/index.tsx b/frontend/app/(app)/(tabs)/index.tsx
@@ -9,11 +9,10 @@ import {
 import { useAuthStore } from '../../../auth/authStore';
 import HomeMenu from '../../../components/home/menu-bar';
 import { Category, Filter } from '../../../consts/home-menu';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useUserFollowingPosts } from '../../../hooks/user';
 import BigDiveLog from '../../../components/divelog/divelog';
 import NearbyDiveLog from '../../../components/home/nearby-divelog';
-import { MasonryFlashList } from '@shopify/flash-list';
 import DiveLogSkeleton from '../divelog/components/skeleton';
 import * as Location from 'expo-location';
 import { DEFAULT_SHERM_LOCATION } from '../../../consts/location';
@@ -23,7 +22,8 @@ import FilterMenu from '../../../components/home/filter';
 import usePulsingAnimation from '../../../utils/skeleton';
 import { useInfoPopup } from '../../../contexts/info-popup-context';
 import InfoPopup from '../../../components/info-popup';
-import { InfiniteData } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
+import { useFocusEffect } from 'expo-router';
 
 const Home = () => {
   const { setClose } = useInfoPopup();
@@ -95,6 +95,16 @@ const Home = () => {
     }
   }, [selectedFilters, selectedCategory, nearbyPosts]);
 
+  useFocusEffect(
+    useCallback(() => {
+      if (selectedCategory === Category.NEARBY) {
+        refetchNearByPosts();
+      } else {
+        refetchFollowingPosts();
+      }
+    }, []),
+  );
+
   // render a following post
   const renderFollowingPost = ({ item }: { item: any }) => (
     <View className="w-full">
@@ -245,7 +255,6 @@ const Home = () => {
         }}
         */
       >
-
         <View className="flex flex-row">
           <View className="w-[48%] mr-[2%]">
             {split(nearbyPosts?.pages.flatMap((page) => page) || [])[0].map(

diff --git a/frontend/app/(app)/(tabs)/notification.tsx b/frontend/app/(app)/(tabs)/notification.tsx
@@ -1,5 +1,5 @@
 import { useFocusEffect } from 'expo-router';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { FlatList, SafeAreaView, SectionList, Text, View } from 'react-native';
 import { useAuthStore } from '../../../auth/authStore';
 import NotificationEntry from '../../../components/notification/notification';
@@ -23,6 +23,12 @@ const Notification = () => {
     isFetchingNextPage,
   } = useUserNotification(mongoDBId || '');
 
+  useFocusEffect(
+    useCallback(() => {
+      refetch();
+    }, [refetch]),
+  );
+
   const groupNotificationsAndSetSections = (pages: any) => {
     if (!pages) return;
 

diff --git a/frontend/app/(app)/user/components/menu.tsx b/frontend/app/(app)/user/components/menu.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   Dimensions,
   FlatList,
@@ -22,6 +22,7 @@ import Species from './species';
 import BigDiveLog from '../../../../components/divelog/divelog';
 import PopulatedInfoPopupButton from '../../../../components/populated-info-popup';
 import DiveLogSkeleton from '../../divelog/components/skeleton';
+import { useFocusEffect } from 'expo-router';
 
 const Menu = ({ id }: { id: string }) => {
   const { width } = Dimensions.get('window');
@@ -51,6 +52,8 @@ const Menu = ({ id }: { id: string }) => {
     fetchNextPage: diveLogFetchNextPage,
     hasNextPage: diveLogHasNextPage,
     isFetchingNextPage: diveLogIsFetchingNextPage,
+    refetch: refetchDivelog,
+    isRefetching: isRefetchingDivelog,
   } = useUserDiveLogs(id);
 
   const {
@@ -60,8 +63,20 @@ const Menu = ({ id }: { id: string }) => {
     fetchNextPage: speciesFetchNextPage,
     hasNextPage: speciesHasNextPage,
     isFetchingNextPage: speciesIsFetchingNextPage,
+    refetch: refetchSpecies,
   } = useUserSpecies(id);
 
+  useFocusEffect(
+    useCallback(() => {
+      console.log(`Refetching ${category} data`);
+      if (category === 'Dives') {
+        refetchDivelog();
+      } else if (category === 'Species') {
+        refetchSpecies();
+      }
+    }, [refetchDivelog, refetchSpecies, category]),
+  );
+
   const diveLogData = diveLogPages?.pages.flatMap((page) => page) ?? [];
   const speciesData = speciesPages?.pages.flatMap((page) => page) ?? [];
 
@@ -165,7 +180,7 @@ const Menu = ({ id }: { id: string }) => {
       </View>
 
       {category === 'Dives' &&
-        (diveLogIsLoading ? (
+        (diveLogIsLoading || isRefetchingDivelog ? (
           <FlatList
             data={[1, 2]}
             renderItem={() => (

diff --git a/frontend/app/_layout.tsx b/frontend/app/_layout.tsx
@@ -12,12 +12,21 @@ import {
   configureReanimatedLogger,
   ReanimatedLogLevel,
 } from 'react-native-reanimated';
+import * as Notifications from 'expo-notifications';
 
 configureReanimatedLogger({
   level: ReanimatedLogLevel.warn,
   strict: false,
 });
 
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: true,
+    shouldSetBadge: true,
+  }),
+});
+
 const queryClient = new QueryClient();
 
 const InitialLayout = () => {