From 850f42e99d55c30b6fa127761af6f8e368912f52 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Wed, 12 Mar 2025 21:30:30 +0800
Subject: [PATCH] feat: add delete confirmation dialog for advertisements

---
 .../dialog-delete.tsx                         | 82 +++++++++++++++++++
 app/pages/dashboard-advertisements/index.tsx  | 76 ++---------------
 app/pages/dashboard-categories/index.tsx      |  1 +
 3 files changed, 92 insertions(+), 67 deletions(-)
 create mode 100644 app/pages/dashboard-advertisements/dialog-delete.tsx

diff --git a/app/pages/dashboard-advertisements/dialog-delete.tsx b/app/pages/dashboard-advertisements/dialog-delete.tsx
new file mode 100644
index 0000000..38cb4fa
--- /dev/null
+++ b/app/pages/dashboard-advertisements/dialog-delete.tsx
@@ -0,0 +1,82 @@
+import {
+  Description,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
+import type { Dispatch, SetStateAction } from 'react'
+import { Link, useFetcher } from 'react-router'
+
+import type { TAdResponse } from '~/apis/common/get-ads'
+import { Button } from '~/components/ui/button'
+
+type TProperties = {
+  selectedAds?: TAdResponse
+  setSelectedAds: Dispatch<SetStateAction<TAdResponse | undefined>>
+}
+
+export const DialogDelete = (properties: TProperties) => {
+  const { selectedAds, setSelectedAds } = properties || {}
+  const fetcher = useFetcher()
+
+  return (
+    <Dialog
+      open={!!selectedAds}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setSelectedAds(undefined)
+        }
+      }}
+      className="relative z-50"
+      transition
+    >
+      <DialogBackdrop
+        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+        transition
+      />
+      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
+        <DialogPanel
+          transition
+          className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
+        >
+          <DialogTitle className="relative flex justify-start text-xl font-bold">
+            Anda akan menghapus banner berikut?
+          </DialogTitle>
+          <Description className="space-y-1 text-center text-[#565658]">
+            <img
+              src={selectedAds?.image_url}
+              alt={selectedAds?.image_url}
+              className="aspect-[150/1] h-[50px] rounded object-contain"
+            />
+            <Button
+              as={Link}
+              to={selectedAds?.url || ''}
+              variant="link"
+              size="fit"
+            >
+              {selectedAds?.url}
+            </Button>
+          </Description>
+          <div className="flex justify-end">
+            <fetcher.Form
+              method="POST"
+              action={`/actions/admin/advertisements/delete/${selectedAds?.id}`}
+              className="grid"
+            >
+              <Button
+                type="submit"
+                variant="newsDanger"
+                className="text-md h-[42px] rounded-md"
+                disabled={fetcher.state !== 'idle'}
+                isLoading={fetcher.state !== 'idle'}
+              >
+                Hapus
+              </Button>
+            </fetcher.Form>
+          </div>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  )
+}
diff --git a/app/pages/dashboard-advertisements/index.tsx b/app/pages/dashboard-advertisements/index.tsx
index 3aa0d28..09ec703 100644
--- a/app/pages/dashboard-advertisements/index.tsx
+++ b/app/pages/dashboard-advertisements/index.tsx
@@ -1,10 +1,3 @@
-import {
-  Description,
-  Dialog,
-  DialogBackdrop,
-  DialogPanel,
-  DialogTitle,
-} from '@headlessui/react'
 import { PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid'
 import type { ConfigColumns } from 'datatables.net-dt'
 import type { DataTableSlots } from 'datatables.net-react'
@@ -18,12 +11,14 @@ import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard.advertisements._index'
 
+import { DialogDelete } from './dialog-delete'
+
 export const AdvertisementsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard.advertisements._index',
   )
   const { adsData: dataTable } = loaderData || {}
-  const [selectedId, setSelectedId] = useState<TAdResponse>()
+  const [selectedAds, setSelectedAds] = useState<TAdResponse>()
   const fetcher = useFetcher()
 
   useEffect(() => {
@@ -33,7 +28,7 @@ export const AdvertisementsPage = () => {
     }
 
     if (fetcher.data?.success === true) {
-      setSelectedId(undefined)
+      setSelectedAds(undefined)
       toast.success('Banner iklan berhasil dihapus!')
       return
     }
@@ -83,7 +78,7 @@ export const AdvertisementsPage = () => {
           type="button"
           size="icon"
           variant="newsDanger"
-          onClick={() => setSelectedId(data)}
+          onClick={() => setSelectedAds(data)}
         >
           <TrashIcon className="h-4 w-4" />
         </Button>
@@ -114,63 +109,10 @@ export const AdvertisementsPage = () => {
         title="Daftar Banner Iklan"
       />
 
-      <Dialog
-        open={!!selectedId}
-        onClose={() => {
-          if (fetcher.state === 'idle') {
-            setSelectedId(undefined)
-          }
-        }}
-        className="relative z-50"
-        transition
-      >
-        <DialogBackdrop
-          className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
-          transition
-        />
-        <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
-          <DialogPanel
-            transition
-            className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
-          >
-            <DialogTitle className="relative flex justify-start text-xl font-bold">
-              Anda akan menghapus banner berikut?
-            </DialogTitle>
-            <Description className="space-y-1 text-center text-[#565658]">
-              <img
-                src={selectedId?.image_url}
-                alt={selectedId?.image_url}
-                className="aspect-[150/1] h-[50px] rounded object-contain"
-              />
-              <Button
-                as={Link}
-                to={selectedId?.url || ''}
-                variant="link"
-                size="fit"
-              >
-                {selectedId?.url}
-              </Button>
-            </Description>
-            <div className="flex justify-end">
-              <fetcher.Form
-                method="POST"
-                action={`/actions/admin/advertisements/delete/${selectedId?.id}`}
-                className="grid"
-              >
-                <Button
-                  type="submit"
-                  variant="newsDanger"
-                  className="text-md h-[42px] rounded-md"
-                  disabled={fetcher.state !== 'idle'}
-                  isLoading={fetcher.state !== 'idle'}
-                >
-                  Hapus
-                </Button>
-              </fetcher.Form>
-            </div>
-          </DialogPanel>
-        </div>
-      </Dialog>
+      <DialogDelete
+        selectedAds={selectedAds}
+        setSelectedAds={setSelectedAds}
+      />
     </div>
   )
 }
diff --git a/app/pages/dashboard-categories/index.tsx b/app/pages/dashboard-categories/index.tsx
index 46e8c97..653d3f8 100644
--- a/app/pages/dashboard-categories/index.tsx
+++ b/app/pages/dashboard-categories/index.tsx
@@ -7,6 +7,7 @@ import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard'
+
 export const CategoriesPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard',