update leader board and add user page

minhd-vu · Feb 26, 2024 · 67f3cb6 · 67f3cb6
1 parent 315d393
commit 67f3cb6
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 7 deletions.
diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
@@ -1,8 +1,10 @@
+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,
@@ -26,13 +28,7 @@ export default async function Leaderboard() {
   const users = await getLeaderboardUsers();
 
   const rows = users.map((user, i) => (
-    <tr key={user.name} className="hover">
-      <th>{i + 1}</th>
-      <th>{user.name}</th>
-      <td>{user.kills}</td>
-      <td>{user.deaths}</td>
-      <td>{user.wins}</td>
-    </tr>
+    <LeaderboardRow user={user} rank={i + 1} />
   ));
 
   return (

diff --git a/app/user/[id]/page.tsx b/app/user/[id]/page.tsx
@@ -0,0 +1,120 @@
+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 } });
+
+  if (!user) {
+    return <p>No user found with id {id}</p>;
+  }
+
+  return (
+    <>
+      <h1 className="text-5xl font-bold text-center">{user.name}</h1>
+      <p className="text-sm font-light italic text-center">{user.id}</p>
+      <div className="stats shadow bg-base-300 m-4">
+        <div className="stat">
+          <div className="stat-figure text-secondary">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="inline-block w-8 h-8 stroke-current"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M6.5 7h11" />
+              <path d="M6.5 17h11" />
+              <path d="M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1z" />
+              <path d="M6 4v2a6 6 0 1 0 12 0v-2a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1z" />
+            </svg>
+          </div>
+          <div className="stat-title">Date Joined</div>
+          <div className="stat-value">
+            {user.createdAt.toLocaleDateString()}
+          </div>
+        </div>
+        <div className="stat">
+          <div className="stat-figure text-secondary">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="inline-block w-8 h-8 stroke-current"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M8 21l8 0" />
+              <path d="M12 17l0 4" />
+              <path d="M7 4l10 0" />
+              <path d="M17 4v8a5 5 0 0 1 -10 0v-8" />
+              <path d="M5 9m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+              <path d="M19 9m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+            </svg>
+          </div>
+          <div className="stat-title">Wins</div>
+          <div className="stat-value">{user.wins}</div>
+        </div>
+        <div className="stat">
+          <div className="stat-figure text-secondary">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="inline-block w-8 h-8 stroke-current"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M21 3v5l-11 9l-4 4l-3 -3l4 -4l9 -11z" />
+              <path d="M5 13l6 6" />
+              <path d="M14.32 17.32l3.68 3.68l3 -3l-3.365 -3.365" />
+              <path d="M10 5.5l-2 -2.5h-5v5l3 2.5" />
+            </svg>
+          </div>
+          <div className="stat-title">Kills</div>
+          <div className="stat-value">{user.kills}</div>
+        </div>
+        <div className="stat">
+          <div className="stat-figure text-secondary">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="inline-block w-8 h-8 stroke-current"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M12 4c4.418 0 8 3.358 8 7.5c0 1.901 -.755 3.637 -2 4.96l0 2.54a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1v-2.54c-1.245 -1.322 -2 -3.058 -2 -4.96c0 -4.142 3.582 -7.5 8 -7.5z" />
+              <path d="M10 17v3" />
+              <path d="M14 17v3" />
+              <path d="M9 11m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+              <path d="M15 11m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            </svg>
+          </div>
+          <div className="stat-title">Deaths</div>
+          <div className="stat-value">{user.deaths}</div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/components/LeaderboardRow.tsx b/components/LeaderboardRow.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { LeaderboardUser } from "@/lib/user";
+import { useRouter } from "next/navigation";
+
+export default function LeaderboardRow({
+  user,
+  rank,
+}: {
+  user: LeaderboardUser;
+  rank: number;
+}) {
+  const router = useRouter();
+
+  async function onClick() {
+    router.push(`/user/${user.id}`);
+  }
+
+  return (
+    <tr key={user.name} className="hover" onClick={() => onClick()}>
+      <th>{rank}</th>
+      <th>{user.name}</th>
+      <td>{user.kills}</td>
+      <td>{user.deaths}</td>
+      <td>{user.wins}</td>
+    </tr>
+  );
+}
diff --git a/lib/user.ts b/lib/user.ts
@@ -18,3 +18,29 @@ export async function getUser(email: string) {
     },
   });
 }
+
+export type LeaderboardUsers = Awaited<ReturnType<typeof getLeaderboardUsers>>;
+export type LeaderboardUser = LeaderboardUsers[0];
+
+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",
+      },
+    ],
+  });
+}