From 985d75afadfc989f937f8e28dc270afddad6f9f0 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Wed, 11 Dec 2024 23:10:54 +0000
Subject: [PATCH 1/2] feat: add name editing functionality to profile

Co-Authored-By: Harkirat Singh <harkirat96@gmail.com>
---
 apps/web/app/api/user/update/route.ts  | 23 +++++++++
 apps/web/components/UserDetailForm.tsx | 66 ++++++++++++++++++++++++--
 2 files changed, 86 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/app/api/user/update/route.ts

diff --git a/apps/web/app/api/user/update/route.ts b/apps/web/app/api/user/update/route.ts
new file mode 100644
index 00000000..8a6168a6
--- /dev/null
+++ b/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);
+}
diff --git a/apps/web/components/UserDetailForm.tsx b/apps/web/components/UserDetailForm.tsx
index aad4a2a9..ab65bc23 100644
--- a/apps/web/components/UserDetailForm.tsx
+++ b/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>

From 5c7855760cf44a687a29e523784717cd5b4caf95 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 12 Dec 2024 00:46:47 +0000
Subject: [PATCH 2/2] fix: update session after name change

Co-Authored-By: Harkirat Singh <harkirat96@gmail.com>
---
 apps/web/components/UserDetailForm.tsx | 30 +++++++++++---------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/apps/web/components/UserDetailForm.tsx b/apps/web/components/UserDetailForm.tsx
index ab65bc23..10df06c3 100644
--- a/apps/web/components/UserDetailForm.tsx
+++ b/apps/web/components/UserDetailForm.tsx
@@ -2,12 +2,14 @@ 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 { useSession } from "next-auth/react";
 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 { data: session, update: updateSession } = useSession();
   const router = useRouter();
 
   const handleSubmit = async () => {
@@ -15,11 +17,13 @@ export default function UserDetailForm({ user }: { user: User }) {
       const res = await fetch("/api/user/update", {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name })
+        body: JSON.stringify({ name }),
       });
       if (!res.ok) throw new Error("Failed to update name");
+
+      await updateSession();
       setIsEditing(false);
-      router.refresh(); // Refresh the page to update session data
+      router.refresh();
     } catch (error) {
       console.error("Error updating name:", error);
     }
@@ -29,37 +33,27 @@ export default function UserDetailForm({ user }: { user: User }) {
     <form className="flex flex-col gap-4">
       <Label className="mb-2">Profile Picture</Label>
       <div className="flex items-center justify-center">
-        <div className="!w-[6rem] !h-[6rem] flex items-center hover:bg-[#030712] p-[0.2rem] justify-center ">
+        <div className="flex !h-[6rem] !w-[6rem] items-center justify-center p-[0.2rem] hover:bg-[#030712]">
           <UserImage image={user?.image} key={user?.image} />
         </div>
       </div>
 
       <div>
         <Label className="">Your name</Label>
-        <div className="flex items-center gap-2 mt-2">
+        <div className="mt-2 flex items-center gap-2">
           <Input
             disabled={!isEditing}
-            value={isEditing ? name : (user?.name || "")}
+            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"
-            >
+            <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"
-              >
+              <Button variant="ghost" size="icon" onClick={handleSubmit} type="button">
                 <Check className="h-4 w-4 text-green-500" />
               </Button>
               <Button
@@ -79,7 +73,7 @@ export default function UserDetailForm({ user }: { user: User }) {
       </div>
       <div>
         <Label className="">Your Email</Label>
-        <Input disabled placeholder="Enter your name" value={user?.email ? user?.email : ""} className="p-2 mt-2" />
+        <Input disabled placeholder="Enter your name" value={user?.email ? user?.email : ""} className="mt-2 p-2" />
       </div>
     </form>
   );