upd: caching data

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

components/home/chartProgresHome.tsx

@@ -2,7 +2,7 @@ import Styles from "@/constants/Styles";
 import { apiGetDataHome } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
-import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { View } from "react-native";
 import { PieChart } from "react-native-gifted-charts";
 import Skeleton from "../skeleton";
@@ -17,45 +17,32 @@ type Props = {
 export default function ChartProgresHome({ refreshing }: { refreshing: boolean }) {
    const { decryptToken, token } = useAuthSession()
    const { colors } = useTheme();
-   const [data, setData] = useState<Props>([])
-   const [loading, setLoading] = useState(true)
 
-   async function handleData(loading: boolean) {
-      try {
-         setLoading(loading)
+   // TanStack Query for Progress Chart data
+   const { data: chartData = [], isLoading } = useQuery({
+      queryKey: ['homeData', 'progress'],
+      queryFn: async () => {
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "progress", user: hasil })
-         const convertedArray = response.data.map((item: { color: any; text: any; value: any; }) => ({
+         return response.data.map((item: { color: any; text: any; value: any; }) => ({
             color: item.color,
             text: item.text,
             value: Number(item.value)
-         }));
-         setData(convertedArray)
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-      }
-   }
-
-   useEffect(() => {
-      if (refreshing)
-         handleData(false)
-   }, [refreshing]);
-
-   useEffect(() => {
-      handleData(true)
-   }, []);
+         })) as Props
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
 
    return (
       <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
          <Text style={[Styles.textSubtitle, Styles.mv15]}>PROGRES KEGIATAN</Text>
          {
-            loading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
+            isLoading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
                :
                <>
                   <PieChart
-                     data={data}
+                     data={chartData}
                      showText
                      showValuesAsTooltipText
                      textColor={'black'}