add name form

app/api/auth/[...nextauth]/route.ts

@@ -18,7 +18,7 @@ const options: NextAuthOptions = {
   ],
   callbacks: {
     async signIn({ user }: { user: User | AdapterUser }) {
-      if (!user.email || !user.name) {
+      if (!user.email) {
         return false;
       }
 
@@ -33,7 +33,6 @@ const options: NextAuthOptions = {
           await prisma.user.create({
             data: {
               email: user.email,
-              name: user.name,
             },
           });
         }

app/api/party/join/route.ts

@@ -1,10 +1,7 @@
+import { PartyJoinBody } from "@/lib/party";
 import prisma from "@/lib/prisma";
 import { getServerSession } from "next-auth";
 
-type PartyJoinBody = {
-  code?: string;
-};
-
 export async function POST(req: Request) {
   const session = await getServerSession();
   if (!session?.user?.email) {

app/api/user/[name]/route.ts

@@ -0,0 +1,35 @@
+import prisma from "@/lib/prisma";
+
+export async function GET(
+  _: Request,
+  { params }: { params: { name: string } },
+) {
+  const users = await prisma.user.findMany({
+    where: {
+      name: {
+        equals: params.name,
+        mode: "insensitive",
+      },
+    },
+    select: {
+      name: true,
+      kills: true,
+      deaths: true,
+      wins: true,
+    },
+  });
+
+  if (users.length > 1) {
+    return Response.json(`More than one user with name ${params.name} found`, {
+      status: 500,
+    });
+  }
+
+  if (users.length === 0) {
+    return Response.json(`Could not find user with name ${params.name}`, {
+      status: 400,
+    });
+  }
+
+  return Response.json(users[0]);
+}

app/api/user/route.ts

@@ -1,5 +1,6 @@
-import { getUser } from "@/lib/user";
+import { UserBody, getUser } from "@/lib/user";
 import { getServerSession } from "next-auth";
+import prisma from "@/lib/prisma";
 
 export async function GET() {
   const session = await getServerSession();
@@ -10,3 +11,47 @@ export async function GET() {
   const user = await getUser(session.user.email);
   return Response.json(user);
 }
+
+export async function POST(req: Request) {
+  const session = await getServerSession();
+  if (!session?.user?.email) {
+    return Response.json(null, { status: 401 });
+  }
+
+  const body: UserBody = await req.json();
+  const name = body.name?.trim();
+
+  if (!name) {
+    return Response.json("Name cannot be empty", { status: 400 });
+  }
+
+  if (!name.match(/^[0-9a-zA-Z]+$/)) {
+    return Response.json("Name must be alphanumeric", { status: 400 });
+  }
+
+  if (name.length > 16) {
+    return Response.json("Name must be <= 16 characters", { status: 400 });
+  }
+
+  let user = await prisma.user.findFirst({
+    where: {
+      name: {
+        equals: name,
+        mode: "insensitive",
+      },
+    },
+  });
+
+  if (user) {
+    return Response.json("Name is already taken", { status: 400 });
+  }
+
+  user = await prisma.user.update({
+    where: { email: session.user.email },
+    data: {
+      name,
+    },
+  });
+
+  return Response.json(user);
+}

app/leaderboard/page.tsx

@@ -1,28 +1,5 @@
 import LeaderboardRow from "@/components/LeaderboardRow";
-import prisma from "@/lib/prisma";
-
-async function getLeaderboardUsers() {
-  return await prisma.user.findMany({
-    select: {
-      id: true,
-      name: true,
-      kills: true,
-      deaths: true,
-      wins: true,
-    },
-    orderBy: [
-      {
-        wins: "desc",
-      },
-      {
-        kills: "desc",
-      },
-      {
-        deaths: "asc",
-      },
-    ],
-  });
-}
+import { getLeaderboardUsers } from "@/lib/user";
 
 export default async function Leaderboard() {
   const users = await getLeaderboardUsers();

app/user/[id]/page.tsx → app/user/[name]/page.tsx

@@ -1,11 +1,15 @@
 import prisma from "@/lib/prisma";
 
-export default async function UserById({ params }: { params: { id: string } }) {
-  const id = params.id;
-  const user = await prisma.user.findUnique({ where: { id } });
+export default async function UserById({
+  params,
+}: {
+  params: { name: string };
+}) {
+  const name = params.name;
+  const user = await prisma.user.findUnique({ where: { name } });
 
   if (!user) {
-    return <p>No user found with id {id}</p>;
+    return <p>No user found with name {name}</p>;
   }
 
   return (

components/JoinParty.tsx

@@ -4,23 +4,20 @@ import { useContext } from "react";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { useSWRConfig } from "swr";
 import { ErrorContext } from "./App";
-
-type Inputs = {
-  code: string;
-};
+import { PartyJoinBody } from "@/lib/party";
 
 export default function JoinParty() {
   const { mutate } = useSWRConfig();
-  const { handleSubmit, control } = useForm<Inputs>();
+  const { handleSubmit, control } = useForm<PartyJoinBody>();
   const { setError } = useContext(ErrorContext);
 
-  const onSubmit: SubmitHandler<Inputs> = async ({ code }) => {
+  const onSubmit: SubmitHandler<PartyJoinBody> = async ({ code }) => {
     const res = await fetch("/api/party/join", {
       method: "POST",
       headers: {
         "Content-type": "application/json",
       },
-      body: JSON.stringify({ code: code.toLowerCase() }),
+      body: JSON.stringify({ code: code?.toLowerCase() }),
     });
 
     if (!res.ok) {

components/LeaderboardRow.tsx

@@ -13,7 +13,7 @@ export default function LeaderboardRow({
   const router = useRouter();
 
   async function onClick() {
-    router.push(`/user/${user.id}`);
+    router.push(`/user/${user.name}`);
   }
 
   return (

components/NameForm.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useContext } from "react";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import { useSWRConfig } from "swr";
+import { ErrorContext } from "./App";
+import { UserBody } from "@/lib/user";
+
+export default function NameForm() {
+  const { mutate } = useSWRConfig();
+  const { handleSubmit, control } = useForm<UserBody>();
+  const { setError } = useContext(ErrorContext);
+
+  const onSubmit: SubmitHandler<UserBody> = async ({ name }) => {
+    const res = await fetch("/api/user", {
+      method: "POST",
+      headers: {
+        "Content-type": "application/json",
+      },
+      body: JSON.stringify({ name }),
+    });
+
+    if (!res.ok) {
+      setError(await res.json());
+      return;
+    }
+
+    mutate("/api/user");
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <h1 className="text-3xl">Set Username</h1>
+      <p className="text-center">
+        Please choose a username. You won't be able to change this in the
+        future.
+      </p>
+      <Controller
+        name="name"
+        control={control}
+        render={({ field }) => (
+          <input
+            {...field}
+            className="input input-bordered"
+            placeholder="Username"
+            required
+          />
+        )}
+      />
+      <button className="btn btn-primary">Save</button>
+    </form>
+  );
+}

components/Navbar.tsx

@@ -24,7 +24,7 @@ export default async function Navbar() {
         <ul className="menu menu-horizontal px-2">
           {user && (
             <li>
-              <a href={`/user/${user.id}`}>Profile</a>
+              <a href={`/user/${user.name}`}>Profile</a>
             </li>
           )}
           <li>

components/Party.tsx

@@ -16,6 +16,7 @@ import { User } from "@/lib/user";
 import ConfirmKill from "./ConfirmKill";
 import DenyKill from "./DenyKill";
 import Player from "./Player";
+import NameForm from "./NameForm";
 
 export default function Party() {
   const fetcher: Fetcher<User, string> = (url) =>
@@ -38,6 +39,10 @@ export default function Party() {
     return <Alert>User not found. Try logging in.</Alert>;
   }
 
+  if (!user.name) {
+    return <NameForm />;
+  }
+
   const party = user.party;
   if (!party) {
     return (

lib/party.ts

@@ -1,6 +1,10 @@
 import _ from "lodash";
 import prisma from "./prisma";
 
+export type PartyJoinBody = {
+  code?: string;
+};
+
 export async function removePlayer(email: string) {
   const user = await prisma.user.findUniqueOrThrow({
     where: {

lib/user.ts

@@ -3,6 +3,10 @@ import prisma from "./prisma";
 export type User = Awaited<ReturnType<typeof getUser>>;
 export type Party = NonNullable<User["party"]>;
 
+export type UserBody = {
+  name?: string;
+};
+
 export async function getUser(email: string) {
   return await prisma.user.findUniqueOrThrow({
     where: {
@@ -23,10 +27,14 @@ export async function getUser(email: string) {
 export type LeaderboardUsers = Awaited<ReturnType<typeof getLeaderboardUsers>>;
 export type LeaderboardUser = LeaderboardUsers[0];
 
-async function getLeaderboardUsers() {
+export async function getLeaderboardUsers() {
   return await prisma.user.findMany({
+    where: {
+      name: {
+        not: null,
+      },
+    },
     select: {
-      id: true,
       name: true,
       kills: true,
       deaths: true,

prisma/schema.prisma

@@ -8,9 +8,9 @@ generator client {
 }
 
 model User {
-  id    String @id @default(auto()) @map("_id") @db.ObjectId
-  email String @unique
-  name  String
+  id    String  @id @default(auto()) @map("_id") @db.ObjectId
+  email String  @unique
+  name  String? @unique
 
   alive   Boolean @default(false)
   pending Boolean @default(false)