upd: caching data

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

components/home/chartDokumenHome.tsx

@@ -2,7 +2,8 @@ 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 { useMemo } from "react";
 import { Dimensions, View } from "react-native";
 import { BarChart } from "react-native-gifted-charts";
 import Skeleton from "../skeleton";
@@ -15,64 +16,44 @@ type Props = {
 }[]
 
 export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }) {
-   const [loading, setLoading] = useState(true)
    const { decryptToken, token } = useAuthSession()
    const { colors } = useTheme();
-   const [data, setData] = useState<Props>([])
-   const [maxValue, setMaxValue] = useState(5)
-   const [chartKey, setChartKey] = useState(0)
-   const barData = [
-      { value: 23, label: 'Gambar', frontColor: '#fac858' },
-      { value: 12, label: 'Dokumen', frontColor: '#92cc76' },
-   ];
    const width = Dimensions.get("window").width;
 
-
-   async function handleData(loading: boolean) {
-      try {
-         setLoading(loading)
+   // TanStack Query for Document Chart data
+   const { data: chartData = [], isLoading } = useQuery({
+      queryKey: ['homeData', 'dokumen'],
+      queryFn: async () => {
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "dokumen", user: hasil })
-         const maxVal = response.data.reduce((max: number, obj: { value: number; }) => Math.max(max, Number(obj.value)), 0);
-         const roundUp = maxVal > 0 ? Math.ceil(maxVal / 10) * 10 : 10;
-         setMaxValue(roundUp)
-         const convertedArray = response.data.map((item: { color: any; label: any; value: any; }) => ({
+         return response.data.map((item: { color: any; label: any; value: any; }) => ({
             frontColor: item.color,
             label: item.label,
             value: Number(item.value)
-         }));
-         setData(convertedArray)
-         setChartKey((prev: number) => prev + 1)
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-      }
-   }
+         })) as Props
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
 
-   useEffect(() => {
-      if (refreshing) {
-         handleData(false)
-      }
-   }, [refreshing]);
-
-   useEffect(() => {
-      handleData(true)
-   }, []);
+   // Derived state for maxValue
+   const maxValue = useMemo(() => {
+      const maxVal = chartData.reduce((max: number, obj: { value: number; }) => Math.max(max, obj.value), 0);
+      return maxVal > 0 ? Math.ceil(maxVal / 10) * 10 : 10;
+   }, [chartData]);
 
    return (
       <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
          <Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
          {
-            loading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
+            isLoading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
                :
                <BarChart
-                  key={chartKey}
                   showFractionalValues={false}
                   showYAxisIndices
                   noOfSections={4}
                   maxValue={maxValue}
-                  data={data}
+                  data={chartData}
                   isAnimated
                   width={width - 140}
                   barWidth={width * 0.25}
@@ -92,7 +73,6 @@ export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }
                   }}
                />
          }
-
       </View>
    )
 }