refactor: update DialogDelete component to use selectedId and close callback

app/components/dialog/delete.tsx

@@ -5,31 +5,21 @@ import {
   DialogPanel,
   DialogTitle,
 } from '@headlessui/react'
-import {
+import { useEffect, type PropsWithChildren } from 'react'
-  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
+  selectedId?: string
-  setSelectedItem: Dispatch<SetStateAction<T | undefined>>
+  close: () => void
   title: string
   fetcherAction: string
 }
 
 export const DialogDelete = (properties: TProperties) => {
-  const { selectedItem, setSelectedItem, children, title, fetcherAction } =
+  const { selectedId, close, children, title, fetcherAction } = properties || {}
-    properties || {}
   const fetcher = useFetcher()
 
   useEffect(() => {
@@ -39,7 +29,7 @@ export const DialogDelete = (properties: TProperties) => {
     }
 
     if (fetcher.data?.success === true) {
-      setSelectedItem(undefined)
+      close()
       toast.success(`${title} berhasil dihapus!`)
       return
     }
@@ -48,10 +38,10 @@ export const DialogDelete = (properties: TProperties) => {
 
   return (
     <Dialog
-      open={!!selectedItem}
+      open={!!selectedId}
       onClose={() => {
         if (fetcher.state === 'idle') {
-          setSelectedItem(undefined)
+          close()
         }
       }}
       className="relative z-50"

app/components/text-editor/index.tsx

@@ -8,22 +8,16 @@ import TextStyle from '@tiptap/extension-text-style'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import { useEffect, useId, useState } from 'react'
-import {
+import { get, type FieldError, type RegisterOptions } from 'react-hook-form'
-  get,
-  type FieldError,
-  type FieldValues,
-  type Path,
-  type RegisterOptions,
-} from 'react-hook-form'
 import { useRemixFormContext } from 'remix-hook-form'
 import { twMerge } from 'tailwind-merge'
 
 import { EditorMenuBar } from './editor-menubar'
 import { EditorTextArea } from './editor-textarea'
 
-type TProperties<TFormValues extends FieldValues> = {
+type TProperties = {
   id?: string
-  name: Path<TFormValues>
+  name: string
   label?: string
   placeholder?: string
   labelClassName?: string
@@ -36,9 +30,7 @@ type TProperties<TFormValues extends FieldValues> = {
   category: string
 }
 
-export const TextEditor = <TFormValues extends Record<string, unknown>>(
+export const TextEditor = (properties: TProperties) => {
-  properties: TProperties<TFormValues>,
-) => {
   const {
     id,
     label,
@@ -92,7 +84,7 @@ export const TextEditor = <TFormValues extends Record<string, unknown>>(
     immediatelyRender: false,
     content: watchContent,
     onUpdate: ({ editor }) => {
-      setValue(name, editor.getHTML() as any) // eslint-disable-line @typescript-eslint/no-explicit-any
+      setValue(name, editor.getHTML() as string)
     },
   })
   useEffect(() => {

app/pages/dashboard-advertisements/index.tsx

@@ -98,8 +98,8 @@ export const AdvertisementsPage = () => {
       />
 
       <DialogDelete
-        selectedItem={selectedAds}
+        selectedId={selectedAds?.id}
-        setSelectedItem={setSelectedAds}
+        close={() => setSelectedAds(undefined)}
         title="Banner iklan"
         fetcherAction={`/actions/admin/advertisements/delete/${selectedAds?.id}`}
       >

app/pages/dashboard-subscribe-plan/index.tsx

@@ -129,8 +129,8 @@ export const SubscribePlanPage = () => {
       />
 
       <DialogDelete
-        selectedItem={selectedSubscribePlan}
+        selectedId={selectedSubscribePlan?.id}
-        setSelectedItem={setSelectedSubscribePlan}
+        close={() => setSelectedSubscribePlan(undefined)}
         title="Subscribe plan"
         fetcherAction={`/actions/admin/subscribe-plan/delete/${selectedSubscribePlan?.id}`}
       >

app/pages/dashboard-tags/index.tsx

@@ -102,8 +102,8 @@ export const TagsPage = () => {
       />
 
       <DialogDelete
-        selectedItem={selectedTag}
+        selectedId={selectedTag?.id}
-        setSelectedItem={setSelectedTag}
+        close={() => setSelectedTag(undefined)}
         title="Tag"
         fetcherAction={`/actions/admin/tags/delete/${selectedTag?.id}`}
       >