From c0246943ecd2d7e4791a8e2db01a985d0723b4c0 Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Fri, 20 Sep 2024 17:34:11 +0800
Subject: [PATCH] style : notification

---
 .../announcement/ui/create_announcement.tsx   |   2 +-
 src/module/home/ui/list_notification.tsx      | 323 ++++++++++--------
 2 files changed, 184 insertions(+), 141 deletions(-)

diff --git a/src/module/announcement/ui/create_announcement.tsx b/src/module/announcement/ui/create_announcement.tsx
index 128f393..4e25c7c 100644
--- a/src/module/announcement/ui/create_announcement.tsx
+++ b/src/module/announcement/ui/create_announcement.tsx
@@ -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>
diff --git a/src/module/home/ui/list_notification.tsx b/src/module/home/ui/list_notification.tsx
index be7bfe5..29a4c3e 100644
--- a/src/module/home/ui/list_notification.tsx
+++ b/src/module/home/ui/list_notification.tsx
@@ -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>
   );
 }
-