feat: implement unified delete dialog component and update related pages

2025-03-13 09:26:33 +08:00
parent 2c703de8e5
commit b00adf89ec
10 changed files with 72 additions and 221 deletions
@@ -1,97 +0,0 @@
-import {
-  Description,
-  Dialog,
-  DialogBackdrop,
-  DialogPanel,
-  DialogTitle,
-} from '@headlessui/react'
-import { useEffect, type Dispatch, type SetStateAction } from 'react'
-import toast from 'react-hot-toast'
-import { Link, useFetcher } from 'react-router'
-
-import type { TAdResponse } from '~/apis/common/get-ads'
-import { Button } from '~/components/ui/button'
-
-type TProperties = {
-  selectedItem?: TAdResponse
-  setSelectedItem: Dispatch<SetStateAction<TAdResponse | undefined>>
-}
-
-export const DialogDelete = (properties: TProperties) => {
-  const { selectedItem, setSelectedItem } = properties || {}
-  const fetcher = useFetcher()
-
-  useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
-    }
-
-    if (fetcher.data?.success === true) {
-      setSelectedItem(undefined)
-      toast.success('Banner iklan berhasil dihapus!')
-      return
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher.data])
-
-  return (
-    <Dialog
-      open={!!selectedItem}
-      onClose={() => {
-        if (fetcher.state === 'idle') {
-          setSelectedItem(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={selectedItem?.image_url}
-              alt={selectedItem?.image_url}
-              className="aspect-[150/1] h-[50px] rounded object-contain"
-            />
-            <Button
-              as={Link}
-              to={selectedItem?.url || ''}
-              variant="link"
-              size="fit"
-            >
-              {selectedItem?.url}
-            </Button>
-          </Description>
-          <div className="flex justify-end">
-            <fetcher.Form
-              method="POST"
-              action={`/actions/admin/advertisements/delete/${selectedItem?.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>
-  )
-}
@@ -9,13 +9,12 @@ import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'

 import type { TAdResponse } from '~/apis/common/get-ads'
+import { DialogDelete } from '~/components/dialog/delete'
 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.advertisements._index'

-import { DialogDelete } from './dialog-delete'
-
 export const AdvertisementsPage = () => {
  const loaderData = useRouteLoaderData<typeof loader>(
    'routes/_admin.lg-admin._dashboard.advertisements._index',
@@ -101,7 +100,23 @@ export const AdvertisementsPage = () => {
      <DialogDelete
        selectedItem={selectedAds}
        setSelectedItem={setSelectedAds}
-      />
+        title="Banner iklan"
+        fetcherAction={`/actions/admin/advertisements/delete/${selectedAds?.id}`}
+      >
+        <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>
+      </DialogDelete>
    </div>
  )
 }
@@ -1,90 +0,0 @@
-import {
-  Description,
-  Dialog,
-  DialogBackdrop,
-  DialogPanel,
-  DialogTitle,
-} from '@headlessui/react'
-import { useEffect, type Dispatch, type SetStateAction } from 'react'
-import toast from 'react-hot-toast'
-import { useFetcher } from 'react-router'
-
-import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
-import { Button } from '~/components/ui/button'
-import { formatNumberWithPeriods } from '~/utils/formatter'
-
-type TProperties = {
-  selectedItem?: TSubscribePlanResponse
-  setSelectedItem: Dispatch<SetStateAction<TSubscribePlanResponse | undefined>>
-}
-
-export const DialogDelete = (properties: TProperties) => {
-  const { selectedItem, setSelectedItem } = properties || {}
-  const fetcher = useFetcher()
-
-  useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
-    }
-
-    if (fetcher.data?.success === true) {
-      setSelectedItem(undefined)
-      toast.success('Subscribe plan berhasil dihapus!')
-      return
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher.data])
-
-  return (
-    <Dialog
-      open={!!selectedItem}
-      onClose={() => {
-        if (fetcher.state === 'idle') {
-          setSelectedItem(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 subscribe plan berikut?
-          </DialogTitle>
-          <Description className="space-y-1 text-center text-[#565658]">
-            <p>{selectedItem?.name}</p>
-            <p>Length: {selectedItem?.length}</p>
-            <p>
-              Harga: Rp. {formatNumberWithPeriods(selectedItem?.price || 0)}
-            </p>
-          </Description>
-          <div className="flex justify-end">
-            <fetcher.Form
-              method="POST"
-              action={`/actions/admin/subscribe-plan/delete/${selectedItem?.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>
-  )
-}
@@ -9,6 +9,7 @@ import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'

 import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
+import { DialogDelete } from '~/components/dialog/delete'
 import { Button } from '~/components/ui/button'
 import { getStatusBadge, type TColorBadge } from '~/components/ui/color-badge'
 import { UiTable } from '~/components/ui/table'
@@ -16,8 +17,6 @@ import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard.subscribe-plan._index'
 import { formatNumberWithPeriods } from '~/utils/formatter'

-import { DialogDelete } from './dialog-delete'
-
 export const SubscribePlanPage = () => {
  const loaderData = useRouteLoaderData<typeof loader>(
    'routes/_admin.lg-admin._dashboard.subscribe-plan._index',
@@ -132,7 +131,16 @@ export const SubscribePlanPage = () => {
      <DialogDelete
        selectedItem={selectedSubscribePlan}
        setSelectedItem={setSelectedSubscribePlan}
-      />
+        title="Subscribe plan"
+        fetcherAction={`/actions/admin/subscribe-plan/delete/${selectedSubscribePlan?.id}`}
+      >
+        <p>{selectedSubscribePlan?.name}</p>
+        <p>Length: {selectedSubscribePlan?.length}</p>
+        <p>
+          Harga: Rp.{' '}
+          {formatNumberWithPeriods(selectedSubscribePlan?.price || 0)}
+        </p>
+      </DialogDelete>
    </div>
  )
 }
@@ -1,85 +0,0 @@
-import {
-  Description,
-  Dialog,
-  DialogBackdrop,
-  DialogPanel,
-  DialogTitle,
-} from '@headlessui/react'
-import { useEffect, type Dispatch, type SetStateAction } from 'react'
-import toast from 'react-hot-toast'
-import { useFetcher } from 'react-router'
-
-import type { TTagResponse } from '~/apis/common/get-tags'
-import { Button } from '~/components/ui/button'
-
-type TProperties = {
-  selectedItem?: TTagResponse
-  setSelectedItem: Dispatch<SetStateAction<TTagResponse | undefined>>
-}
-
-export const DialogDelete = (properties: TProperties) => {
-  const { selectedItem, setSelectedItem } = properties || {}
-  const fetcher = useFetcher()
-
-  useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
-    }
-
-    if (fetcher.data?.success === true) {
-      setSelectedItem(undefined)
-      toast.success('Tag berhasil dihapus!')
-      return
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher.data])
-
-  return (
-    <Dialog
-      open={!!selectedItem}
-      onClose={() => {
-        if (fetcher.state === 'idle') {
-          setSelectedItem(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 tag berikut?
-          </DialogTitle>
-          <Description className="space-y-1 text-center text-[#565658]">
-            <p>{selectedItem?.name}</p>
-          </Description>
-          <div className="flex justify-end">
-            <fetcher.Form
-              method="POST"
-              action={`/actions/admin/tags/delete/${selectedItem?.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>
-  )
-}
@@ -9,13 +9,12 @@ import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'

 import type { TTagResponse } from '~/apis/common/get-tags'
+import { DialogDelete } from '~/components/dialog/delete'
 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'

-import { DialogDelete } from './dialog-delete'
-
 export const TagsPage = () => {
  const loaderData = useRouteLoaderData<typeof loader>(
    'routes/_admin.lg-admin._dashboard',
@@ -105,7 +104,11 @@ export const TagsPage = () => {
      <DialogDelete
        selectedItem={selectedTag}
        setSelectedItem={setSelectedTag}
-      />
+        title="Tag"
+        fetcherAction={`/actions/admin/tags/delete/${selectedTag?.id}`}
+      >
+        <p>{selectedTag?.name}</p>
+      </DialogDelete>
    </div>
  )
 }