upd: read all notif

Deskripsi:
- update disable button saat tidak ada notifikasi yg blm terbaca

No Issues
This commit is contained in:
amel
2025-04-22 11:48:04 +08:00
parent e99f97e709
commit 2749fc2111

View File

@@ -2,14 +2,19 @@
import { TEMA } from '@/module/_global'; import { TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core'; import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useState } from 'react';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { LuCheckCheck } from 'react-icons/lu'; import { LuCheckCheck } from 'react-icons/lu';
import { funGetHome } from '../lib/api_home';
import { funReadAllNotification } from '../lib/api_notification'; import { funReadAllNotification } from '../lib/api_notification';
import { globalRefreshNotif } from '../lib/val_home'; import { globalRefreshNotif } from '../lib/val_home';
export default function DrawerNotification({ onDone }: { onDone: () => void }) { export default function DrawerNotification({ onDone }: { onDone: () => void }) {
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const reloadNotif = useHookstate(globalRefreshNotif) const reloadNotif = useHookstate(globalRefreshNotif)
const [disabled, setDisabled] = useState(false)
const [notif, setNotif] = useState(0)
async function handleReadAll() { async function handleReadAll() {
try { try {
@@ -28,18 +33,39 @@ export default function DrawerNotification({ onDone }: { onDone: () => void }) {
} }
} }
const fetchData = async () => {
try {
setDisabled(true)
const response = await funGetHome('?cat=header')
if (response.success) {
setNotif(response.data.totalNotif)
if (response.data.totalNotif > 0) {
setDisabled(false)
}
} else {
toast.error(response.message);
}
} catch (error) {
toast.error("Gagal mendapatkan data, coba lagi nanti");
console.error(error);
}
};
useShallowEffect(() => {
fetchData();
}, []);
return ( return (
<Box> <Box>
<Stack pt={10}> <Stack pt={10}>
<SimpleGrid <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
cols={{ base: 3, sm: 3, lg: 3 }} <Flex onClick={() => { !disabled && handleReadAll() }} justify={'center'} align={'center'} direction={'column'} >
>
<Flex onClick={() => { handleReadAll() }} justify={'center'} align={'center'} direction={'column'} >
<Box> <Box>
<LuCheckCheck size={30} color={tema.get().utama} /> <LuCheckCheck size={30} color={disabled ? 'gray' : tema.get().utama} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama} ta={"center"}>Tandai Dibaca Semua</Text> <Text c={disabled ? 'gray' : tema.get().utama} ta={"center"}>Tandai Dibaca Semua</Text>
</Box> </Box>
</Flex> </Flex>
</SimpleGrid> </SimpleGrid>