upd: caching data

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

app/(application)/division/index.tsx

@@ -17,8 +17,9 @@ import {
    Ionicons,
    MaterialCommunityIcons
 } 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 { Pressable, RefreshControl, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
@@ -40,23 +41,23 @@ export default function ListDivision() {
    const { token, decryptToken } = useAuthSession()
    const { colors } = useTheme();
    const [search, setSearch] = useState("")
-   const [nameGroup, setNameGroup] = useState("")
-   const [data, setData] = useState<Props[]>([])
-   // ... state same ...
+   const queryClient = useQueryClient()
+   const [status, setStatus] = useState<'true' | 'false'>(active == 'false' ? 'false' : 'true')
+   const [category, setCategory] = useState<'divisi-saya' | 'semua'>(cat == 'semua' ? 'semua' : 'divisi-saya')
    const update = useSelector((state: any) => state.divisionUpdate)
-   const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
-   const [loading, setLoading] = useState(false)
-   const [status, setStatus] = useState<'true' | 'false'>('true')
-   const [category, setCategory] = useState<'divisi-saya' | 'semua'>('divisi-saya')
-   const [page, setPage] = useState(1)
-   const [waiting, setWaiting] = useState(false)
    const [refreshing, setRefreshing] = useState(false)
 
-   async function handleLoad(loading: boolean, thisPage: number) {
-      try {
-         setWaiting(true)
-         setLoading(loading)
-         setPage(thisPage)
+   // TanStack Query for Divisions with Infinite Scroll
+   const {
+      data,
+      fetchNextPage,
+      hasNextPage,
+      isFetchingNextPage,
+      isLoading,
+      refetch
+   } = useInfiniteQuery({
+      queryKey: ['divisions', { status, search, group, category }],
+      queryFn: async ({ pageParam = 1 }) => {
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetDivision({
             user: hasil,
@@ -64,54 +65,52 @@ export default function ListDivision() {
             search: search,
             group: String(group),
             kategori: category,
-            page: thisPage
+            page: pageParam
          });
+         return response;
+      },
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages) => {
+         return lastPage.data.length > 0 ? allPages.length + 1 : undefined;
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
 
-         if (response.success) {
-            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)
-      }
-   }
-
+   // Refetch when manual update state changes
    useEffect(() => {
-      handleLoad(false, 1);
-   }, [update]);
+      refetch()
+   }, [update, refetch])
 
-   useEffect(() => {
-      handleLoad(true, 1);
-   }, [status, search, group, category]);
+   // Flatten pages into a single data array
+   const flatData = useMemo(() => {
+      return data?.pages.flatMap(page => page.data) || [];
+   }, [data])
 
-   const loadMoreData = () => {
-      if (waiting) return
-      setTimeout(() => {
-         handleLoad(false, page + 1)
-      }, 1000);
-   };
+   // Get nameGroup from the first available page
+   const nameGroup = useMemo(() => {
+      return data?.pages[0]?.filter?.name || "";
+   }, [data])
 
    const handleRefresh = async () => {
       setRefreshing(true)
-      handleLoad(false, 1)
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      await queryClient.invalidateQueries({ queryKey: ['divisions'] })
       setRefreshing(false)
    };
 
+   const loadMoreData = () => {
+      if (hasNextPage && !isFetchingNextPage) {
+         fetchNextPage()
+      }
+   };
+
+   const arrSkeleton = [0, 1, 2]
+
    const getItem = (_data: unknown, index: number): Props => ({
-      id: data[index].id,
-      name: data[index].name,
-      desc: data[index].desc,
-      jumlah_member: data[index].jumlah_member,
+      id: flatData[index]?.id,
+      name: flatData[index]?.name,
+      desc: flatData[index]?.desc,
+      jumlah_member: flatData[index]?.jumlah_member,
    })
 
 
@@ -206,7 +205,7 @@ export default function ListDivision() {
          </View>
          <View style={[{ flex: 2 }, Styles.mt10]}>
             {
-               loading ?
+               isLoading ?
                   isList ?
                      arrSkeleton.map((item, index) => (
                         <SkeletonTwoItem key={index} />
@@ -216,7 +215,7 @@ export default function ListDivision() {
                         <Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
                      ))
                   :
-                  data.length == 0 ? (
+                  flatData.length == 0 ? (
                      <View style={[Styles.mt15]}>
                         <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
                      </View>
@@ -224,9 +223,9 @@ export default function ListDivision() {
                      isList ? (
                         <View style={[Styles.h100]}>
                            <VirtualizedList
-                              data={data}
+                              data={flatData}
                               style={[{ paddingBottom: 100 }]}
-                              getItemCount={() => data.length}
+                              getItemCount={() => flatData.length}
                               getItem={getItem}
                               renderItem={({ item, index }: { item: Props, index: number }) => {
                                  return (
@@ -260,9 +259,9 @@ export default function ListDivision() {
                      ) : (
                         <View style={[Styles.h100]}>
                            <VirtualizedList
-                              data={data}
+                              data={flatData}
                               style={[{ paddingBottom: 100 }]}
-                              getItemCount={() => data.length}
+                              getItemCount={() => flatData.length}
                               getItem={getItem}
                               renderItem={({ item, index }: { item: Props, index: number }) => {
                                  return (