Api Create Yang Lain Belum

src/module/banner/ui/list_banner.tsx

@@ -1,18 +1,20 @@
 'use client'
-import { LayoutDrawer, LayoutModalViewFile, TEMA, WARNA } from '@/module/_global';
+import { currentScroll, LayoutDrawer, LayoutModalViewFile, TEMA, WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
-import { ActionIcon, Anchor, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { ActionIcon, Anchor, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6';
+import { IDataBanner } from '../lib/type_banner';
+import toast from 'react-hot-toast';
+import { useShallowEffect } from '@mantine/hooks';
+import { funDeleteBanner, funGetAllBanner, funGetOneBanner } from '../lib/api_banner';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
 
 function ListBanner() {
+  const [isList, setIsList] = useState (false)
   const tema = useHookstate(TEMA)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [loading, setLoading] = useState(true);
-  const [isData, setData] = useState([]);
-  const [valChoose, setValChoose] = useState("");
   const router = useRouter();
   const param = useParams<{ id: string }>()
   const [isOpenModalView, setOpenModalView] = useState(false)
@@ -20,14 +22,99 @@ function ListBanner() {
   const [openDrawer, setOpenDrawer] = useState(false);
   const [idDataStorage, setIdDataStorage] = useState('')
   const [isExtension, setExtension] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [isData, setData] = useState<IDataBanner[]>([])
+  const [idData, setIdData] = useState('')
+  const [isPage, setPage] = useState(1)
+  const [searchQuerry, setSearchQuerry] = useState('')
+  // const { value: containerRef } = useHookstate(currentScroll);
   
+  const handleList = () => {
+    setIsList(!isList)
+  }
+
+  const fetchData = async (loading: boolean) => {
+    console.log('jallan')
+    try {
+      if (loading)
+        setLoading(true)
+      const response = await funGetAllBanner('?search=' + searchQuerry)
+      if (response.success) {
+        setData(response.data)
+      } else {
+        toast.error(response.message)
+      }
+      setLoading(false)
+    } catch (error) {
+      console.error(error)
+      toast.error("Gagal mendapatkan banner, coba lagi nanti");
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function searchBanner(search: string) {
+    setSearchQuerry(search)
+    setPage(1)
+  }
+  
+  
+  useShallowEffect(() => {
+    fetchData(true)
+  }, [searchQuerry])
+
+  useShallowEffect(() => {
+    fetchData(false)
+  }, [isPage])
+
+
+  async function onDelete() {
+    try {
+      const res = await funDeleteBanner(idData);
+      if (res.success) {
+        toast.success(res.message)
+        getOneData()
+        setIdData("")
+        setIdDataStorage("")
+        setOpenDrawer(false)
+      } else {
+        toast.error(res.message);
+      } 
+    } catch (error) {
+        console.error(error);
+        toast.error("Gagal menghapus banner, coba lagi nanti");
+      }
+       
+    }
+  
+
+ 
  
   return (
     <Box pt={2}>
+      <Box p={20}>
+        <TextInput
+          styles={{
+            input: {
+              color: tema.get().utama,
+              borderRadius: '#A3A3A3',
+              borderColor: '#A3A3A3',
+          },
+          }}
+          size='md'
+          radius={30}
+          leftSection={<HiMagnifyingGlass size={20} />}
+          placeholder='pencarian'
+          value={searchQuerry}
+          onChange={(val) => { searchBanner(val.target.value)}}
+        />
+
+      </Box>
+      
       <Box p={20}>
         <Anchor underline='never'>
           <Stack align='center' justify='center'>
-            {[...Array(5)].map((_, index) => (
+            {isData.map((_, index) => (
               <Paper radius={'md'} withBorder key={index} onClick={() => { setOpenDrawer(true) }
               }
                 style={{
@@ -96,7 +183,12 @@ function ListBanner() {
       </LayoutDrawer>
       <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
         description='Apakah Anda yakin ingin menghapus banner?'
-        onYes={(val) => { setOpenModal(false) }} />
+        onYes={(val) => {
+          if (val) {
+            onDelete()
+          }
+          setOpenModal(false)
+        }} />
 
       <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
     </Box>
@@ -104,3 +196,35 @@ function ListBanner() {
 }
   export default ListBanner;
 
+  function funGetBanner(arg0: string) {
+    throw new Error('Function not implemented.');
+  }
+
+  function getOneData() {
+    throw new Error('Function not implemented.');
+  }
+
+    
+    
+    
+     // 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 + 1 >= scrollHeight) {
+  //         setPage(isPage + 1)
+  //       }
+  //     }
+  //   };
+
+  //   const container = containerRef?.current;
+  //   container?.addEventListener("scroll", handleScroll);
+
+  //   return () => {
+  //     container?.removeEventListener("scroll", handleScroll);
+  //   };
+  // }, [containerRef, isPage]);
+