cleanup player page and update error page

src/components/Error.tsx

@@ -0,0 +1,24 @@
+import Image from "next/image";
+
+type ErrorProps = {
+  errorMessage?: string;
+};
+
+export default function Error({ errorMessage }: ErrorProps) {
+  return (
+    <div role="status">
+      <div className="flex flex-col items-center justify-center gap-4">
+        <p className="text-2xl font-bold text-red-500">Something went wrong!</p>
+        <p className="text-xl text-gray-400">{errorMessage}</p>
+
+        <Image
+          alt="Sad cat"
+          src={"https://cdn.fascinated.cc/BxI9iJI9.jpg"}
+          width={200}
+          height={200}
+          className="rounded-xl"
+        />
+      </div>
+    </div>
+  );
+}

src/components/Label.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 
 type LabelProps = {
   title: string;
-  value: string;
+  value: any;
   className?: string;
 };
 

src/components/PlayerInfo.tsx

@@ -0,0 +1,163 @@
+import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
+import { usePlayerScoresStore } from "@/store/playerScoresStore";
+import { useSettingsStore } from "@/store/settingsStore";
+import { formatNumber } from "@/utils/number";
+import { calcPpBoundary, getHighestPpPlay } from "@/utils/scoresaber/scores";
+import { GlobeAsiaAustraliaIcon, HomeIcon } from "@heroicons/react/20/solid";
+import { useRef } from "react";
+import ReactCountryFlag from "react-country-flag";
+import { toast } from "react-toastify";
+import { useStore } from "zustand";
+import Avatar from "./Avatar";
+import Card from "./Card";
+import Label from "./Label";
+import PlayerChart from "./PlayerChart";
+
+type PlayerInfoProps = {
+  playerData: ScoresaberPlayer;
+};
+
+export default function PlayerInfo({ playerData }: PlayerInfoProps) {
+  const playerId = playerData.id;
+  const settingsStore = useStore(useSettingsStore, (store) => store);
+  const playerScoreStore = useStore(usePlayerScoresStore, (store) => store);
+
+  // Whether we have scores for this player in the local database
+  const hasLocalScores = playerScoreStore?.exists(playerId);
+
+  const toastId: any = useRef(null);
+
+  async function claimProfile() {
+    settingsStore?.setUserId(playerId);
+    settingsStore?.refreshProfile();
+
+    const reponse = await playerScoreStore?.addPlayer(
+      playerId,
+      (page, totalPages) => {
+        const autoClose = page == totalPages ? 5000 : false;
+
+        if (page == 1) {
+          toastId.current = toast.info(
+            `Fetching scores ${page}/${totalPages}`,
+            {
+              autoClose: autoClose,
+              progress: page / totalPages,
+            },
+          );
+        } else {
+          toast.update(toastId.current, {
+            progress: page / totalPages,
+            render: `Fetching scores ${page}/${totalPages}`,
+            autoClose: autoClose,
+          });
+        }
+
+        console.log(`Fetching scores for ${playerId} (${page}/${totalPages})`);
+      },
+    );
+    if (reponse?.error) {
+      toast.error("Failed to claim profile");
+      console.log(reponse.message);
+      return;
+    }
+
+    toast.success("Successfully claimed profile");
+  }
+
+  return (
+    <Card className="mt-2">
+      {/* Player Info */}
+      <div className="flex flex-col items-center gap-3 md:flex-row md:items-start">
+        <div className="min-w-fit">
+          {/* Avatar */}
+          <div className="flex flex-col items-center gap-2">
+            <Avatar url={playerData.profilePicture} label="Avatar" />
+          </div>
+
+          {/* Settings Buttons */}
+          <div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center">
+            {settingsStore?.userId !== playerId && (
+              <button>
+                <HomeIcon
+                  title="Set as your Profile"
+                  width={28}
+                  height={28}
+                  onClick={claimProfile}
+                />
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="mt-1 flex w-full flex-col items-center gap-2 md:items-start">
+          {/* Name */}
+          <p className="text-2xl">{playerData.name}</p>
+
+          <div className="flex gap-3 text-xl">
+            {/* Global Rank */}
+            <div className="flex items-center gap-1 text-gray-300">
+              <GlobeAsiaAustraliaIcon width={32} height={32} />
+              <p>#{playerData.rank}</p>
+            </div>
+
+            {/* Country Rank */}
+            <div className="flex items-center gap-1 text-gray-300">
+              <ReactCountryFlag
+                countryCode={playerData.country}
+                svg
+                className="!h-7 !w-7"
+              />
+              <p>#{playerData.countryRank}</p>
+            </div>
+
+            {/* PP */}
+            <div className="flex items-center text-gray-300">
+              <p>{formatNumber(playerData.pp)}pp</p>
+            </div>
+          </div>
+          {/* Labels */}
+          <div className="flex flex-wrap justify-center gap-2 md:justify-start">
+            <Label
+              title="Total play count"
+              className="bg-blue-500"
+              value={formatNumber(playerData.scoreStats.totalPlayCount)}
+            />
+            <Label
+              title="Total score"
+              className="bg-blue-500"
+              value={formatNumber(playerData.scoreStats.totalScore)}
+            />
+            <Label
+              title="Avg ranked acc"
+              className="bg-blue-500"
+              value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(
+                2,
+              )}%`}
+            />
+
+            {hasLocalScores && (
+              <>
+                <Label
+                  title="Top PP"
+                  className="bg-[#8992e8]"
+                  value={`${formatNumber(
+                    getHighestPpPlay(playerId)?.toFixed(2),
+                  )}pp`}
+                />
+                <Label
+                  title="+ 1pp"
+                  className="bg-[#8992e8]"
+                  value={`${formatNumber(
+                    calcPpBoundary(playerId, 1)?.toFixed(2),
+                  )}pp per global raw`}
+                />
+              </>
+            )}
+          </div>
+
+          {/* Chart */}
+          <PlayerChart scoresaber={playerData} />
+        </div>
+      </div>
+    </Card>
+  );
+}

src/components/Scores.tsx

@@ -0,0 +1,150 @@
+import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
+import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
+import { useSettingsStore } from "@/store/settingsStore";
+import { SortType, SortTypes } from "@/types/SortTypes";
+import { fetchScores } from "@/utils/scoresaber/api";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+import Card from "./Card";
+import Pagination from "./Pagination";
+import Score from "./Score";
+import { Spinner } from "./Spinner";
+
+type PageInfo = {
+  loading: boolean;
+  page: number;
+  totalPages: number;
+  sortType: SortType;
+  scores: ScoresaberPlayerScore[];
+};
+
+type ScoresProps = {
+  playerData: ScoresaberPlayer;
+  page: number;
+  sortType: SortType;
+};
+
+export default function Scores({ playerData, page, sortType }: ScoresProps) {
+  const playerId = playerData.id;
+
+  const router = useRouter();
+
+  const [error, setError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const [scores, setScores] = useState<PageInfo>({
+    loading: true,
+    page: page,
+    totalPages: 1,
+    sortType: sortType,
+    scores: [],
+  });
+
+  const updateScoresPage = useCallback(
+    (sortType: SortType, page: any) => {
+      console.log("Switching page to", page);
+      fetchScores(playerId, page, sortType.value, 10).then((scoresResponse) => {
+        if (!scoresResponse) {
+          setError(true);
+          setErrorMessage("No Scores");
+          setScores({ ...scores, loading: false });
+          return;
+        }
+        setScores({
+          ...scores,
+          scores: scoresResponse.scores,
+          totalPages: scoresResponse.pageInfo.totalPages,
+          loading: false,
+          page: page,
+          sortType: sortType,
+        });
+        useSettingsStore.setState({
+          lastUsedSortType: sortType,
+        });
+
+        if (page > 1) {
+          router.push(
+            `/player/${playerId}?page=${page}&sort=${sortType.value}`,
+            {
+              scroll: false,
+            },
+          );
+        } else {
+          router.push(`/player/${playerId}?sort=${sortType.value}`, {
+            scroll: false,
+          });
+        }
+      });
+    },
+    [playerId, router, scores],
+  );
+
+  useEffect(() => {
+    if (!scores.loading || error) return;
+
+    updateScoresPage(scores.sortType, scores.page);
+  }, [error, playerId, updateScoresPage, scores]);
+
+  return (
+    <Card className="mt-2 w-full items-center md:flex-col">
+      {/* Sort */}
+      <div className="m-2 w-full text-sm">
+        <div className="flex justify-center gap-2">
+          {Object.values(SortTypes).map((sortType) => {
+            return (
+              <button
+                key={sortType.value}
+                className={`flex transform-gpu flex-row items-center gap-1 rounded-md p-[0.35rem] transition-all hover:opacity-80 ${
+                  scores.sortType.value === sortType.value
+                    ? "bg-blue-500"
+                    : "bg-gray-500"
+                }`}
+                onClick={() => {
+                  updateScoresPage(sortType, 1);
+                }}
+              >
+                {sortType.icon}
+                <p>{sortType.name}</p>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="w-full p-1">
+        {scores.loading ? (
+          <div className="flex justify-center">
+            <Spinner />
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 divide-y divide-gray-500">
+            {!scores.loading && scores.scores.length == 0 ? (
+              <p className="text-red-400">{errorMessage}</p>
+            ) : (
+              scores.scores.map((scoreData, id) => {
+                const { score, leaderboard } = scoreData;
+
+                return (
+                  <Score key={id} score={score} leaderboard={leaderboard} />
+                );
+              })
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Pagination */}
+      <div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
+        <div className="p-3">
+          <Pagination
+            currentPage={scores.page}
+            totalPages={scores.totalPages}
+            onPageChange={(page) => {
+              updateScoresPage(scores.sortType, page);
+            }}
+          />
+        </div>
+      </div>
+    </Card>
+  );
+}