app/apis/admin/delete-tags.ts

@@ -9,12 +9,15 @@ const deleteTagsResponseSchema = z.object({
   }),
 })
 
+type TTagsId = Pick<TTagSchema, 'id'>
 type TParameters = {
-  id: TTagSchema['id']
+  payload: TTagsId
 } & THttpServer
 
+export type TDeleteTagsResponse = z.infer<typeof deleteTagsResponseSchema>
 export const deleteTagsRequest = async (parameters: TParameters) => {
-  const { id, ...restParameters } = parameters
+  const { payload, ...restParameters } = parameters
+  const { id } = payload
   try {
     const { data } = await HttpServer(restParameters).delete(
       `/api/tag/${id}/delete`,

app/components/popup/modal.tsx

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

app/components/popup/success-modal.tsx

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

app/components/text-editor/index.tsx

@@ -8,16 +8,22 @@ 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 { get, type FieldError, type RegisterOptions } from 'react-hook-form'
+import {
+  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 = {
+type TProperties<TFormValues extends FieldValues> = {
   id?: string
-  name: string
+  name: Path<TFormValues>
   label?: string
   placeholder?: string
   labelClassName?: string
@@ -30,7 +36,9 @@ type TProperties = {
   category: string
 }
 
-export const TextEditor = (properties: TProperties) => {
+export const TextEditor = <TFormValues extends Record<string, unknown>>(
+  properties: TProperties<TFormValues>,
+) => {
   const {
     id,
     label,
@@ -84,7 +92,7 @@ export const TextEditor = (properties: TProperties) => {
     immediatelyRender: false,
     content: watchContent,
     onUpdate: ({ editor }) => {
-      setValue(name, editor.getHTML() as string)
+      setValue(name, editor.getHTML() as any) // eslint-disable-line @typescript-eslint/no-explicit-any
     },
   })
   useEffect(() => {

app/contexts/news.tsx

@@ -7,7 +7,7 @@ import {
   type SetStateAction,
 } from 'react'
 
-import type { ModalProperties } from '~/components/dialog/success'
+import type { ModalProperties } from '~/components/popup/success-modal'
 
 type NewsContextProperties = {
   isLoginOpen: boolean

app/layouts/news/default.tsx

@@ -1,8 +1,8 @@
 import { type PropsWithChildren } from 'react'
 import { Toaster } from 'react-hot-toast'
 
-import { DialogNews } from '~/components/dialog/news'
+import { PopupModal } from '~/components/popup/modal'
-import { DialogSuccess } from '~/components/dialog/success'
+import { SuccessModal } from '~/components/popup/success-modal'
 import { useNewsContext } from '~/contexts/news'
 import { Banner } from '~/layouts/news/banner'
 import { FormForgotPassword } from '~/layouts/news/form-forgot-password'
@@ -47,39 +47,39 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
 
       <Toaster />
 
-      <DialogNews
+      <PopupModal
         isOpen={isLoginOpen}
         onClose={() => setIsLoginOpen(false)}
         description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
       >
         <FormLogin />
-      </DialogNews>
+      </PopupModal>
 
-      <DialogNews
+      <PopupModal
         isOpen={isRegisterOpen}
         onClose={() => setIsRegisterOpen(false)}
         description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
       >
         <FormRegister />
-      </DialogNews>
+      </PopupModal>
 
-      <DialogNews
+      <PopupModal
         isOpen={isForgetOpen}
         onClose={() => setIsForgetOpen(false)}
         description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
       >
         <FormForgotPassword />
-      </DialogNews>
+      </PopupModal>
 
-      <DialogNews
+      <PopupModal
         isOpen={isSubscribeOpen}
         onClose={() => setIsSubscribeOpen(false)}
         description="Selamat Datang, silakan Pilih Subscribe Plan Anda untuk melanjutkan!"
       >
         <FormSubscribePlan />
-      </DialogNews>
+      </PopupModal>
 
-      <DialogSuccess
+      <SuccessModal
         isOpen={isSuccessOpen}
         onClose={() => {
           setIsSuccessOpen(undefined)

app/pages/dashboard-advertisements/dialog-delete.tsx

@@ -0,0 +1,97 @@
+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>
+  )
+}

app/pages/dashboard-advertisements/index.tsx

@@ -9,12 +9,13 @@ 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',
@@ -98,25 +99,9 @@ export const AdvertisementsPage = () => {
       />
 
       <DialogDelete
-        selectedId={selectedAds?.id}
+        selectedItem={selectedAds}
-        close={() => setSelectedAds(undefined)}
+        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>
   )
 }

app/pages/dashboard-subscribe-plan/dialog-delete.tsx

@@ -5,21 +5,21 @@ import {
   DialogPanel,
   DialogTitle,
 } from '@headlessui/react'
-import { useEffect, type PropsWithChildren } from '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 = PropsWithChildren & {
+type TProperties = {
-  selectedId?: string
+  selectedItem?: TSubscribePlanResponse
-  close: () => void
+  setSelectedItem: Dispatch<SetStateAction<TSubscribePlanResponse | undefined>>
-  title: string
-  fetcherAction: string
 }
 
 export const DialogDelete = (properties: TProperties) => {
-  const { selectedId, close, children, title, fetcherAction } = properties || {}
+  const { selectedItem, setSelectedItem } = properties || {}
   const fetcher = useFetcher()
 
   useEffect(() => {
@@ -29,8 +29,8 @@ export const DialogDelete = (properties: TProperties) => {
     }
 
     if (fetcher.data?.success === true) {
-      close()
+      setSelectedItem(undefined)
-      toast.success(`${title} berhasil dihapus!`)
+      toast.success('Subscribe plan berhasil dihapus!')
       return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -38,10 +38,10 @@ export const DialogDelete = (properties: TProperties) => {
 
   return (
     <Dialog
-      open={!!selectedId}
+      open={!!selectedItem}
       onClose={() => {
         if (fetcher.state === 'idle') {
-          close()
+          setSelectedItem(undefined)
         }
       }}
       className="relative z-50"
@@ -56,17 +56,20 @@ export const DialogDelete = (properties: TProperties) => {
           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">
+          <DialogTitle className="relative flex justify-start text-xl font-bold">
-            <span>Anda akan menghapus</span>{' '}
+            Anda akan menghapus subscribe plan berikut?
-            <span className="lowercase">{title}</span> <span>berikut?</span>
           </DialogTitle>
           <Description className="space-y-1 text-center text-[#565658]">
-            {children}
+            <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={fetcherAction}
+              action={`/actions/admin/subscribe-plan/delete/${selectedItem?.id}`}
               className="grid"
             >
               <Button

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

@@ -9,7 +9,6 @@ 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'
@@ -17,6 +16,8 @@ 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',
@@ -129,18 +130,9 @@ export const SubscribePlanPage = () => {
       />
 
       <DialogDelete
-        selectedId={selectedSubscribePlan?.id}
+        selectedItem={selectedSubscribePlan}
-        close={() => setSelectedSubscribePlan(undefined)}
+        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>
   )
 }

app/pages/dashboard-tags/index.tsx

@@ -1,15 +1,7 @@
-import {
-  PencilSquareIcon,
-  PlusIcon,
-  TrashIcon,
-} from '@heroicons/react/20/solid'
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
 import DataTable, { type DataTableSlots } from 'datatables.net-react'
-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'
@@ -19,7 +11,6 @@ export const TagsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard',
   )
-  const [selectedTag, setSelectedTag] = useState<TTagResponse>()
   const { tagsData: dataTable } = loaderData || {}
 
   DataTable.use(DT)
@@ -49,26 +40,15 @@ export const TagsPage = () => {
     },
   ]
   const dataSlot: DataTableSlots = {
-    3: (value: string, _type: unknown, data: TTagResponse) => (
+    3: (value: string) => (
-      <div className="flex space-x-2">
       <Button
         as="a"
         href={`/lg-admin/tags/update/${value}`}
-          size="icon"
+        className="text-md rounded-md"
-          title="Update Tag"
+        size="sm"
       >
-          <PencilSquareIcon className="h-4 w-4" />
+        Update Tag
       </Button>
-        <Button
-          type="button"
-          size="icon"
-          variant="newsDanger"
-          onClick={() => setSelectedTag(data)}
-          title="Hapus Tag"
-        >
-          <TrashIcon className="h-4 w-4" />
-        </Button>
-      </div>
     ),
   }
   const dataOptions: Config = {
@@ -89,7 +69,7 @@ export const TagsPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          <PlusIcon className="h-8 w-8" /> Buat Tag
+          Buat Tag
         </Button>
       </div>
 
@@ -100,15 +80,6 @@ export const TagsPage = () => {
         slots={dataSlot}
         title="Daftar Tags"
       />
-
-      <DialogDelete
-        selectedId={selectedTag?.id}
-        close={() => setSelectedTag(undefined)}
-        title="Tag"
-        fetcherAction={`/actions/admin/tags/delete/${selectedTag?.id}`}
-      >
-        <p>{selectedTag?.name}</p>
-      </DialogDelete>
     </div>
   )
 }

app/routes/actions.admin.tags.delete.$id.ts

@@ -1,48 +0,0 @@
-import { data } from 'react-router'
-import { XiorError } from 'xior'
-
-import { deleteTagsRequest } from '~/apis/admin/delete-tags'
-import { handleCookie } from '~/libs/cookies'
-
-import type { Route } from './+types/actions.admin.advertisements.create'
-
-export const action = async ({ request, params }: Route.ActionArgs) => {
-  const { staffToken: accessToken } = await handleCookie(request)
-  const { id } = params
-  try {
-    const { data: tagData } = await deleteTagsRequest({
-      accessToken,
-      id,
-    })
-
-    return data(
-      {
-        success: true,
-        tagData,
-      },
-      {
-        status: 200,
-        statusText: 'OK',
-      },
-    )
-  } catch (error) {
-    if (error instanceof XiorError) {
-      return data(
-        {
-          success: false,
-          message: error?.response?.data?.error?.message || error.message,
-        },
-        {
-          status: error?.response?.status || 500,
-        },
-      )
-    }
-    return data(
-      {
-        success: false,
-        message: 'Internal server error',
-      },
-      { status: 500 },
-    )
-  }
-}