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 />
</Group>
</Box>
<Box pt={20} mb={60}>
<Box pt={20} mb={100}>
<Text c={tema.get().utama} mb={10}>Divisi Terpilih</Text>
{(memberGroup.length === 0) ? (
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>

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

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