upd: caching data

Deskripsi:
- update caching pada fitur utama -yg fitur divisi belom

app/(application)/member/index.tsx

@@ -12,8 +12,9 @@ import { apiGetUser } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather } from "@expo/vector-icons";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 import { router, useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { RefreshControl, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
@@ -37,73 +38,81 @@ export default function Index() {
    const entityUser = useSelector((state: any) => state.user)
    const { colors } = useTheme();
    const [search, setSearch] = useState('')
-   const [nameGroup, setNameGroup] = useState('')
-   const [data, setData] = useState<Props[]>([])
    const update = useSelector((state: any) => state.memberUpdate)
-   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
-   const [loading, setLoading] = useState(true)
-   const [status, setStatus] = useState<'true' | 'false'>('true')
-   const [page, setPage] = useState(1)
-   const [waiting, setWaiting] = useState(false)
+   const queryClient = useQueryClient()
+   const [status, setStatus] = useState<'true' | 'false'>(active == 'false' ? 'false' : 'true')
    const [refreshing, setRefreshing] = useState(false)
 
-   async function handleLoad(loading: boolean, thisPage: number) {
-      try {
-         setWaiting(true)
-         setLoading(loading)
-         setPage(thisPage)
+   // TanStack Query for Members with Infinite Scroll
+   const {
+      data,
+      fetchNextPage,
+      hasNextPage,
+      isFetchingNextPage,
+      isLoading,
+      refetch
+   } = useInfiniteQuery({
+      queryKey: ['members', { status, search, group }],
+      queryFn: async ({ pageParam = 1 }) => {
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetUser({ user: hasil, active: status, search, group: String(group), page: thisPage })
-         if (thisPage == 1) {
-            setData(response.data)
-         } else if (thisPage > 1 && response.data.length > 0) {
-            setData([...data, ...response.data])
-         } else {
-            return;
-         }
-         setNameGroup(response.filter.name)
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-         setWaiting(false)
-      }
-   }
+         const response = await apiGetUser({ 
+            user: hasil, 
+            active: status, 
+            search, 
+            group: String(group), 
+            page: pageParam 
+         })
+         return response;
+      },
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages) => {
+         return lastPage.data.length > 0 ? allPages.length + 1 : undefined;
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
 
-   const loadMoreData = () => {
-      if (waiting) return
-      setTimeout(() => {
-         handleLoad(false, page + 1)
-      }, 1000);
-   };
+   // Flatten pages into a single data array
+   const flatData = useMemo(() => {
+      return data?.pages.flatMap(page => page.data) || [];
+   }, [data])
 
+   // Get nameGroup from the first available page
+   const nameGroup = useMemo(() => {
+      return data?.pages[0]?.filter?.name || "";
+   }, [data])
+
+   // Refetch when manual update state changes
    useEffect(() => {
-      handleLoad(false, 1)
-   }, [update])
-
-   useEffect(() => {
-      handleLoad(true, 1)
-   }, [group, search, status])
+      refetch()
+   }, [update, refetch])
 
    const handleRefresh = async () => {
       setRefreshing(true)
-      handleLoad(false, 1)
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      await queryClient.invalidateQueries({ queryKey: ['members'] })
       setRefreshing(false)
    };
 
+   const loadMoreData = () => {
+      if (hasNextPage && !isFetchingNextPage) {
+         fetchNextPage()
+      }
+   };
+
+   const arrSkeleton = [0, 1, 2, 3, 4]
+
    const getItem = (_data: unknown, index: number): Props => ({
-      id: data[index].id,
-      name: data[index].name,
-      nik: data[index].nik,
-      email: data[index].email,
-      phone: data[index].phone,
-      gender: data[index].gender,
-      position: data[index].position,
-      group: data[index].group,
-      img: data[index].img,
-      isActive: data[index].isActive,
-      role: data[index].role,
+      id: flatData[index]?.id,
+      name: flatData[index]?.name,
+      nik: flatData[index]?.nik,
+      email: flatData[index]?.email,
+      phone: flatData[index]?.phone,
+      gender: flatData[index]?.gender,
+      position: flatData[index]?.position,
+      group: flatData[index]?.group,
+      img: flatData[index]?.img,
+      isActive: flatData[index]?.isActive,
+      role: flatData[index]?.role,
    });
 
    return (
@@ -136,18 +145,18 @@ export default function Index() {
          </View>
          <View style={[{ flex: 2 }, Styles.mt10]}>
             {
-               loading ?
+               isLoading ?
                   arrSkeleton.map((item, index) => {
                      return (
                         <SkeletonTwoItem key={index} />
                      )
                   })
                   :
-                  data.length > 0
+                  flatData.length > 0
                      ?
                      <VirtualizedList
-                        data={data}
-                        getItemCount={() => data.length}
+                        data={flatData}
+                        getItemCount={() => flatData.length}
                         getItem={getItem}
                         renderItem={({ item, index }: { item: Props, index: number }) => {
                            return (