fix: reset input fields in API delete dialog after reopening (#2316)

* fix: reset input fields in API delete dialog after reopening

* refactor: remove unnecessary useEffect and utilize existing onOpenChange function for dialog

* refactor: removed unused imports

apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx

@@ -1,14 +1,8 @@
 "use client";
-import { Button } from "@/components/ui/button";
-import type React from "react";
-import { useState } from "react";
-
-import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { toast } from "@/components/ui/toaster";
-
 import { Loading } from "@/components/dashboard/loading";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -25,13 +19,16 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
+import type React from "react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
-
-import { cn } from "@/lib/utils";
 import { revalidate } from "./actions";
 
 type Props = {
@@ -84,6 +81,11 @@ export const DeleteApi: React.FC<Props> = ({ api, keys }) => {
     deleteApi.mutate({ apiId: api.id });
   }
 
+  function handleDialogOpenChange(newState: boolean) {
+    setOpen(newState);
+    form.reset();
+  }
+
   return (
     <>
       <Card
@@ -116,7 +118,7 @@ export const DeleteApi: React.FC<Props> = ({ api, keys }) => {
           ) : null}
         </CardFooter>
       </Card>
-      <Dialog open={open} onOpenChange={(o) => setOpen(o)}>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
         <DialogContent className="border-alert">
           <DialogHeader>
             <DialogTitle>Delete API</DialogTitle>