upd: caching data

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

components/home/projectHome.tsx

@@ -2,8 +2,9 @@ import Styles from "@/constants/Styles";
 import { apiGetDataHome } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
+import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { Dimensions, View } from "react-native";
 import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
 import LabelStatus from "../labelStatus";
@@ -25,45 +26,33 @@ export default function ProjectHome({ refreshing }: { refreshing: boolean }) {
    const { decryptToken, token } = useAuthSession()
    const ref = React.useRef<ICarouselInstance>(null);
    const width = Dimensions.get("window").width;
-   const [data, setData] = useState<Props[]>([])
-   const [loading, setLoading] = useState(true)
    const { colors } = useTheme();
 
-   async function handleData(loading: boolean) {
-      try {
-         setLoading(loading)
+   // TanStack Query for Projects data
+   const { data: homeProjects = [], isLoading } = useQuery({
+      queryKey: ['homeData', 'kegiatan'],
+      queryFn: async () => {
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "kegiatan", user: hasil })
-         setData(response.data)
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-      }
-   }
-
-   useEffect(() => {
-      if (refreshing)
-         handleData(false)
-   }, [refreshing]);
-
-   useEffect(() => {
-      handleData(true)
-   }, []);
+         return response.data as Props[]
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
 
    return (
       <View style={[Styles.mb05]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mb10]}>Kegiatan Terupdate</Text>
          {
-            loading ? (<Skeleton width={100} height={150} borderRadius={10} widthType="percent" />)
+            isLoading ? (<Skeleton width={100} height={150} borderRadius={10} widthType="percent" />)
                :
-               data.length > 0 ?
+               homeProjects.length > 0 ?
                   <Carousel
                      ref={ref}
                      style={{ width: "100%" }}
                      width={width * 0.8}
                      height={220}
-                     data={data}
+                     data={homeProjects}
                      loop={false}
                      autoPlay={false}
                      autoPlayReverse={false}
@@ -71,24 +60,24 @@ export default function ProjectHome({ refreshing }: { refreshing: boolean }) {
                      snapEnabled={true}
                      vertical={false}
                      renderItem={({ index }) => (
-                        <PaperGridContent titleTail={1} content="carousel" onPress={() => { router.push(`/project/${data[index].id}`) }} title={data[index].title} headerColor="primary">
-                           <ProgressBar value={data[index].progress} category="carousel" />
+                        <PaperGridContent titleTail={1} content="carousel" onPress={() => { router.push(`/project/${homeProjects[index].id}`) }} title={homeProjects[index].title} headerColor="primary">
+                           <ProgressBar value={homeProjects[index].progress} category="carousel" />
                            <View style={[Styles.rowSpaceBetween]}>
-                              <Text style={[Styles.textDefault, { color: colors.dimmed }]}>{data[index].createdAt}</Text>
+                              <Text style={[Styles.textDefault, { color: colors.dimmed }]}>{homeProjects[index].createdAt}</Text>
                               <LabelStatus
                                  size="default"
                                  category={
-                                    data[index].status === 0 ? 'secondary' :
-                                       data[index].status === 1 ? 'warning' :
-                                          data[index].status === 2 ? 'success' :
-                                             data[index].status === 3 ? 'error' :
+                                    homeProjects[index].status === 0 ? 'secondary' :
+                                       homeProjects[index].status === 1 ? 'warning' :
+                                          homeProjects[index].status === 2 ? 'success' :
+                                             homeProjects[index].status === 3 ? 'error' :
                                                 'secondary'
                                  }
                                  text={
-                                    data[index].status === 0 ? 'SEGERA' :
-                                       data[index].status === 1 ? 'DIKERJAKAN' :
-                                          data[index].status === 2 ? 'SELESAI' :
-                                             data[index].status === 3 ? 'DIBATALKAN' :
+                                    homeProjects[index].status === 0 ? 'SEGERA' :
+                                       homeProjects[index].status === 1 ? 'DIKERJAKAN' :
+                                          homeProjects[index].status === 2 ? 'SELESAI' :
+                                             homeProjects[index].status === 3 ? 'DIBATALKAN' :
                                                 'SEGERA'
                                  }
                               />