scoresaber-reloaded-v2/src/app/player/[id]/page.tsx

"use client";

import Avatar from "@/components/Avatar";
import Card from "@/components/Card";
import Container from "@/components/Container";
import Label from "@/components/Label";
import Pagination from "@/components/Pagination";
import PlayerChart from "@/components/PlayerChart";
import Score from "@/components/Score";
import { Spinner } from "@/components/Spinner";
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
import { useSettingsStore } from "@/store/settingsStore";
import { formatNumber } from "@/utils/number";
import { fetchScores, getPlayerInfo } from "@/utils/scoresaber/api";
import useStore from "@/utils/useStore";
import {
  ClockIcon,
  GlobeAsiaAustraliaIcon,
  HomeIcon,
  TrophyIcon,
} from "@heroicons/react/20/solid";
import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import ReactCountryFlag from "react-country-flag";
import { toast } from "react-toastify";

type PageInfo = {
  loading: boolean;
  page: number;
  totalPages: number;
  sortType: SortType;
  scores: ScoresaberPlayerScore[];
};

type PlayerInfo = {
  loading: boolean;
  player: ScoresaberPlayer | undefined;
};

type SortType = {
  name: string;
  value: string;
  icon: JSX.Element;
};
const sortTypes: { [key: string]: SortType } = {
  top: {
    name: "Top Scores",
    value: "top",
    icon: <TrophyIcon width={20} height={20} />,
  },
  recent: {
    name: "Recent Scores",
    value: "recent",
    icon: <ClockIcon width={20} height={20} />,
  },
};

const DEFAULT_SORT_TYPE = sortTypes.top;

export default function Player({ params }: { params: { id: string } }) {
  const settingsStore = useStore(useSettingsStore, (state) => {
    return {
      userId: state.userId,
      setUserId: state.setUserId,
      refreshProfile: state.refreshProfile,
    };
  });
  const searchParams = useSearchParams();
  const router = useRouter();

  let page;
  const pageString = searchParams.get("page");
  if (pageString == null) {
    page = 1;
  } else {
    page = Number.parseInt(pageString) || 1;
  }

  let sortType;
  const sortTypeString = searchParams.get("sort");
  if (sortTypeString == null) {
    // todo: check settings to get last used sort type
    sortType = DEFAULT_SORT_TYPE;
  } else {
    sortType = sortTypes[sortTypeString] || DEFAULT_SORT_TYPE;
  }

  const [error, setError] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  const [player, setPlayer] = useState<PlayerInfo>({
    loading: true,
    player: undefined,
  });

  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(params.id, 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,
          });

          if (page > 1) {
            router.push(
              `/player/${params.id}?page=${page}&sort=${sortType.value}`,
              {
                scroll: false,
              },
            );
          } else {
            router.push(`/player/${params.id}?sort=${sortType.value}`, {
              scroll: false,
            });
          }
        },
      );
    },
    [params.id, router, scores],
  );

  function claimProfile() {
    settingsStore?.setUserId(params.id);
    settingsStore?.refreshProfile();
    toast.success("Successfully claimed profile");
  }

  useEffect(() => {
    if (!params.id) {
      setError(true);
      setPlayer({ ...player, loading: false });
      return;
    }
    if (error || !player.loading) {
      return;
    }

    getPlayerInfo(params.id).then((playerResponse) => {
      if (!playerResponse) {
        setError(true);
        setErrorMessage("Failed to fetch player");
        setPlayer({ ...player, loading: false });
        return;
      }
      setPlayer({ ...player, player: playerResponse, loading: false });
      updateScoresPage(scores.sortType, 1);
    });
  }, [error, params.id, player, scores, updateScoresPage]);

  if (player.loading || error || !player.player) {
    return (
      <main>
        <Container>
          <Card className="mt-2">
            <div className="p-3 text-center">
              <div role="status">
                {player.loading && <Spinner />}

                {error && (
                  <div className="flex flex-col items-center justify-center gap-2">
                    <p className="text-xl text-red-500">{errorMessage}</p>

                    <Image
                      alt="Sad cat"
                      src={"https://cdn.fascinated.cc/BxI9iJI9.jpg"}
                      width={200}
                      height={200}
                    />
                  </div>
                )}
              </div>
            </div>
          </Card>
        </Container>
      </main>
    );
  }

  const playerData = player.player;

  return (
    <main>
      <Container>
        {/* Player Info */}
        <Card className="mt-2">
          <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-16 flex justify-end md:relative md:right-3 md:top-0 md:mt-2 md:justify-center">
                {settingsStore?.userId !== params.id && (
                  <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,
                  )}%`}
                />
                <Label
                  title="Replays watched"
                  value={formatNumber(playerData.scoreStats.replaysWatched)}
                />
              </div>

              <PlayerChart scoresaber={player.player} />
            </div>
          </div>
        </Card>

        {/* Scores */}
        <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="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>
      </Container>
    </main>
  );
}