Files
mobile-darmasaba/components/home/discussionHome.tsx
amaliadwiy ccf8ee1caf upd: caching data
Deskripsi:
- update caching pada fitur utama -yg fitur divisi belom
2026-04-20 14:23:14 +08:00

59 lines
2.2 KiB
TypeScript

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 { View } from "react-native";
import DiscussionItem from "../discussionItem";
import Skeleton from "../skeleton";
import Text from "../Text";
type Props = {
id: string
idDivision: string
desc: string
title: string
date: string
user: string
}
export default function DisccussionHome({ refreshing }: { refreshing: boolean }) {
const { decryptToken, token } = useAuthSession()
const { colors } = useTheme();
// 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 })
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]}>
{
isLoading ?
<>
<Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
<Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
</>
:
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}`) }} />
)
})
: <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada diskusi</Text>
}
</View>
</View>
)
}