upd: notifikasi

Deskripsi:
- jumlah notifikasi
- nama desa di page home
- masang notifikasi pada project dan pengumuman

No Issues

src/module/home/lib/api_notification.ts

@@ -0,0 +1,13 @@
+export const funGetAllNotification = async (path?: string) => {
+   const response = await fetch(`/api/home/notification${(path) ? path : ''}`, { next: { tags: ['notification'] } });
+   return await response.json().catch(() => null);
+}
+
+
+export const funReadNotification = async (data: { id: string }) => {
+   const response = await fetch(`/api/home/notification`, {
+      method: "PUT",
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
+}

src/module/home/lib/api_search.ts

@@ -1,5 +1,3 @@
-
-
 export const funGetSearchAll = async (path?: string) => {
     const response = await fetch(`/api/home/search${(path) ? path : ''}`, { next: { tags: ['search'] } });
     return await response.json().catch(() => null);

src/module/home/lib/type_notification.ts

@@ -0,0 +1,9 @@
+export interface IListNotification {
+   id: string
+   title: string
+   desc: string
+   category: string
+   idContent: string
+   isRead: boolean
+   createdAt: string
+}

src/module/home/ui/header_home.tsx

@@ -0,0 +1,70 @@
+'use client'
+import { LayoutNavbarHome, TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box, Group, Indicator, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from "react-icons/hi2";
+import { funGetHome } from "../lib/api_home";
+import { useShallowEffect } from "@mantine/hooks";
+
+export default function HeaderHome() {
+   const router = useRouter()
+   const tema = useHookstate(TEMA)
+   const [isDesa, setDesa] = useState("")
+   const [isNotif, setNotif] = useState(0)
+
+
+   const fetchData = async () => {
+      try {
+         const response = await funGetHome('?cat=header')
+         if (response.success) {
+            setDesa(response.data.village)
+            setNotif(response.data.totalNotif)
+         } else {
+            toast.error(response.message);
+         }
+      } catch (error) {
+         toast.error("Gagal mendapatkan data, coba lagi nanti");
+         console.error(error);
+      }
+   };
+
+
+   useShallowEffect(() => {
+      fetchData();
+   }, []);
+
+
+   return (
+      <LayoutNavbarHome>
+         <Group justify='space-between'>
+            <Text fw={'bold'} c={'white'}>{isDesa}</Text>
+            <Box>
+               <Group>
+                  <ActionIcon onClick={() => router.push('/home?cat=search')} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
+                     <HiMagnifyingGlass size={20} color='white' />
+                  </ActionIcon>
+                  {
+                     isNotif > 0 ?
+                        <Indicator inline label={isNotif} size={18} color={"red"} offset={3}>
+                           <ActionIcon onClick={() => router.push('/home?cat=notification')} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
+                              <HiOutlineBell size={20} color='white' />
+                           </ActionIcon>
+                        </Indicator>
+                        :
+                        <ActionIcon onClick={() => router.push('/home?cat=notification')} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
+                           <HiOutlineBell size={20} color='white' />
+                        </ActionIcon>
+                  }
+
+                  <ActionIcon onClick={() => router.push('/profile')} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
+                     <HiOutlineUser size={20} color='white' />
+                  </ActionIcon>
+               </Group>
+            </Box>
+         </Group>
+      </LayoutNavbarHome>
+   )
+}

src/module/home/ui/icon_navbar.tsx

@@ -1,30 +0,0 @@
-"use client"
-import { TEMA, WARNA } from '@/module/_global';
-import { useHookstate } from '@hookstate/core';
-import { ActionIcon, Box, Group, Indicator, Text } from '@mantine/core';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from 'react-icons/hi2';
-
-export default function IconNavbar() {
-  const router = useRouter()
-  const tema = useHookstate(TEMA)
-  return (
-    <Box>
-      <Group>
-        <ActionIcon onClick={() => router.push('/home?cat=search')} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
-          <HiMagnifyingGlass size={20} color='white' />
-        </ActionIcon>
-        <Indicator inline label={"9"} size={18} color={"red"} offset={3}>
-        <ActionIcon onClick={() => router.push('/home?cat=notification')} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
-            <HiOutlineBell size={20} color='white' />
-        </ActionIcon>
-          </Indicator>
-        <ActionIcon onClick={() => router.push('/profile')} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
-          <HiOutlineUser size={20} color='white' />
-        </ActionIcon>
-      </Group>
-    </Box>
-  );
-}
-

src/module/home/ui/list_notification.tsx

@@ -1,11 +1,14 @@
 "use client"
-import { TEMA, WARNA } from '@/module/_global';
+import { currentScroll, TEMA, WARNA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
-import { ActionIcon, Box, Center, Grid, Group, Spoiler, Text } from '@mantine/core';
-import { useMediaQuery } from '@mantine/hooks';
+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 from 'react';
+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 = [
   {
@@ -67,38 +70,125 @@ const dataNotification = [
 
 export default function ListNotification() {
   const router = useRouter()
-  const isMobile = useMediaQuery('(max-width: 369px)');
+  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)
+
+  async function fetchData(loading: boolean) {
+    try {
+      if (loading)
+        setLoading(true)
+      const res = await funGetAllNotification('?page=' + isPage)
+      if (res.success) {
+        if (isPage == 1) {
+          setData(res.data)
+        } else {
+          setData([...isData, ...res.data])
+        }
+
+      } else {
+        toast.error(res.message)
+      }
+    } catch (error) {
+      console.error(error)
+      toast.error("Gagal memuat data, coba lagi nanti")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useShallowEffect(() => {
+    fetchData(true)
+  }, [])
+
+  useShallowEffect(() => {
+    fetchData(false)
+  }, [isPage])
+
+  useEffect(() => {
+    const handleScroll = async () => {
+      if (containerRef && containerRef.current) {
+        const scrollTop = containerRef.current.scrollTop;
+        const containerHeight = containerRef.current.clientHeight;
+        const scrollHeight = containerRef.current.scrollHeight;
+
+        if (scrollTop + containerHeight >= scrollHeight) {
+          setPage(isPage + 1)
+        }
+
+      }
+    };
+
+    const container = containerRef?.current;
+    container?.addEventListener("scroll", handleScroll);
+    return () => {
+      container?.removeEventListener("scroll", handleScroll);
+    };
+  }, [containerRef, isPage]);
+
+
+
+  async function onReadNotif(category: string, idContent: string, idData: string) {
+    try {
+      const response = await funReadNotification({ id: idData })
+      if (response.success) {
+        router.push(`/${category}/${idContent}`)
+      } else {
+        toast.error(response.message)
+      }
+    } catch (error) {
+      console.error(error)
+      toast.error("Gagal memuat data, coba lagi nanti")
+    }
+  }
+
+
+
   return (
     <Box>
-      {dataNotification.map((v, i) => {
-        return (
-          <Box key={i} my={15}>
-            <Box style={{
-              border: `1px solid ${tema.get().utama}`,
-              padding: 20,
-              borderRadius: 15
-            }} >
-              <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
+      {
+        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)
+                  }}
                 >
-                <Text fw={'bold'} fz={isMobile ? 16 : 18} lineClamp={1}>{v.title}</Text>
+                  <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
+                      }}
+                    >
+                      <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>
                 </Box>
-              </Group>
-              <Spoiler maxHeight={60} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
-                <Text mt={10} fz={15}>{v.description}</Text>
-              </Spoiler>
-            </Box>
-          </Box>
-        )
-      })}
+              </Box>
+            )
+          })
+      }
+      { }
     </Box>
   );
 }

src/module/home/ui/view_home.tsx

@@ -1,30 +1,23 @@
 "use client"
-import { LayoutNavbarHome, NotificationCustome, ReloadButtonTop, TEMA, WARNA } from '@/module/_global';
-import { Box, Group, Notification, Stack, Text } from '@mantine/core';
-import React, { useState } from 'react';
+import { ReloadButtonTop } from '@/module/_global';
+import { Box, Stack } from '@mantine/core';
+import React from 'react';
 import Carosole from './carosole';
 import Features from './features';
-import IconNavbar from './icon_navbar';
 import ListProjects from './list_project';
 import ListDivisi from './list_divisi';
 import ListDiscussion from './list_discussion';
 import ListEventHome from './list_event';
 import ChartProgressHome from './chart_progress_tugas';
 import ChartDocumentHome from './chart_document';
-import { useHookstate } from '@hookstate/core';
+import HeaderHome from './header_home';
 
 
 export default function ViewHome() {
-  const tema = useHookstate(TEMA)
 
   return (
     <>
-      <LayoutNavbarHome>
-        <Group justify='space-between'>
-          <Text fw={'bold'} c={'white'}>Perbekel Darmasaba</Text>
-          <IconNavbar />
-        </Group>
-      </LayoutNavbarHome>
+      <HeaderHome />
       <ReloadButtonTop
         onReload={
           () => {