From 82911a8d06f2ad59978b1ec739e6b945ac5b33fa Mon Sep 17 00:00:00 2001
From: Fajarwz <fajarwindhuzulfikar@gmail.com>
Date: Thu, 11 Apr 2024 12:57:49 +0700
Subject: [PATCH] feat: pop up confirmation before account deletion

---
 app/components/shared/form-delete.tsx |  6 ++++--
 app/routes/user.account.tsx           | 26 +++++++++-----------------
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/app/components/shared/form-delete.tsx b/app/components/shared/form-delete.tsx
index 2c13c47..2dcb7e9 100644
--- a/app/components/shared/form-delete.tsx
+++ b/app/components/shared/form-delete.tsx
@@ -27,6 +27,7 @@ export function FormDelete({
   disabled,
   extraComponent,
   className,
+  customButton,
 }: {
   action: string // Example: /user/posts/delete
   intentValue: string // Example: delete-post-by-id
@@ -39,6 +40,7 @@ export function FormDelete({
   disabled?: boolean
   extraComponent?: React.ReactNode
   className?: string
+  customButton?: React.ReactNode
 }) {
   const [open, setOpen] = useState<boolean>()
   const location = useLocation()
@@ -49,10 +51,10 @@ export function FormDelete({
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
       <AlertDialogTrigger asChild className={className}>
-        <Button variant="outline" size="xs" disabled={disabled}>
+        {customButton || <Button variant="outline" size="xs" disabled={disabled}>
           <Iconify icon="ph:trash-duotone" />
           <span>{buttonText}</span>
-        </Button>
+        </Button>}
       </AlertDialogTrigger>
 
       <AlertDialogContent>
diff --git a/app/routes/user.account.tsx b/app/routes/user.account.tsx
index 0c5a78f..98512b9 100644
--- a/app/routes/user.account.tsx
+++ b/app/routes/user.account.tsx
@@ -1,4 +1,3 @@
-import { conform, useForm } from "@conform-to/react"
 import { parse } from "@conform-to/zod"
 import {
   json,
@@ -8,16 +7,13 @@ import {
   type MetaFunction,
 } from "@remix-run/node"
 import {
-  Form,
-  useActionData,
   useLoaderData,
   useNavigation,
 } from "@remix-run/react"
-import { type z } from "zod"
 import { AvatarAuto } from "~/components/ui/avatar-auto"
 
 import { ButtonLoading } from "~/components/ui/button-loading"
-import { Input } from "~/components/ui/input"
+import { FormDelete } from "~/components/shared/form-delete"
 import { requireUser } from "~/helpers/auth"
 import { modelUser } from "~/models/user.server"
 import { schemaGeneralId } from "~/schemas/general"
@@ -39,17 +35,10 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 
 export default function UserAccountRoute() {
   const { user } = useLoaderData<typeof loader>()
-  const lastSubmission = useActionData<typeof action>()
 
   const navigation = useNavigation()
   const isSubmitting = navigation.state === "submitting"
 
-  const [form, { id }] = useForm<z.infer<typeof schemaGeneralId>>({
-    id: "delete-account",
-    lastSubmission,
-    defaultValue: { id: user.id },
-  })
-
   return (
     <div className="app-container">
       <header className="app-header items-center gap-4">
@@ -69,9 +58,12 @@ export default function UserAccountRoute() {
           </p>
         </header>
 
-        <Form method="POST" {...form.props}>
-          <fieldset disabled={isSubmitting}>
-            <Input {...conform.input(id, { type: "hidden" })} required />
+        <FormDelete
+          action=""
+          intentValue=""
+          itemText={`your account: ${user.fullname} (@${user.username})`}
+          defaultValue={user.id}
+          customButton={
             <ButtonLoading
               type="submit"
               size="sm"
@@ -81,8 +73,8 @@ export default function UserAccountRoute() {
             >
               Delete account
             </ButtonLoading>
-          </fieldset>
-        </Form>
+          }
+        />
       </section>
     </div>
   )