From 6decb086523b793fcfbfe3ffc73df7f9aa4d3caf Mon Sep 17 00:00:00 2001
From: Ankur Jaiswal <ankurjaiswalofficial@gmail.com>
Date: Fri, 11 Oct 2024 06:44:04 +0000
Subject: [PATCH] handled form using useEffect hook

---
 .../app/(app)/apis/[apiId]/settings/delete-api.tsx   | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx
index b4629fa8ec..c49a088b5a 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import type React from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -84,11 +84,19 @@ export const DeleteApi: React.FC<Props> = ({ api, keys }) => {
     deleteApi.mutate({ apiId: api.id });
   }
 
+  // whenever the form is opened the state changes and on unmounting the dialog the form will automatically reset 
+  useEffect(() => {
+    if (!open) {
+      form.reset(); // This will reset all the fields in the form
+      form.clearErrors(); // This will clear or remove all the errors (if any) as a part of resetting
+    }
+  }, [open, form.reset]); // reset dependencies which will trigger tyhe useEffect hook to call upon
+
   return (
     <>
       <Card
         className={cn("relative ", {
-          "borrder-opacity-50": api.deleteProtection,
+          "border-opacity-50": api.deleteProtection,
           "border-2 border-alert": !api.deleteProtection,
         })}
       >