From 17486b961d99bcfbf8908ef1f732d0ee0811b385 Mon Sep 17 00:00:00 2001
From: Catalin Pit <catalinpit@gmail.com>
Date: Tue, 19 Dec 2023 15:51:43 +0200
Subject: [PATCH] chore: refactor delete dialog

---
 .../settings/token/delete-token-dialog.tsx    | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx b/apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx
index 1e3513d98..b3f57018b 100644
--- a/apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx
+++ b/apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx
@@ -44,6 +44,7 @@ export default function DeleteTokenDialog({
   const router = useRouter();
   const { toast } = useToast();
   const [isOpen, setIsOpen] = useState(false);
+  const [isDeleteEnabled, setIsDeleteEnabled] = useState(false);
 
   const deleteMessage = `delete ${tokenName}`;
 
@@ -68,6 +69,10 @@ export default function DeleteTokenDialog({
     },
   });
 
+  const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIsDeleteEnabled(event.target.value === deleteMessage);
+  };
+
   const onSubmit = async () => {
     try {
       await deleteTokenMutation({
@@ -94,10 +99,11 @@ export default function DeleteTokenDialog({
   };
 
   useEffect(() => {
-    if (!open) {
+    if (!isOpen) {
+      setIsDeleteEnabled(false);
       form.reset();
     }
-  }, [open, form]);
+  }, [isOpen, form]);
 
   return (
     <Dialog
@@ -139,7 +145,15 @@ export default function DeleteTokenDialog({
                       </span>
                     </FormLabel>
                     <FormControl>
-                      <Input className="bg-background" {...field} />
+                      <Input
+                        className="bg-background"
+                        type="text"
+                        {...field}
+                        onChange={(value) => {
+                          onInputChange(value);
+                          field.onChange(value);
+                        }}
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -159,7 +173,7 @@ export default function DeleteTokenDialog({
                   <Button
                     type="submit"
                     variant="destructive"
-                    disabled={!form.formState.isDirty}
+                    disabled={!isDeleteEnabled}
                     loading={form.formState.isSubmitting}
                   >
                     I'm sure! Delete it