Working profile system

src/app/api/profile/route.ts

@@ -1,6 +1,58 @@
 import { StatusCodes } from "http-status-codes";
 import { NextRequest, NextResponse } from "next/server";
 import { supabase } from "../supa";
+import { ProfileSettings } from "@/types/settings";
+
+/**
+ * POST /api/profile
+ * body { username, display_name, avatar_url }
+ */
+export async function POST(req: NextRequest) {
+  const url = new URL(req.url);
+  const token = req.cookies.get("token")?.value;
+  const { username, display_name, avatar_url } =
+    (await req.json()) as ProfileSettings;
+
+  if (!token)
+    return NextResponse.json(
+      { message: "Token cookie not found" },
+      { status: StatusCodes.BAD_REQUEST }
+    );
+
+  if (!username || !display_name || !avatar_url)
+    return NextResponse.json(
+      { message: "Invalid body, requires username, display_name, avatar_url" },
+      { status: StatusCodes.BAD_REQUEST }
+    );
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser(token);
+
+  if (!user)
+    return NextResponse.json(
+      { message: "Invalid token" },
+      { status: StatusCodes.NOT_FOUND }
+    );
+
+  const { error } = await supabase
+    .from("profiles")
+    .update({
+      username,
+      display_name,
+      avatar_url,
+    })
+    .eq("id", user.id);
+
+  if (error) {
+    return NextResponse.json(
+      { message: error.message },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
+  }
+
+  return NextResponse.json({ message: "ok" });
+}
 
 /**
  * GET /api/profile?id=<id>
@@ -33,7 +85,7 @@ export async function GET(req: NextRequest) {
 
   const { data: profile } = await supabase
     .from("profiles")
-    .select("id, username, name, email")
+    .select("id, username, display_name, avatar_url")
     .eq("id", user_id)
     .maybeSingle();
 

src/app/settings/page.tsx

@@ -1,19 +1,20 @@
 "use client";
 
-import { useAccountSettings, useClientSettings } from "@/hooks/use-settings";
+import { useProfileSettings, useClientSettings } from "@/hooks/use-settings";
 import { setClientSettings } from "@/lib/clientSettings";
 import Settings from "./settings";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Card } from "@/components/ui/card";
 import { CardContent } from "@/components/ui/card";
-import { ACCOUNT_SCHEMA, CLIENT_SCHEMA } from "@/types/settings";
+import { PROFILE_SCHEMA, CLIENT_SCHEMA } from "@/types/settings";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { ChevronLeftCircle } from "lucide-react";
+import axios from "axios";
 
 export default function SettingsPage() {
   const [settings, setSettings] = useClientSettings();
-  const [accountSettings, setAccountSettings] = useAccountSettings();
+  const [profileSettings, setProfileSettings] = useProfileSettings();
   const router = useRouter();
 
   return (
@@ -28,7 +29,7 @@ export default function SettingsPage() {
       <Tabs className="mx-auto mt-3" defaultValue="client">
         <TabsList className="mx-auto">
           <TabsTrigger value="client">Client Settings</TabsTrigger>
-          <TabsTrigger value="account">Account Settings</TabsTrigger>
+          <TabsTrigger value="profile">Profile Settings</TabsTrigger>
         </TabsList>
         <TabsContent value="client">
           <Card className="w-xl mx-auto">
@@ -45,14 +46,16 @@ export default function SettingsPage() {
             </CardContent>
           </Card>
         </TabsContent>
-        <TabsContent value="account">
+        <TabsContent value="profile">
           <Card className="w-xl mx-auto">
             <CardContent className="flex flex-col gap-3">
               <Settings
-                settings={accountSettings}
-                setSettings={setAccountSettings}
-                schema={ACCOUNT_SCHEMA}
-                onSave={() => {}}
+                settings={profileSettings}
+                setSettings={setProfileSettings}
+                schema={PROFILE_SCHEMA}
+                onSave={async () => {
+                  await axios.post("/api/profile", profileSettings);
+                }}
               />
             </CardContent>
           </Card>