Fix update button functionality and center it in dialog footer

Author: PocketPi

components/edit-car-button.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useRef } from "react"
 import { Pencil } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
@@ -11,7 +11,7 @@ import {
   DialogTrigger,
   DialogFooter,
 } from "@/components/ui/dialog"
-import { EditCarForm } from "./edit-car-form"
+import { EditCarForm, EditCarFormRef } from "./edit-car-form"
 
 interface EditCarButtonProps {
   car: {
@@ -27,6 +27,7 @@ interface EditCarButtonProps {
 export function EditCarButton({ car }: EditCarButtonProps) {
   const [open, setOpen] = useState(false)
   const [imageUrl, setImageUrl] = useState<string | null>(car.imageUrl)
+  const formRef = useRef<EditCarFormRef>(null)
 
   const handleOpenChange = (newOpen: boolean) => {
     setOpen(newOpen)
@@ -35,6 +36,10 @@ export function EditCarButton({ car }: EditCarButtonProps) {
     }
   }
 
+  const handleSubmit = () => {
+    formRef.current?.submit()
+  }
+
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
@@ -48,13 +53,14 @@ export function EditCarButton({ car }: EditCarButtonProps) {
           <DialogTitle>Edit Car</DialogTitle>
         </DialogHeader>
         <EditCarForm 
+          ref={formRef}
           car={car} 
           formId="edit-car-form"
           onSuccess={() => setOpen(false)}
           onImageUrlChange={setImageUrl}
         />
-        <DialogFooter>
-          <Button type="submit" form="edit-car-form" disabled={!imageUrl}>
+        <DialogFooter className="justify-center">
+          <Button onClick={handleSubmit} disabled={!imageUrl}>
             Update Car
           </Button>
         </DialogFooter>

components/edit-car-form.tsx

@@ -4,7 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import { useRouter } from "next/navigation"
 import * as z from "zod"
-import { useState, useEffect } from "react"
+import { useState, useEffect, useImperativeHandle, forwardRef } from "react"
 import Image from "next/image"
 import { X } from "lucide-react"
 
@@ -36,25 +36,38 @@ interface EditCarFormProps {
   onImageUrlChange?: (url: string | null) => void
 }
 
-export function EditCarForm({ car, onSuccess, formId, onImageUrlChange }: EditCarFormProps) {
-  const router = useRouter()
-  const [isImageUploaded, setIsImageUploaded] = useState(false)
-  const [imageUrl, setImageUrl] = useState<string | null>(car.imageUrl)
+export interface EditCarFormRef {
+  submit: () => void
+  imageUrl: string | null
+}
 
-  const updateImageUrl = (url: string | null) => {
-    setImageUrl(url)
-    onImageUrlChange?.(url)
-  }
+export const EditCarForm = forwardRef<EditCarFormRef, EditCarFormProps>(
+  ({ car, onSuccess, formId, onImageUrlChange }, ref) => {
+    const router = useRouter()
+    const [isImageUploaded, setIsImageUploaded] = useState(false)
+    const [imageUrl, setImageUrl] = useState<string | null>(car.imageUrl)
+
+    const updateImageUrl = (url: string | null) => {
+      setImageUrl(url)
+      onImageUrlChange?.(url)
+    }
 
-  const form = useForm<FormValues>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      manufacturer: car.manufacturer || "",
-      model: car.model || "",
-      points: car.points || 0,
-      episode: car.episode || 1,
-    },
-  })
+    const form = useForm<FormValues>({
+      resolver: zodResolver(formSchema),
+      defaultValues: {
+        manufacturer: car.manufacturer || "",
+        model: car.model || "",
+        points: car.points || 0,
+        episode: car.episode || 1,
+      },
+    })
+
+    useImperativeHandle(ref, () => ({
+      submit: () => {
+        form.handleSubmit(onSubmit)()
+      },
+      imageUrl,
+    }))
 
   useEffect(() => {
     if (car.imageUrl) {
@@ -202,6 +215,9 @@ export function EditCarForm({ car, onSuccess, formId, onImageUrlChange }: EditCa
       </form>
     </Form>
   )
-}
+  }
+)
+
+EditCarForm.displayName = "EditCarForm"