upd: caching data

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

app/(application)/group/index.tsx

@@ -15,7 +15,8 @@ import { setUpdateGroup } from "@/lib/groupSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import { useEffect, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useState } from "react";
 import { RefreshControl, View, VirtualizedList } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
@@ -31,16 +32,14 @@ export default function Index() {
    const { colors } = useTheme();
    const [isModal, setModal] = useState(false)
    const [isVisibleEdit, setVisibleEdit] = useState(false)
-   const [data, setData] = useState<Props[]>([])
    const [search, setSearch] = useState('')
-   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
-   const [loading, setLoading] = useState(true)
    const [showDeleteModal, setShowDeleteModal] = useState(false)
    const [status, setStatus] = useState<'true' | 'false'>('true')
    const [loadingSubmit, setLoadingSubmit] = useState(false)
    const [idChoose, setIdChoose] = useState('')
    const [activeChoose, setActiveChoose] = useState(true)
    const [titleChoose, setTitleChoose] = useState('')
+   const queryClient = useQueryClient()
    const [refreshing, setRefreshing] = useState(false)
 
    const dispatch = useDispatch()
@@ -49,12 +48,38 @@ export default function Index() {
       title: false,
    });
 
+   // TanStack Query for Groups
+   const {
+      data: queryData,
+      isLoading,
+      refetch
+   } = useQuery({
+      queryKey: ['groups', { status, search }],
+      queryFn: async () => {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetGroup({ 
+            user: hasil, 
+            active: status, 
+            search: search 
+         })
+         return response;
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
+
+   const data = useMemo(() => queryData?.data || [], [queryData])
+
+   useEffect(() => {
+      refetch()
+   }, [update, refetch])
 
    async function handleEdit() {
       try {
          setLoadingSubmit(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiEditGroup({ user: hasil, name: titleChoose }, idChoose)
+         await queryClient.invalidateQueries({ queryKey: ['groups'] })
          dispatch(setUpdateGroup(!update))
       } catch (error) {
          console.error(error)
@@ -71,6 +96,7 @@ export default function Index() {
       try {
          const hasil = await decryptToken(String(token?.current))
          const response = await apiDeleteGroup({ user: hasil, isActive: activeChoose }, idChoose)
+         await queryClient.invalidateQueries({ queryKey: ['groups'] })
          dispatch(setUpdateGroup(!update))
       } catch (error) {
          console.error(error)
@@ -80,32 +106,9 @@ export default function Index() {
       }
    }
 
-   async function handleLoad(loading: boolean) {
-      try {
-         setLoading(loading)
-         const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetGroup({ user: hasil, active: status, search: search })
-         setData(response.data)
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-
-      }
-   }
-
-   useEffect(() => {
-      handleLoad(false)
-   }, [update])
-
-   useEffect(() => {
-      handleLoad(true)
-   }, [status, search])
-
    const handleRefresh = async () => {
       setRefreshing(true)
-      handleLoad(false)
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      await queryClient.invalidateQueries({ queryKey: ['groups'] })
       setRefreshing(false)
    };
 
@@ -129,6 +132,8 @@ export default function Index() {
 
 
 
+   const arrSkeleton = [0, 1, 2, 3, 4]
+
    return (
       <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View style={[Styles.mb10]}>
@@ -152,7 +157,7 @@ export default function Index() {
          </View>
          <View style={[{ flex: 2 }, Styles.mt10]}>
             {
-               loading ?
+               isLoading ?
                   arrSkeleton.map((item, index) => {
                      return (
                         <SkeletonTwoItem key={index} />