upd: divisi

Deskripsi:
- realtime create divisi

No Issues

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 { IDataDivison } from '../lib/type_division';
-import { useHookstate } from '@hookstate/core';
+import DrawerDivision from './drawer_division';
-import _ from 'lodash';
 
 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{
+        } else {
-          setData([...data, ...response.data])
+          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);
@@ -95,7 +98,25 @@ export default function ListDivision() {
     return () => {
       container?.removeEventListener("scroll", handleScroll);
     };
-}, [containerRef, isPage]);
+  }, [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
@@ -153,7 +182,7 @@ export default function ListDivision() {
                 .fill(null)
                 .map((_, i) => (
                   <Box key={i}>
-                    <SkeletonList/>
+                    <SkeletonList />
                   </Box>
                 ))
               :