feat: implement unified delete dialog component and update related pages

app/components/dialog/delete.tsx

@@ -0,0 +1,97 @@
+import {
+  Description,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
+import {
+  useEffect,
+  type Dispatch,
+  type PropsWithChildren,
+  type SetStateAction,
+} from 'react'
+import toast from 'react-hot-toast'
+import { useFetcher } from 'react-router'
+
+import { Button } from '~/components/ui/button'
+
+type T = {
+  id: string
+} & any // eslint-disable-line @typescript-eslint/no-explicit-any
+
+type TProperties = PropsWithChildren & {
+  selectedItem?: T
+  setSelectedItem: Dispatch<SetStateAction<T | undefined>>
+  title: string
+  fetcherAction: string
+}
+
+export const DialogDelete = (properties: TProperties) => {
+  const { selectedItem, setSelectedItem, children, title, fetcherAction } =
+    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(`${title} 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 text-xl font-bold">
+            <span>Anda akan menghapus</span>{' '}
+            <span className="lowercase">{title}</span> <span>berikut?</span>
+          </DialogTitle>
+          <Description className="space-y-1 text-center text-[#565658]">
+            {children}
+          </Description>
+          <div className="flex justify-end">
+            <fetcher.Form
+              method="POST"
+              action={fetcherAction}
+              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>
+  )
+}

app/components/dialog/news.tsx

@@ -17,7 +17,7 @@ type ModalProperties = {
   description?: string
 }
 
-export const PopupModal = ({
+export const DialogNews = ({
   isOpen,
   onClose,
   children,

app/components/dialog/success.tsx

@@ -33,7 +33,7 @@ const DESCRIPTIONS: DescriptionMap = {
   error: 'Terjadi kesalahan. Silakan coba lagi.',
 }
 
-export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
+export const DialogSuccess = ({ isOpen, onClose }: ModalProperties) => {
   const { setIsLoginOpen, setIsSubscribeOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const { userData } = loaderData || {}