upd: apaa aja aku lupa

src/module/division_new/components/ui/navbar_division.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { API_ADDRESS, LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
 import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Text, TextInput, Title } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -7,49 +7,39 @@ import { HiMenu } from 'react-icons/hi';
 import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiMiniUserGroup, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
 import { MdAccountCircle } from 'react-icons/md';
 import DrawerDivision from './drawer_division';
+import { useShallowEffect } from '@mantine/hooks';
 
-const dataDivisi = [
-  {
-    id: 1,
-    title: 'DIVISI 1',
-    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-  },
-  {
-    id: 2,
-    title: 'DIVISI 2',
-    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-  },
-  {
-    id: 3,
-    title: 'DIVISI 3',
-    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-  },
-  {
-    id: 4,
-    title: 'DIVISI 4',
-    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-  },
-  {
-    id: 5,
-    title: 'DIVISI5',
-    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-  },
-  {
-    id: 6,
-    title: 'DIVISI 6',
-    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
-  },
-]
+type TypeDivision = {
+  id: string
+  name: string
+  idGroup: string
+  idVillage: string
+  desc: string
+  isActive: boolean
+}[]
 
 export default function NavbarDivision() {
   const [isList, setIsList] = useState(false)
   const router = useRouter()
   const [openDrawer, setOpenDrawer] = useState(false)
+  const [data, setData] = useState<TypeDivision>()
+  const [jumlah, setJumlah] = useState(0)
 
   const handleList = () => {
     setIsList(!isList)
   }
 
+  async function loadData() {
+    const response = await fetch(API_ADDRESS.apiGetAllDivision)
+    const data = await response.json()
+    setData(data)
+    setJumlah(data.length)
+  }
+
+  useShallowEffect(() => {
+    loadData()
+  }, [])
+
   return (
     <Box>
       <LayoutNavbarNew back='/home' title='Divisi'
@@ -87,13 +77,13 @@ export default function NavbarDivision() {
           <Box bg={WARNA.biruTua} p={10} style={{ borderRadius: 10 }}>
             <Text fw={'bold'} c={'white'}>Total Divisi</Text>
             <Flex justify={'center'} align={'center'} h={'100%'}>
-              <Text fz={40} fw={'bold'} c={'white'}>35</Text>
+              <Text fz={40} fw={'bold'} c={'white'}>{jumlah}</Text>
             </Flex>
           </Box>
         </Box>
         {isList ? (
           <Box pt={20}>
-            {dataDivisi.map((v, i) => {
+            {data?.map((v: any, i: any) => {
               return (
                 <Box key={i}>
                   <Group justify="space-between" mb={10} onClick={() => router.push(`/division/${v.id}`)}>
@@ -113,7 +103,7 @@ export default function NavbarDivision() {
                           <HiMiniUserGroup size={25} color={WARNA.biruTua} />
                         </ActionIcon>
                       </Center>
-                      <Text>{v.title}</Text>
+                      <Text>{v.name}</Text>
                     </Group>
                   </Group>
                   <Divider my="sm" />
@@ -123,19 +113,19 @@ export default function NavbarDivision() {
           </Box>
         ) : (
           <Box pt={20}>
-            {dataDivisi.map((v, i) => {
+            {data?.map((v: any, i: any) => {
               return (
                 <Box key={i} mb={20}>
                   <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
                     <Card.Section>
                       <Box h={120} bg={WARNA.biruTua}>
                         <Flex justify={'center'} align={'center'} h={"100%"}>
-                          <Title order={3} c={"white"}>{v.title}</Title>
+                          <Title order={3} c={"white"}>{v.name}</Title>
                         </Flex>
                       </Box>
                     </Card.Section>
                     <Box pt={10}>
-                      <Text>{v.description}</Text>
+                      <Text>{v.desc}</Text>
                       <Group align='center' pt={10} justify='flex-end'>
                         <Avatar.Group>
                           <Avatar>
@@ -153,7 +143,7 @@ export default function NavbarDivision() {
         )}
       </Box>
       <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
-        <DrawerDivision/>
+        <DrawerDivision />
       </LayoutDrawer>
     </Box>
   );