add profile claiming

src/app/player/[id]/page.tsx

@@ -10,7 +10,7 @@ import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
 import { formatNumber } from "@/utils/number";
 import { fetchScores, getPlayerInfo } from "@/utils/scoresaber/api";
-import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid";
+import { GlobeAsiaAustraliaIcon, HomeIcon } from "@heroicons/react/20/solid";
 import moment from "moment";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
@@ -53,7 +53,7 @@ export default function Player({ params }: { params: { id: string } }) {
         (scoresResponse) => {
           if (!scoresResponse) {
             setError(true);
-            setErrorMessage("Failed to fetch scores");
+            setErrorMessage("No Scores");
             setScores({ ...scores, loading: false });
             return;
           }
@@ -70,6 +70,15 @@ export default function Player({ params }: { params: { id: string } }) {
     [params.id, scores],
   );
 
+  function claimProfile() {
+    // set cookie to claim profile
+    document.cookie = `profile=${params.id};path=/`;
+  }
+
+  function isClaimedProfile() {
+    return document.cookie.includes(`profile=${params.id}`);
+  }
+
   useEffect(() => {
     if (!params.id) {
       setError(true);
@@ -129,7 +138,20 @@ export default function Player({ params }: { params: { id: string } }) {
         {/* Player Info */}
         <div className="mt-2 flex w-full flex-row justify-center rounded-md bg-gray-800 xs:flex-col">
           <div className="flex flex-col items-center gap-3 p-3 xs:flex-row xs:items-start">
+            <div>
+              <div className="flex flex-col items-center gap-2">
                 <Avatar url={playerData.profilePicture} label="Avatar" />
+                {!isClaimedProfile() && (
+                  <button onClick={claimProfile}>
+                    <HomeIcon
+                      title="Set as your profile"
+                      width={24}
+                      height={24}
+                    />
+                  </button>
+                )}
+              </div>
+            </div>
             <div className="flex flex-col items-center gap-2 xs:items-start">
               <p className="text-2xl">{playerData.name}</p>
 
@@ -193,7 +215,7 @@ export default function Player({ params }: { params: { id: string } }) {
             ) : (
               <div className="grid grid-cols-1 divide-y divide-gray-500">
                 {!scores.loading && scores.scores.length == 0 ? (
-                  <p className="text-red-400">No Scores</p>
+                  <p className="text-red-400">{errorMessage}</p>
                 ) : (
                   scores.scores.map((scoreData, id) => {
                     const { score, leaderboard } = scoreData;

src/middleware.ts

@@ -2,11 +2,20 @@ import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 
 export function middleware(request: NextRequest) {
-  // todo: make this redirect to the users profile if they have a profile selected
+  console.log(request.cookies);
+  const profileCookie = request.cookies.get("profile");
+
   if (request.nextUrl.pathname == "/") {
+    // Has a claimed profile cookie
+    if (profileCookie) {
+      const id = profileCookie.value;
+      return NextResponse.redirect(new URL(`/profile/${id}`, request.url));
+    } else {
+      // User has not claimed a profile
       return NextResponse.redirect(new URL("/search", request.url));
     }
   }
+}
 
 export const config = {
   matcher: "/((?!api|_next/static|_next/image|favicon.ico).*)",