wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : notification

Browse Source
This commit is contained in:
lukman
2024-09-20 17:34:11 +08:00
parent 2b89518e4f
commit c0246943ec
2 changed files with 184 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/module/announcement/ui/create_announcement.tsx
View File

@@ -144,7 +144,7 @@ export default function CreateAnnouncement() {
<IoIosArrowForward /> <IoIosArrowForward />
</Group> </Group>
</Box> </Box>
<Box pt={20} mb={60}> <Box pt={20} mb={100}>
<Text c={tema.get().utama} mb={10}>Divisi Terpilih</Text> <Text c={tema.get().utama} mb={10}>Divisi Terpilih</Text>
{(memberGroup.length === 0) ? ( {(memberGroup.length === 0) ? (
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>

309
src/module/home/ui/list_notification.tsx
View File

@@ -1,112 +1,66 @@
"use client" "use client";
import { currentScroll, TEMA, WARNA } from '@/module/_global'; import { currentScroll, TEMA, WARNA } from "@/module/_global";
import { useHookstate } from '@hookstate/core'; import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Center, Flex, Grid, Group, Spoiler, Text } from '@mantine/core'; import {
import { useMediaQuery, useShallowEffect } from '@mantine/hooks'; ActionIcon,
import { useRouter } from 'next/navigation'; Box,
import React, { useEffect, useState } from 'react'; Center,
import { FaBell } from 'react-icons/fa6'; Flex,
import { IListNotification } from '../lib/type_notification'; Grid,
import { funGetAllNotification, funReadNotification } from '../lib/api_notification'; Group,
import toast from 'react-hot-toast'; Skeleton,
Spoiler,
const dataNotification = [ Text,
{ } from "@mantine/core";
id: 1, import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
title: 'Rapat Kamis Kamis Kamis Kamis Kamis Kamis Kamis Kamis ', import { useRouter } from "next/navigation";
description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file', import React, { useEffect, useState } from "react";
}, import { FaBell } from "react-icons/fa6";
{ import { IListNotification } from "../lib/type_notification";
id: 2, import {
title: 'Rapat Jumat', funGetAllNotification,
description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file', funReadNotification,
}, } from "../lib/api_notification";
{ import toast from "react-hot-toast";
id: 3,
title: 'Rapat Senin',
description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
},
{
id: 4,
title: 'Rapat Selasa',
description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
},
]
export default function ListNotification() { export default function ListNotification() {
const router = useRouter() const router = useRouter();
const isMobile = useMediaQuery('(max-width: 369px)') const isMobile = useMediaQuery("(max-width: 369px)");
const [isData, setData] = useState<IListNotification[]>([]) const isMobile2 = useMediaQuery("(max-width: 575px)");
const tema = useHookstate(TEMA) const [isData, setData] = useState<IListNotification[]>([]);
const { value: containerRef } = useHookstate(currentScroll) const tema = useHookstate(TEMA);
const [isPage, setPage] = useState(1) const { value: containerRef } = useHookstate(currentScroll);
const [loading, setLoading] = useState(true) const [isPage, setPage] = useState(1);
const [loading, setLoading] = useState(true);
async function fetchData(loading: boolean) { async function fetchData(loading: boolean) {
try { try {
if (loading) if (loading) setLoading(true);
setLoading(true) const res = await funGetAllNotification("?page=" + isPage);
const res = await funGetAllNotification('?page=' + isPage)
if (res.success) { if (res.success) {
if (isPage == 1) { if (isPage == 1) {
setData(res.data) setData(res.data);
} else { } else {
setData([...isData, ...res.data]) setData([...isData, ...res.data]);
} }
} else { } else {
toast.error(res.message) toast.error(res.message);
} }
} catch (error) { } catch (error) {
console.error(error) console.error(error);
toast.error("Gagal memuat data, coba lagi nanti") toast.error("Gagal memuat data, coba lagi nanti");
} finally { } finally {
setLoading(false) setLoading(false);
} }
} }
useShallowEffect(() => { useShallowEffect(() => {
fetchData(true) fetchData(true);
}, []) }, []);
useShallowEffect(() => { useShallowEffect(() => {
fetchData(false) fetchData(false);
}, [isPage]) }, [isPage]);
useEffect(() => { useEffect(() => {
const handleScroll = async () => { const handleScroll = async () => {
@@ -116,9 +70,8 @@ export default function ListNotification() {
const scrollHeight = containerRef.current.scrollHeight; const scrollHeight = containerRef.current.scrollHeight;
if (scrollTop + containerHeight >= scrollHeight) { if (scrollTop + containerHeight >= scrollHeight) {
setPage(isPage + 1) setPage(isPage + 1);
} }
} }
}; };
@@ -129,67 +82,157 @@ export default function ListNotification() {
}; };
}, [containerRef, isPage]); }, [containerRef, isPage]);
async function onReadNotif(
category: string,
async function onReadNotif(category: string, idContent: string, idData: string) { idContent: string,
idData: string
) {
try { try {
const response = await funReadNotification({ id: idData }) const response = await funReadNotification({ id: idData });
if (response.success) { if (response.success) {
router.push(`/${category}/${idContent}`) router.push(`/${category}/${idContent}`);
} else { } else {
toast.error(response.message) toast.error(response.message);
} }
} catch (error) { } catch (error) {
console.error(error) console.error(error);
toast.error("Gagal memuat data, coba lagi nanti") toast.error("Gagal memuat data, coba lagi nanti");
} }
} }
return ( return (
<Box> <Box>
{ {loading ? (
isData.length == 0 ? Array(6)
<Flex justify={"center"} align={'center'} h={"100%"}> .fill(null)
<Text ta={'center'} fz={14} c={'dimmed'} fs={"italic"}>Tidak ada notifikasi</Text> .map((_, i) => (
</Flex> <Box key={i} my={15}>
: <Skeleton height={110} radius={15} />
</Box>
))
) : (
<Box>
{isData.length == 0 ? (
<Box
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "60vh",
}}
>
<Text c="dimmed" ta={"center"} fs={"italic"}>
Tidak ada Notifikasi
</Text>
</Box>
) : (
isData.map((v, i) => { isData.map((v, i) => {
return ( return (
<Box key={i} my={15}> <Box key={i} my={10}>
<Box style={{
border: `1px solid ${tema.get().utama}`,
padding: 20,
borderRadius: 15
}}
onClick={() => {
onReadNotif(v.category, v.idContent, v.id)
}}
>
<Group align='center'>
<ActionIcon variant="light" bg={tema.get().utama} size={35} radius={100} aria-label="icon">
<FaBell size={20} color='white' />
</ActionIcon>
<Box <Box
w={{ style={{
base: isMobile ? 200 : 240, border: `1px solid ${v.isRead == false ? tema.get().utama : "gray"}`,
xl: 380 padding: 15,
borderRadius: 15,
}} }}
> >
<Text fw={'bold'} fz={isMobile ? 16 : 18} lineClamp={1}>{v.title}</Text> <Grid
</Box> align="center"
</Group> onClick={() => {
<Spoiler maxHeight={60} showLabel="Lebih banyak" hideLabel="Lebih sedikit"> onReadNotif(v.category, v.idContent, v.id);
<Text mt={10} fz={15}>{v.desc}</Text> }}
>
<Grid.Col
span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1,
}}
>
{/* <Center> */}
<ActionIcon
variant="light"
bg={v.isRead == false ? tema.get().utama : "gray"}
size={35}
radius={100}
aria-label="icon"
>
<FaBell
size={20}
color={v.isRead == false ? "white" : "white"}
/>
</ActionIcon>
{/* </Center> */}
</Grid.Col>
<Grid.Col
span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}
>
<Grid>
<Grid.Col
span={{
base: 7.5,
xl: 8,
}}
>
<Text
fw={"bold"}
c={v.isRead == false ? tema.get().utama : "gray"}
lineClamp={1}
pl={isMobile2 ? 20 : 10}
>
{v.title}
</Text>
</Grid.Col>
<Grid.Col
span={{
base: 4.5,
xl: 4,
}}
>
<Text
ta={"end"}
c={v.isRead == false ? tema.get().utama : "gray"}
fz={13}
>
{v.createdAt}
</Text>
</Grid.Col>
</Grid>
</Grid.Col>
</Grid>
<Spoiler
maxHeight={70}
showLabel="Lebih banyak"
hideLabel="Lebih sedikit"
>
<Text
mt={10}
fz={15}
c={v.isRead == false ? tema.get().utama : "gray"}
>
{v.desc}
</Text>
</Spoiler> </Spoiler>
</Box> </Box>
</Box> </Box>
) );
}) })
} )}
</Box>
)}
{} {}
</Box> </Box>
); );
} }