fix(settings): moving profile state to parent

app/account/settings/(home)/delete-account.tsx → app/account/settings/(general)/delete-account.tsx

@@ -23,11 +23,10 @@ import {
 import { Balancer } from "react-wrap-balancer";
 import { toast } from "sonner";
 import { deleteUserAction } from "../actions";
-import { User } from "lucia";
 
-export default function DeleteAccount({ user }: { user: User }) {
+export default function DeleteAccount({ id }: { id: number }) {
   const { setShowDeleteAccountModal, DeleteAccountModal } =
-    useDeleteAccountModal(user.id);
+    useDeleteAccountModal(id);
 
   return (
     <div className="rounded-lg border border-destructive bg-background">

app/account/settings/(home)/page.tsx → app/account/settings/(general)/page.tsx

@@ -2,13 +2,17 @@ import Balancer from "react-wrap-balancer";
 import { UserName, UserAvatar, DeleteAccount } from ".";
 import { getCurrentUser } from "@/lib/session";
 import { redirect } from "next/navigation";
+import { getProfile } from "@/data-access/profiles";
+import { Profile } from "@/server/db/schema";
 
 export default async function SettingsPage() {
   const user = await getCurrentUser();
   if (!user) {
     redirect("/signin");
   }
 
+  const profile = await getProfile(user.id);
+
   return (
     <div className="z-20 w-full pb-8">
       <main className="space-y-12">
@@ -20,9 +24,9 @@ export default async function SettingsPage() {
             Manage your account settings and preferences here.
           </Balancer>
         </div>
-        <UserName.default user={user} />
-        <UserAvatar.default user={user} />
-        <DeleteAccount.default user={user} />
+        <UserName.default id={user.id} name={profile?.displayName as string} />
+        <UserAvatar.default id={user.id} profile={profile as Profile} />
+        <DeleteAccount.default id={user.id} />
       </main>
     </div>
   );

app/account/settings/(home)/user-avatar.tsx → app/account/settings/(general)/user-avatar.tsx

@@ -1,19 +1,15 @@
 import { Input } from "@/components/ui/input";
-import { User } from "lucia";
 import Balancer from "react-wrap-balancer";
-import { getUserProfileAction } from "../actions";
 import Image from "next/image";
+import { Profile } from "@/server/db/schema";
 
-export default async function UserAvatar({ user }: { user: User }) {
-  const [data, err] = await getUserProfileAction({
-    userId: user.id,
-    path: "/account/settings",
-  });
-
-  if (err) {
-    return null;
-  }
-
+export default function UserAvatar({
+  id,
+  profile,
+}: {
+  id: number;
+  profile: Profile;
+}) {
   return (
     <div className="rounded-lg border bg-background text-card-foreground">
       <div className="flex items-center justify-between pr-6">
@@ -30,9 +26,9 @@ export default async function UserAvatar({ user }: { user: User }) {
           </Balancer>
         </div>
         <span className="relative flex h-16 w-16 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-accent">
-          {data?.image ? (
+          {profile?.image ? (
             <Image
-              src={data.image}
+              src={profile.image}
               alt="User Avatar"
               width={64}
               height={64}
@@ -41,7 +37,7 @@ export default async function UserAvatar({ user }: { user: User }) {
           ) : (
             <span className="flex h-full w-full items-center justify-center rounded-full bg-[#ffb92e] text-white">
               <Balancer className="text-lg">
-                {data?.displayName?.[0] || "U"}
+                {profile?.displayName?.[0] || "U"}
               </Balancer>
             </span>
           )}

app/account/settings/(general)/user-name.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { env } from "@/env";
+import Balancer from "react-wrap-balancer";
+import { updateUserAction } from "../actions";
+import { useServerAction } from "zsa-react";
+import { toast } from "sonner";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { LoaderButton } from "@/components/loader-button";
+
+const userNameSchema = z.object({
+  displayName: z.string().min(1).max(32),
+});
+
+export default function UserName({ id, name }: { id: number; name: string }) {
+  const form = useForm<z.infer<typeof userNameSchema>>({
+    resolver: zodResolver(userNameSchema),
+    defaultValues: {
+      displayName: name,
+    },
+  });
+
+  const { execute: updateProfile, isPending: isUpdatePending } =
+    useServerAction(updateUserAction, {
+      onError({ err }) {
+        toast.error(err.message);
+      },
+      onSuccess() {
+        toast.success("User name updated");
+      },
+    });
+
+  function onSubmit(values: z.infer<typeof userNameSchema>) {
+    updateProfile({
+      ...values,
+      userId: id,
+      path: "/account/settings",
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="rounded-lg border bg-background text-card-foreground">
+          <div className="flex flex-col space-y-1.5 p-6">
+            <Balancer
+              as="h3"
+              className="mb-2 text-lg font-medium leading-none tracking-tight"
+            >
+              User&apos;s Name
+            </Balancer>
+            <Balancer as="p" className="text-sm text-muted-foreground">
+              This is your user visible name within {env.NEXT_PUBLIC_APP_NAME}.
+            </Balancer>
+          </div>
+          <div className="p-6 pt-0">
+            <div className="space-y-2">
+              <FormField
+                control={form.control}
+                name="displayName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        className="flex h-9 w-full max-w-[600px] border bg-transparent px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                        autoComplete="off"
+                        autoCapitalize="none"
+                        autoCorrect="off"
+                        spellCheck="false"
+                        maxLength={32}
+                        {...field}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </div>
+          </div>
+          <div className="flex items-center justify-between border-t p-6 text-xs text-muted-foreground">
+            <Balancer>Please use 32 characters at maximum.</Balancer>
+            <LoaderButton
+              className="inline-flex h-9 items-center justify-center bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+              type="submit"
+              isLoading={isUpdatePending}
+            >
+              Save
+            </LoaderButton>
+          </div>
+        </div>
+      </form>
+    </Form>
+  );
+}