add profile claiming
All checks were successful
deploy / deploy (push) Successful in 57s

This commit is contained in:
Lee 2023-10-20 13:59:45 +01:00
parent da380fb603
commit f548902f13
2 changed files with 37 additions and 6 deletions

@ -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">
<Avatar url={playerData.profilePicture} label="Avatar" />
<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;

@ -2,9 +2,18 @@ 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 == "/") {
return NextResponse.redirect(new URL("/search", request.url));
// 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));
}
}
}