Merge pull request #301 from bipproduction/nico/09-oktober-24

Perbaikan Di Bagian Skeleton

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>
+  );
+}

src/module/banner/ui/create_banner.tsx

@@ -158,12 +158,18 @@ function CreateBanner() {
                       />
                     </Dropzone.Idle>
 
-                    <div>
+                    <div >
                       <Text  size="xl" inline>
                         Klik Untuk Upload Image
                       </Text>
-                      <Text size="sm" c="dimmed" inline mt={7}>
+                      <Text mb={2} size="sm" c="dimmed" inline mt={7}>
-                        Ukuran Foto Tidak Boleh Lebih Dari 1 MB
+                      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>

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 { ActionIcon, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text } 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 { useShallowEffect } from '@mantine/hooks';
-import { funDeleteBanner, funGetAllBanner, funGetOneBanner } from '../lib/api_banner';
+import { useParams, useRouter } from 'next/navigation';
-import { HiMagnifyingGlass } from 'react-icons/hi2';
+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,14 +80,27 @@ function ListBanner() {
   return (
     <Box pt={2}>
       <Box p={20}>
+        {loading
+          ?
+          Array(7)
+            .fill(null)
+            .map((_, i) => (
+              <Box key={i} mb={20}>
+                <SkeletonBanner />
+              </Box>
+            ))
+          :
+          <Box >
+
             {isData.length == 0 ?
-        <Box style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "75vh"}}>
+              <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={() => {
+                  <Box key={i} mb={20}>
+                  <Paper radius={'md'} withBorder onClick={() => {
                     setIdData(v.id);
                     setIdDataStorage(v.image);
                     setExtension(v.extension);
@@ -122,8 +128,11 @@ function ListBanner() {
                       <Text c={"dark"} fz={"h4"}>{v.title}</Text>
                     </Group>
                   </Paper>
-          )})
+                  </Box>
-          
+                )
+              })
+            }
+          </Box>
         }
       </Box>
       <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
@@ -151,7 +160,7 @@ function ListBanner() {
                   <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]);
-