upd: loading

Dekripsi: - update loading pada banner - update loading pada tema - update loading pada logout No Issues
2024-10-29 17:49:45 +08:00
parent 14e61dedf3
commit ce82fc8854
4 changed files with 80 additions and 61 deletions
--- a/src/app/(application)/banner/page.tsx
+++ b/src/app/(application)/banner/page.tsx
@@ -1,4 +1,3 @@
-
 import { ListBanner, NavbarBanner } from "@/module/banner";
 import { Box } from "@mantine/core";

@@ -7,7 +6,6 @@ export default function Page() {
      <Box>
         <NavbarBanner />
         <ListBanner />
-    
      </Box>
   );
 }
--- a/src/module/banner/ui/list_banner.tsx
+++ b/src/module/banner/ui/list_banner.tsx
@@ -5,7 +5,7 @@ import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6';
@@ -25,6 +25,7 @@ function ListBanner() {
  const [isData, setData] = useState<IDataBanner[]>([])
  const [idData, setIdData] = useState('')
  const [isPage, setPage] = useState(1)
+  const [loadingModal, setLoadingModal] = useState(false)

  const fetchData = async (loading: boolean) => {
    try {
@@ -57,6 +58,7 @@ function ListBanner() {

  async function onDelete(id: string) {
    try {
+      setLoadingModal(true)
      const res = await funDeleteBanner(id);
      if (res.success) {
        toast.success(res.message)
@@ -70,8 +72,10 @@ function ListBanner() {
    } catch (error) {
      console.error(error);
      toast.error("Gagal menghapus banner, coba lagi nanti");
+    } finally {
+      setLoadingModal(false)
+      setOpenModal(false)
    }
-
  }


@@ -100,34 +104,34 @@ function ListBanner() {
              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}`
+                    <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>
+                      }}>
+                      <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>
                )
              })
@@ -178,14 +182,16 @@ function ListBanner() {
      </LayoutDrawer>

      <LayoutModal
+        loading={loadingModal}
        opened={isOpenModal}
        onClose={() => setOpenModal(false)}
        description='Apakah Anda yakin ingin menghapus banner?'
        onYes={(val) => {
          if (val) {
            onDelete(idData)
+          } else {
+            setOpenModal(false)
          }
-          setOpenModal(false)
        }} />

      <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur="image" />
--- a/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx
+++ b/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx
@@ -3,11 +3,11 @@ import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
 import { Box, Flex, SimpleGrid, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaPencil, FaTrash } from 'react-icons/fa6';
 import { IoColorPalette } from 'react-icons/io5';
-import { funChangeTheme, funDeleteTheme, funGetThemeById } from '../lib/api_theme';
+import { funChangeTheme, funDeleteTheme } from '../lib/api_theme';
 import { globalRefreshTheme } from '../lib/val_theme';

 export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id: string, idVillage: string, isUse: boolean }) {
@@ -16,9 +16,12 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
  const [isModalDel, setModalDel] = useState(false)
  const tema = useHookstate(TEMA)
  const refresh = useHookstate(globalRefreshTheme)
+  const [loadingApply, setLoadingApply] = useState(false)
+  const [loadingDelete, setLoadingDelete] = useState(false)

  async function onChangeTheme() {
    try {
+      setLoadingApply(true)
      const res = await funChangeTheme(id)
      if (res.success) {
        tema.set(res.data)
@@ -29,11 +32,15 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
    } catch (error) {
      console.error(error)
      toast.error("Gagal mengubah tema, coba lagi nanti");
+    } finally {
+      setLoadingApply(false)
+      setModal(false)
    }
  }

  async function onDelete() {
    try {
+      setLoadingDelete(true)
      const res = await funDeleteTheme(id)
      if (res.success) {
        toast.success(res.message);
@@ -44,6 +51,9 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
    } catch (error) {
      console.error(error)
      toast.error("Gagal menghapus tema, coba lagi nanti");
+    } finally {
+      setLoadingDelete(false)
+      setModalDel(false)
    }
  }

@@ -86,23 +96,25 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
        }
      </SimpleGrid>

-      <LayoutModal opened={isModal} onClose={() => setModal(false)}
+      <LayoutModal loading={loadingApply} opened={isModal} onClose={() => setModal(false)}
        description="Apakah Anda yakin ingin mengubah Tema Aplikasi?"
        onYes={(val) => {
          if (val) {
            onChangeTheme()
+          }else{
+            setModal(false)
          }
-          setModal(false)
        }} />


-      <LayoutModal opened={isModalDel} onClose={() => setModalDel(false)}
+      <LayoutModal loading={loadingDelete} opened={isModalDel} onClose={() => setModalDel(false)}
        description="Apakah Anda yakin ingin menghapus Tema Aplikasi?"
        onYes={(val) => {
          if (val) {
            onDelete()
+          }else{
+            setModalDel(false)
          }
-          setModalDel(false)
        }} />
    </Box>
  );
--- a/src/module/user/profile/ui/profile.tsx
+++ b/src/module/user/profile/ui/profile.tsx
@@ -1,19 +1,19 @@
 "use client"
-import { LayoutIconBack, LayoutNavbarHome, SkeletonAvatar, SkeletonDetailProfile, TEMA, WARNA } from "@/module/_global";
-import { ActionIcon, Avatar, Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
-import { RiIdCardFill } from "react-icons/ri";
-import { FaSquarePhone } from "react-icons/fa6";
-import { MdEmail } from "react-icons/md";
-import { IoMaleFemale } from "react-icons/io5";
-import toast from "react-hot-toast";
-import { LuLogOut } from "react-icons/lu";
+import { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
-import { useState } from "react";
-import { funGetProfileByCookies } from "../lib/api_profile";
-import { useShallowEffect } from "@mantine/hooks";
-import { IProfileById } from "../lib/type_profile";
-import { useRouter } from "next/navigation";
 import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Avatar, Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { FaSquarePhone } from "react-icons/fa6";
+import { IoMaleFemale } from "react-icons/io5";
+import { LuLogOut } from "react-icons/lu";
+import { MdEmail } from "react-icons/md";
+import { RiIdCardFill } from "react-icons/ri";
+import { funGetProfileByCookies } from "../lib/api_profile";
+import { IProfileById } from "../lib/type_profile";

 export default function Profile() {
  const [openModal, setOpenModal] = useState(false);
@@ -22,6 +22,7 @@ export default function Profile() {
  const [loading, setLoading] = useState(true)
  const [img, setIMG] = useState<any | null>()
  const tema = useHookstate(TEMA)
+  const [loadingModal, setLoadingModal] = useState(false)

  async function getData() {
    try {
@@ -44,17 +45,19 @@ export default function Profile() {
  async function onLogout(val: boolean) {
    try {
      if (val) {
+        setLoadingModal(true)
        await fetch('/api/auth/logout', {
          method: 'DELETE',
        });
        toast.success('Logout Sukses')
        window.location.href = '/';
      }
-
-      setOpenModal(false)
-
    } catch (error) {
      console.error(error);
+      toast.error("Logout gagal, coba lagi nanti");
+    } finally {
+      setLoadingModal(false)
+      setOpenModal(false)
    }
  }
  return (
@@ -72,12 +75,12 @@ export default function Profile() {
            justify="center"
            gap="xs"
          >
-            {loading ? <Skeleton height={100} radius={"100"} width={100} /> :      
-            <Avatar
-              size="100"
-              radius={"100"}
-              src={img}
-            />
+            {loading ? <Skeleton height={100} radius={"100"} width={100} /> :
+              <Avatar
+                size="100"
+                radius={"100"}
+                src={img}
+              />
            }
            {/* <SkeletonAvatar size="100" sizeNoImg="100" img={img} /> */}
            {loading ?
@@ -150,7 +153,7 @@ export default function Profile() {
          </Stack>
        }
      </Box>
-      <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+      <LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
        description="Apakah Anda yakin ingin keluar?"
        onYes={(val) => onLogout(val)} />
    </>