upd: caching data

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

components/home/eventHome.tsx

@@ -2,8 +2,8 @@ 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 { useEffect, useState } from "react";
 import { View } from "react-native";
 import EventItem from "../eventItem";
 import Skeleton from "../skeleton";
@@ -26,30 +26,18 @@ type Props = {
 export default function EventHome({ 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 Event data
+   const { data: homeEvents = [], isLoading } = useQuery({
+      queryKey: ['homeData', 'event'],
+      queryFn: async () => {
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "event", 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.mb15]}>
@@ -57,14 +45,14 @@ export default function EventHome({ refreshing }: { refreshing: boolean }) {
          <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
 
             {
-               loading ?
+               isLoading ?
                   <>
                      <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
                      <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
                   </>
                   :
-                  data.length > 0 ?
-                     data.map((item, index) => {
+                  homeEvents.length > 0 ?
+                     homeEvents.map((item: Props, index: number) => {
                         return (
                            <EventItem key={index} category={index % 2 == 0 ? 'purple' : 'orange'} onPress={() => { router.push(`/division/${item.idDivision}/calendar/${item.id}`) }} title={item.title} user={item.user_name} jamAwal={item.timeStart} jamAkhir={item.timeEnd} />
                         )