From 560e872b6a028fec314f48d33a32a952ef6c3e63 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Wed, 9 Oct 2024 17:31:48 +0800
Subject: [PATCH] Perbaikan Di Bagian Skeleton

---
 .../_global/components/skeleton_banner.tsx    |  35 ++++
 src/module/banner/ui/create_banner.tsx        |  14 +-
 src/module/banner/ui/list_banner.tsx          | 168 ++++++++----------
 3 files changed, 121 insertions(+), 96 deletions(-)
 create mode 100644 src/module/_global/components/skeleton_banner.tsx

diff --git a/src/module/_global/components/skeleton_banner.tsx b/src/module/_global/components/skeleton_banner.tsx
new file mode 100644
index 0000000..4267665
--- /dev/null
+++ b/src/module/_global/components/skeleton_banner.tsx
@@ -0,0 +1,35 @@
+import { useHookstate } from '@hookstate/core';
+import { Box, Flex, Group, Paper, Skeleton } from '@mantine/core';
+import { TEMA } from '../bin/val_global';
+
+export default function SkeletonBanner() {
+  const tema = useHookstate(TEMA)
+  return (
+    <Box mb={10}>
+      <Paper radius={'md'} withBorder style={{
+        width: '100%',
+        maxWidth: 550,
+        height: 85,
+        backgroundColor: 'transparent',
+        border: `1px solid ${tema.get().bgTotalKegiatan}`
+
+      }}>
+        <Group
+          mt={"25"}
+          align="center"
+          ml={"12"}
+        >
+          <Flex direction={"row"} justify={"center"} align={"center"} gap={"md"} >
+            <Box pr={12}>
+              <Skeleton height={40} width={90} />
+
+            </Box>
+            <Box>
+              <Skeleton height={25} width={150} />
+            </Box>
+          </Flex>
+        </Group>
+      </Paper>
+    </Box>
+  );
+}
\ No newline at end of file
diff --git a/src/module/banner/ui/create_banner.tsx b/src/module/banner/ui/create_banner.tsx
index 51a50ee..fbd4afe 100644
--- a/src/module/banner/ui/create_banner.tsx
+++ b/src/module/banner/ui/create_banner.tsx
@@ -158,12 +158,18 @@ function CreateBanner() {
                       />
                     </Dropzone.Idle>
 
-                    <div>
-                      <Text size="xl" inline>
+                    <div >
+                      <Text  size="xl" inline>
                         Klik Untuk Upload Image
                       </Text>
-                      <Text size="sm" c="dimmed" inline mt={7}>
-                        Ukuran Foto Tidak Boleh Lebih Dari 1 MB
+                      <Text mb={2} size="sm" c="dimmed" inline mt={7}>
+                      Mohon unggah gambar dalam resolusi 
+                      </Text>
+                      <Text mb={2} size='sm' c={"dimmed"} inline>
+                      1535 x 450 piksel untuk memastikan 
+                      </Text>
+                      <Text size='sm' c={"dimmed"} inline>
+                      tampilan sesuai dengan kebutuhan desain.
                       </Text>
                     </div>
                   </Group>
diff --git a/src/module/banner/ui/list_banner.tsx b/src/module/banner/ui/list_banner.tsx
index 7859b60..05b2c2b 100644
--- a/src/module/banner/ui/list_banner.tsx
+++ b/src/module/banner/ui/list_banner.tsx
@@ -1,22 +1,21 @@
 'use client'
-import { currentScroll, LayoutDrawer, LayoutModalViewFile, TEMA, WARNA } from '@/module/_global';
+import { LayoutDrawer, LayoutModalViewFile, TEMA, WARNA } from '@/module/_global';
+import SkeletonBanner from '@/module/_global/components/skeleton_banner';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
-import { ActionIcon, Anchor, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
-import { useParams, useRouter } from 'next/navigation';
-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 { ActionIcon, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { funDeleteBanner, funGetAllBanner, funGetOneBanner } from '../lib/api_banner';
-import { HiMagnifyingGlass } from 'react-icons/hi2';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6';
+import { funDeleteBanner, funGetAllBanner } from '../lib/api_banner';
+import { IDataBanner } from '../lib/type_banner';
 
 function ListBanner() {
-  const [isList, setIsList] = useState(false)
+
   const tema = useHookstate(TEMA)
   const router = useRouter();
-  const param = useParams<{ id: string }>()
   const [isOpenModalView, setOpenModalView] = useState(false)
   const [isOpenModal, setOpenModal] = useState(false)
   const [openDrawer, setOpenDrawer] = useState(false);
@@ -26,7 +25,6 @@ function ListBanner() {
   const [isData, setData] = useState<IDataBanner[]>([])
   const [idData, setIdData] = useState('')
   const [isPage, setPage] = useState(1)
-  const [searchQuerry, setSearchQuerry] = useState('')
 
   const fetchData = async (loading: boolean) => {
     try {
@@ -47,14 +45,9 @@ function ListBanner() {
     }
   }
 
-  function searchBanner(search: string) {
-    setSearchQuerry(search)
-    setPage(1)
-  }
-
-
   useShallowEffect(() => {
     fetchData(true)
+    setPage(1)
   }, [isPage])
 
   useShallowEffect(() => {
@@ -87,45 +80,61 @@ function ListBanner() {
   return (
     <Box pt={2}>
       <Box p={20}>
-        {isData.length == 0 ?
-        <Box style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "75vh"}}>
-            <Text c={"dimmed"} ta={"center"} fs={"italic"}>Tidak ada Banner</Text>
-          </Box> 
-          : 
-          isData.map((v, i) => {
-            return (
-              <Paper radius={'md'} withBorder key={i} onClick={() => {
-                setIdData(v.id);
-                setIdDataStorage(v.image);
-                setExtension(v.extension);
-                setOpenDrawer(true)
-              }
-              }
-                style={{
-                  width: '100%',
-                  maxWidth: 550,
-                  height: 85,
-                  backgroundColor: 'transparent',
-                  border: `1px solid ${tema.get().bgTotalKegiatan}`
+        {loading
+          ?
+          Array(7)
+            .fill(null)
+            .map((_, i) => (
+              <Box key={i} mb={20}>
+                <SkeletonBanner />
+              </Box>
+            ))
+          :
+          <Box >
 
-                }}>
-                <Group mt={"25"}>
-                  <ActionIcon variant='transparent' w={"100"}>
-                    <Image
-                      radius={"xs"}
-                      src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
-                      alt=''
-                      w={76}
-                      h={38.9}
-                    />
-                  </ActionIcon>              
-                    <Text c={"dark"} fz={"h4"}>{v.title}</Text>
-                </Group>
-              </Paper>
-          )})
-          
-      }
-      </Box> 
+            {isData.length == 0 ?
+              <Box style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "75vh" }}>
+                <Text c={"dimmed"} ta={"center"} fs={"italic"}>Tidak ada Banner</Text>
+              </Box>
+              :
+              isData.map((v, i) => {
+                return (
+                  <Box key={i} mb={20}>
+                  <Paper radius={'md'} withBorder onClick={() => {
+                    setIdData(v.id);
+                    setIdDataStorage(v.image);
+                    setExtension(v.extension);
+                    setOpenDrawer(true)
+                  }
+                  }
+                    style={{
+                      width: '100%',
+                      maxWidth: 550,
+                      height: 85,
+                      backgroundColor: 'transparent',
+                      border: `1px solid ${tema.get().bgTotalKegiatan}`
+
+                    }}>
+                    <Group mt={"25"}>
+                      <ActionIcon variant='transparent' w={"100"}>
+                        <Image
+                          radius={"xs"}
+                          src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
+                          alt=''
+                          w={76}
+                          h={38.9}
+                        />
+                      </ActionIcon>
+                      <Text c={"dark"} fz={"h4"}>{v.title}</Text>
+                    </Group>
+                  </Paper>
+                  </Box>
+                )
+              })
+            }
+          </Box>
+        }
+      </Box>
       <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
         <Box>
           <Stack pt={10}>
@@ -136,22 +145,22 @@ function ListBanner() {
                 alignItems: "flex-start"
               }}
             >
-                <Flex onClick={() => router.push(`/banner/edit/${idData}`)} direction="column" align="center" justify="center" pb={20}>
-                  <Box>
-                    <FaPencil size={30} color={WARNA.biruTua} />
-                  </Box>
-                  <Box>
-                    <Text c={tema.get().utama} fz={{ base: 'sm', md: 'md' }}>Edit</Text>
-                  </Box>
-                </Flex>
-             
+              <Flex onClick={() => router.push(`/banner/edit/${idData}`)} direction="column" align="center" justify="center" pb={20}>
+                <Box>
+                  <FaPencil size={30} color={WARNA.biruTua} />
+                </Box>
+                <Box>
+                  <Text c={tema.get().utama} fz={{ base: 'sm', md: 'md' }}>Edit</Text>
+                </Box>
+              </Flex>
+
 
               <Flex onClick={() => { setOpenModalView(true) }} direction={"column"} align={"center"} justify={"center"}>
                 <Box>
                   <FaFile size={30} color={tema.get().utama} />
                 </Box>
                 <Box>
-                  <Text c={tema.get().utama} fz={{ base: 'sm', md: 'md'}}>Lihat File</Text>
+                  <Text c={tema.get().utama} fz={{ base: 'sm', md: 'md' }}>Lihat File</Text>
                 </Box>
               </Flex>
 
@@ -160,7 +169,7 @@ function ListBanner() {
                   <FaTrash size={30} color={tema.get().utama} />
                 </Box>
                 <Box>
-                  <Text c={tema.get().utama} fz={{ base: 'sm', md: 'md'}}>Hapus</Text>
+                  <Text c={tema.get().utama} fz={{ base: 'sm', md: 'md' }}>Hapus</Text>
                 </Box>
               </Flex>
             </SimpleGrid>
@@ -185,28 +194,3 @@ function ListBanner() {
 }
 export default ListBanner;
 
-
-
-
-
-// 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]);
-