upd: caching data

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

app/(application)/position/index.tsx

@@ -16,8 +16,9 @@ import { setUpdatePosition } from "@/lib/positionSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from "react";
+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,51 +32,53 @@ type Props = {
 }
 
 export default function Index() {
-   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
-   const [loading, setLoading] = useState(true)
    const { token, decryptToken } = useAuthSession()
    const { colors } = useTheme()
-   const [status, setStatus] = useState<'true' | 'false'>('true')
-   const entityUser = useSelector((state: any) => state.user)
    const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
+   const [status, setStatus] = useState<'true' | 'false'>(active == 'false' ? 'false' : 'true')
+   const entityUser = useSelector((state: any) => state.user)
    const [isModal, setModal] = useState(false)
    const [isVisibleEdit, setVisibleEdit] = useState(false)
-   const [data, setData] = useState<Props[]>([])
    const [search, setSearch] = useState('')
-   const [nameGroup, setNameGroup] = useState('')
    const [loadingSubmit, setLoadingSubmit] = useState(false)
    const [chooseData, setChooseData] = useState({ name: '', id: '', active: false, idGroup: '' })
    const [error, setError] = useState({
       name: false,
    });
+   const queryClient = useQueryClient()
    const [refreshing, setRefreshing] = useState(false)
    const [showDeleteModal, setShowDeleteModal] = useState(false)
 
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.positionUpdate)
 
-   async function handleLoad(loading: boolean) {
-      try {
-         setLoading(loading)
+   // TanStack Query for Positions
+   const {
+      data: queryData,
+      isLoading,
+      refetch
+   } = useQuery({
+      queryKey: ['positions', { status, search, group }],
+      queryFn: async () => {
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetPosition({ user: hasil, active: status, search: search, group: String(group) })
-         setData(response.data)
-         setNameGroup(response.filter.name)
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-      }
-   }
+         const response = await apiGetPosition({
+            user: hasil,
+            active: status,
+            search: search,
+            group: String(group)
+         })
+         return response;
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
+
+   const data = useMemo(() => queryData?.data || [], [queryData])
+   const nameGroup = useMemo(() => queryData?.filter?.name || "", [queryData])
 
    useEffect(() => {
-      handleLoad(false)
-   }, [update])
-
-
-   useEffect(() => {
-      handleLoad(true)
-   }, [status, search, group])
+      refetch()
+   }, [update, refetch])
 
 
    function handleChooseData(id: string, name: string, active: boolean, group: string) {
@@ -88,7 +91,7 @@ export default function Index() {
          const hasil = await decryptToken(String(token?.current))
          const response = await apiDeletePosition({ user: hasil, isActive: chooseData.active }, chooseData.id)
          dispatch(setUpdatePosition(!update))
-      } catch (error : any ) {
+      } catch (error: any) {
          console.error(error);
          const message = error?.response?.data?.message || "Gagal menghapus data"
 
@@ -110,7 +113,7 @@ export default function Index() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error : any ) {
+      } catch (error: any) {
          console.error(error);
          const message = error?.response?.data?.message || "Gagal mengubah data"
 
@@ -138,10 +141,11 @@ export default function Index() {
       handleEdit()
    }
 
+   const arrSkeleton = [0, 1, 2, 3, 4]
+
    const handleRefresh = async () => {
       setRefreshing(true)
-      handleLoad(false)
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      await queryClient.invalidateQueries({ queryKey: ['positions'] })
       setRefreshing(false)
    };
 
@@ -184,7 +188,7 @@ export default function Index() {
          </View>
          <View style={[Styles.flex2, Styles.mt10]}>
             {
-               loading ?
+               isLoading ?
                   arrSkeleton.map((item, index) => {
                      return (
                         <SkeletonTwoItem key={index} />