refactor: modularize settings form into smaller components

1 files changed, 115 insertions, 0 deletions

diff --git a/src/app/settings/profile-form.tsx b/src/app/settings/profile-form.tsx
new file mode 100644
index 0000000..6f532f0
--- /dev/null
+++ b/src/app/settings/profile-form.tsx
@@ -0,0 +1,115 @@
+"use client"
+
+import { useState } from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Loader2, User, Save } from "lucide-react"
+import { toast } from "sonner"
+import { Session } from "next-auth"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { updateProfileSchema, type UpdateProfileInput } from "@/lib/validation"
+
+interface ProfileFormProps {
+  user: {
+    name?: string | null
+    email?: string | null
+  }
+  update: (data?: { name?: string | null; email?: string | null; image?: string | null }) => Promise<Session | null>
+}
+
+export function ProfileForm({ user, update }: ProfileFormProps) {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const form = useForm<UpdateProfileInput>({
+    resolver: zodResolver(updateProfileSchema),
+    defaultValues: {
+      name: user.name || "",
+      email: user.email || "",
+    },
+  })
+
+  const onSubmit = async (data: UpdateProfileInput) => {
+    setIsLoading(true)
+
+    try {
+      const response = await fetch("/api/user/profile", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      })
+
+      const result = await response.json()
+
+      if (!response.ok) {
+        toast.error(result.error || "Failed to update profile")
+        return
+      }
+
+      await update({
+        name: data.name,
+        email: data.email,
+      })
+
+      toast.success("Profile updated successfully!")
+    } catch {
+      toast.error("An unexpected error occurred")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center">
+          <User className="mr-2 h-5 w-5" />
+          Profile Information
+        </CardTitle>
+        <CardDescription>
+          Update your personal information
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Full Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="John Doe" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email Address</FormLabel>
+                  <FormControl>
+                    <Input type="email" placeholder="john@example.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit" disabled={isLoading}>
+              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              <Save className="mr-2 h-4 w-4" />
+              Save Changes
+            </Button>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  )
+}