Bug Fixes

components/dialogues/EditSite.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useState, useEffect } from "react"
+import { useState, useEffect, forwardRef, useImperativeHandle } from "react"
 import axios from "axios"
 import { Site } from "@/app/types"
 import { PencilLine, Building2, FileText } from "lucide-react"
@@ -12,16 +12,24 @@ interface EditSiteProps {
   onSiteEdited?: () => void
 }
 
-export default function EditSite({ site, onSiteEdited }: EditSiteProps) {
+const EditSite = forwardRef<{ resetForm: () => void }, EditSiteProps>(({ site, onSiteEdited }, ref) => {
   const [name, setName] = useState(site.name)
   const [description, setDescription] = useState(site.description || "")
   const [error, setError] = useState("")
   const [success, setSuccess] = useState("")
   const { editSite } = useSite()
 
-  useEffect(() => {
+  const resetForm = () => {
     setName(site.name)
     setDescription(site.description || "")
+  }
+
+  useImperativeHandle(ref, () => ({
+    resetForm
+  }))
+
+  useEffect(() => {
+    resetForm()
   }, [site])
 
   const handleEditSite = async () => {
@@ -40,9 +48,6 @@ export default function EditSite({ site, onSiteEdited }: EditSiteProps) {
         }
       } catch (apiError) {
         setError(typeof apiError === "string" ? apiError : "Failed to edit site")
-      } finally {
-        setName("")
-        setDescription("")
       }
   }
 
@@ -95,7 +100,7 @@ export default function EditSite({ site, onSiteEdited }: EditSiteProps) {
 
           <div className="modal-action">
             <form method="dialog" className="flex gap-3 w-full justify-end">
-              <button className="btn btn-outline">Cancel</button>
+              <button className="btn btn-outline" onClick={resetForm}>Cancel</button>
               <button 
                 className="btn btn-primary" 
                 onClick={handleEditSite}
@@ -111,4 +116,8 @@ export default function EditSite({ site, onSiteEdited }: EditSiteProps) {
       <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
     </div>
   )
-}
+})
+
+EditSite.displayName = 'EditSite'
+
+export default EditSite