feat: add name editing functionality to profile

Co-Authored-By: Harkirat Singh <[email protected]>

Author: devin-ai-integration[bot]

apps/web/app/api/user/update/route.ts

@@ -0,0 +1,23 @@
+import { getServerSession } from "next-auth";
+import { NextResponse } from "next/server";
+import db from "@repo/db/client";
+import { authOptions } from "../../../../lib/auth";
+
+export async function PUT(req: Request) {
+  const session = await getServerSession(authOptions);
+  if (!session?.user?.email) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const { name } = await req.json();
+  if (!name) {
+    return NextResponse.json({ error: "Name is required" }, { status: 400 });
+  }
+
+  const user = await db.user.update({
+    where: { email: session.user.email },
+    data: { name }
+  });
+
+  return NextResponse.json(user);
+}

apps/web/components/UserDetailForm.tsx

@@ -1,9 +1,30 @@
-import { Input, Label } from "@repo/ui";
-import React from "react";
+import { Input, Label, Button } from "@repo/ui";
+import { Pencil, Check, X } from "lucide-react";
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
 import UserImage from "./UserImage";
 import { User } from "@prisma/client";
 
 export default function UserDetailForm({ user }: { user: User }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [name, setName] = useState(user?.name || "");
+  const router = useRouter();
+
+  const handleSubmit = async () => {
+    try {
+      const res = await fetch("/api/user/update", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name })
+      });
+      if (!res.ok) throw new Error("Failed to update name");
+      setIsEditing(false);
+      router.refresh(); // Refresh the page to update session data
+    } catch (error) {
+      console.error("Error updating name:", error);
+    }
+  };
+
   return (
     <form className="flex flex-col gap-4">
       <Label className="mb-2">Profile Picture</Label>
@@ -15,7 +36,46 @@ export default function UserDetailForm({ user }: { user: User }) {
 
       <div>
         <Label className="">Your name</Label>
-        <Input disabled placeholder="Enter your name" value={user?.name ? user?.name : ""} className="p-2 mt-2" />
+        <div className="flex items-center gap-2 mt-2">
+          <Input
+            disabled={!isEditing}
+            value={isEditing ? name : (user?.name || "")}
+            onChange={(e) => setName(e.target.value)}
+            className="p-2"
+          />
+          {!isEditing ? (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsEditing(true)}
+              type="button"
+            >
+              <Pencil className="h-4 w-4" />
+            </Button>
+          ) : (
+            <>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleSubmit}
+                type="button"
+              >
+                <Check className="h-4 w-4 text-green-500" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => {
+                  setIsEditing(false);
+                  setName(user?.name || "");
+                }}
+                type="button"
+              >
+                <X className="h-4 w-4 text-red-500" />
+              </Button>
+            </>
+          )}
+        </div>
       </div>
       <div>
         <Label className="">Your Email</Label>