upd: caching data

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

components/home/discussionHome.tsx

@@ -1,13 +1,13 @@
 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 DiscussionItem from "../discussionItem";
 import Skeleton from "../skeleton";
 import Text from "../Text";
-import { useTheme } from "@/providers/ThemeProvider";
 
 type Props = {
    id: string
@@ -20,46 +20,33 @@ type Props = {
 
 export default function DisccussionHome({ refreshing }: { refreshing: boolean }) {
    const { decryptToken, token } = useAuthSession()
-   const [data, setData] = useState<Props[]>([])
-   const [loading, setLoading] = useState(true)
    const { colors } = useTheme();
 
-
-   async function handleData(loading: boolean) {
-      try {
-         setLoading(loading)
+   // TanStack Query for Discussion data
+   const { data: homeDiscussions = [], isLoading } = useQuery({
+      queryKey: ['homeData', 'discussion'],
+      queryFn: async () => {
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "discussion", 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]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
          <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0]}>
             {
-               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) => {
+                  homeDiscussions.length > 0 ?
+                     homeDiscussions.map((item: Props, index: number) => {
                         return (
                            <DiscussionItem key={index} title={item.desc} user={item.user} date={item.date} onPress={() => { router.push(`/division/${item.idDivision}/discussion/${item.id}`) }} />
                         )