From 12b12be39e418da62fb02b0da02e311b7b660b32 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Wed, 16 Oct 2024 15:41:02 +0800
Subject: [PATCH] upd: divisi

Deskripsi:
- realtime create divisi

No Issues
---
 src/module/division_new/ui/list_division.tsx | 205 +++++++++++--------
 1 file changed, 117 insertions(+), 88 deletions(-)

diff --git a/src/module/division_new/ui/list_division.tsx b/src/module/division_new/ui/list_division.tsx
index 0a0a257..da33735 100644
--- a/src/module/division_new/ui/list_division.tsx
+++ b/src/module/division_new/ui/list_division.tsx
@@ -1,18 +1,18 @@
 'use client'
-import { currentScroll, globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
+import { currentScroll, globalNotifPage, globalRole, LayoutDrawer, LayoutNavbarNew, ReloadButtonTop, SkeletonList, TEMA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import _ from 'lodash';
 import { useRouter, useSearchParams } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
 import { HiMenu } from 'react-icons/hi';
 import { HiMagnifyingGlass, HiMiniUserGroup, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
 import { MdAccountCircle } from 'react-icons/md';
-import DrawerDivision from './drawer_division';
-import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import { IDataDivison } from '../lib/type_division';
 import { funGetAllDivision } from '../lib/api_division';
-import toast from 'react-hot-toast';
-import { useHookstate } from '@hookstate/core';
-import _ from 'lodash';
+import { IDataDivison } from '../lib/type_division';
+import DrawerDivision from './drawer_division';
 
 export default function ListDivision() {
   const [isList, setIsList] = useState(false)
@@ -29,8 +29,9 @@ export default function ListDivision() {
   const tema = useHookstate(TEMA)
   const { value: containerRef } = useHookstate(currentScroll);
   const [isPage, setPage] = useState(1)
-
   const paddingLift = useMediaQuery('(max-width: 505px)')
+  const [isRefresh, setRefresh] = useState(false)
+  const notifLoadPage = useHookstate(globalNotifPage)
 
 
   const handleList = () => {
@@ -39,21 +40,23 @@ export default function ListDivision() {
 
   const fetchData = async (loading: boolean) => {
     try {
-      if (loading)
-        setLoading(true);
+      
+      setLoading(loading);
+      if (isPage == 1) {
+        setData([])
+      }
       const response = await funGetAllDivision('?search=' + searchQuery + '&group=' + group + '&page=' + isPage)
       if (response.success) {
         setJumlah(response.total)
         setNameGroup(response.filter.name)
         if (isPage == 1) {
           setData(response.data)
-        }else{
-          setData([...data, ...response.data])
+        } else {
+          setData((data) => [...data, ...response.data])
         }
       } else {
         toast.error(response.message);
       }
-      setLoading(false);
     } catch (error) {
       toast.error("Gagal mendapatkan divisi, coba lagi nanti");
       console.error(error);
@@ -74,28 +77,46 @@ export default function ListDivision() {
 
   useShallowEffect(() => {
     fetchData(false)
- }, [isPage])
+  }, [isPage])
 
- useEffect(() => {
-  const handleScroll = async () => {
-     if (containerRef && containerRef.current) {
+  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)
+          setPage(isPage + 1)
         }
-     }
-  };
+      }
+    };
 
-  const container = containerRef?.current;
-  container?.addEventListener("scroll", handleScroll);
+    const container = containerRef?.current;
+    container?.addEventListener("scroll", handleScroll);
 
-  return () => {
-     container?.removeEventListener("scroll", handleScroll);
-  };
-}, [containerRef, isPage]);
+    return () => {
+      container?.removeEventListener("scroll", handleScroll);
+    };
+  }, [containerRef, isPage]);
+
+  useShallowEffect(() => {
+    if (notifLoadPage.get().category == 'division' && notifLoadPage.get().load == true) {
+      setRefresh(true)
+    }
+  }, [notifLoadPage.get().load])
+
+  function onRefresh() {
+    notifLoadPage.set({
+      category: '',
+      load: false
+    })
+    setRefresh(false)
+    setPage(1)
+    setTimeout(() => {
+      fetchData(false)
+    }, 500)
+  }
 
 
   return (
@@ -109,6 +130,14 @@ export default function ListDivision() {
         } />
 
       <Box p={20}>
+        {
+          isRefresh &&
+          <ReloadButtonTop
+            onReload={() => { onRefresh() }}
+            title='UPDATE'
+          />
+
+        }
         <Grid justify='center' align='center'>
           <Grid.Col span={10}>
             <TextInput
@@ -139,12 +168,12 @@ export default function ListDivision() {
         </Grid>
         <Box pt={20}>
           {roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>}
-            <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
-              <Text fw={'bold'} c={tema.get().utama}>Total Divisi</Text>
-              <Flex justify={'center'} align={'center'} h={'100%'}>
-                <Text fz={40} fw={'bold'} c={tema.get().utama}>{jumlah}</Text>
-              </Flex>
-            </Box>
+          <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
+            <Text fw={'bold'} c={tema.get().utama}>Total Divisi</Text>
+            <Flex justify={'center'} align={'center'} h={'100%'}>
+              <Text fz={40} fw={'bold'} c={tema.get().utama}>{jumlah}</Text>
+            </Flex>
+          </Box>
         </Box>
         {isList ? (
           <Box pt={20}>
@@ -153,66 +182,66 @@ export default function ListDivision() {
                 .fill(null)
                 .map((_, i) => (
                   <Box key={i}>
-                    <SkeletonList/>
+                    <SkeletonList />
                   </Box>
                 ))
               :
               _.isEmpty(data)
-              ?
-              <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
-                <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Divisi</Text>
-              </Box>
-              :
-              data?.map((v: any, i: any) => {
-                return (
-                  <Box key={i}>
-                    <Grid align='center' onClick={() => router.push(`/division/${v.id}`)}>
-                      <Grid.Col span={{
-                        base: 1,
-                        xs: 1,
-                        sm: 1,
-                        md: 1,
-                        lg: 1,
-                        xl: 1
-                      }}>
-                        <Group >
-                          <Center>
-                            <ActionIcon
-                              variant="gradient"
-                              size={50}
-                              aria-label="Gradient action icon"
-                              radius={100}
-                              bg={tema.get().bgFiturHome}
-                            >
-                              <HiMiniUserGroup size={25} color={tema.get().utama} />
-                            </ActionIcon>
-                          </Center>
-                        </Group>
-                      </Grid.Col>
-                      <Grid.Col span={{
-                        base: 11,
-                        xs: 11,
-                        sm: 11,
-                        md: 11,
-                        lg: 11,
-                        xl: 11,
-                      }}>
-                        <Box>
-                          <Box w={{
-                            base: 280,
-                            xl: 430
-                          }}>
-                            <Text truncate="end" pl={paddingLift ? 30 : 20}>
-                              {v.name}
-                            </Text>
+                ?
+                <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
+                  <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Divisi</Text>
+                </Box>
+                :
+                data?.map((v: any, i: any) => {
+                  return (
+                    <Box key={i}>
+                      <Grid align='center' onClick={() => router.push(`/division/${v.id}`)}>
+                        <Grid.Col span={{
+                          base: 1,
+                          xs: 1,
+                          sm: 1,
+                          md: 1,
+                          lg: 1,
+                          xl: 1
+                        }}>
+                          <Group >
+                            <Center>
+                              <ActionIcon
+                                variant="gradient"
+                                size={50}
+                                aria-label="Gradient action icon"
+                                radius={100}
+                                bg={tema.get().bgFiturHome}
+                              >
+                                <HiMiniUserGroup size={25} color={tema.get().utama} />
+                              </ActionIcon>
+                            </Center>
+                          </Group>
+                        </Grid.Col>
+                        <Grid.Col span={{
+                          base: 11,
+                          xs: 11,
+                          sm: 11,
+                          md: 11,
+                          lg: 11,
+                          xl: 11,
+                        }}>
+                          <Box>
+                            <Box w={{
+                              base: 280,
+                              xl: 430
+                            }}>
+                              <Text truncate="end" pl={paddingLift ? 30 : 20}>
+                                {v.name}
+                              </Text>
+                            </Box>
                           </Box>
-                        </Box>
-                      </Grid.Col>
-                    </Grid>
-                    <Divider my="sm" />
-                  </Box>
-                );
-              })
+                        </Grid.Col>
+                      </Grid>
+                      <Divider my="sm" />
+                    </Box>
+                  );
+                })
             }
           </Box>
         ) : (