auto refresh the player data when claiming a profile

projects/common/src/types/player/impl/scoresaber-player.ts

@@ -97,7 +97,9 @@ export async function getScoreSaberPlayerFromToken(
     const { statistics: history } = await ky
       .get<{
         statistics: { [key: string]: PlayerHistory };
-      }>(`${apiUrl}/player/history/${token.id}${playerIdCookie == token.id ? "?createIfMissing=true" : ""}`)
+      }>(
+        `${apiUrl}/player/history/${token.id}${playerIdCookie && playerIdCookie == token.id ? "?createIfMissing=true" : ""}`
+      )
       .json();
     if (history === undefined || Object.entries(history).length === 0) {
       console.log("Player has no history, using fallback");

projects/website/src/app/(pages)/player/[...slug]/page.tsx

@@ -11,7 +11,7 @@ import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
 import ScoreSaberPlayerScoresPageToken from "@ssr/common/types/token/scoresaber/score-saber-player-scores-page-token";
 import { getScoreSaberPlayerFromToken } from "@ssr/common/types/player/impl/scoresaber-player";
 import { config } from "../../../../../config";
-import { getPlayerIdCookie } from "@/common/website-utils";
+import { cookies } from "next/headers";
 
 const UNKNOWN_PLAYER = {
   title: "ScoreSaber Reloaded - Unknown Player",
@@ -42,7 +42,8 @@ const getPlayerData = cache(async ({ params }: Props, fetchScores: boolean = tru
   const search = (slug[3] as string) || ""; // The search query
 
   const playerToken = await scoresaberService.lookupPlayer(id);
-  const player = playerToken && (await getScoreSaberPlayerFromToken(playerToken, config.siteApi, getPlayerIdCookie()));
+  const player =
+    playerToken && (await getScoreSaberPlayerFromToken(playerToken, config.siteApi, cookies().get("playerId")?.value));
   let scores: ScoreSaberPlayerScoresPageToken | undefined;
   if (fetchScores) {
     scores = await scoresaberService.lookupPlayerScores({

projects/website/src/components/player/claim-profile.tsx

@@ -7,6 +7,8 @@ import useDatabase from "../../hooks/use-database";
 import { useToast } from "@/hooks/use-toast";
 import Tooltip from "../tooltip";
 import { Button } from "../ui/button";
+import { router } from "next/client";
+import { revalidatePath } from "next/cache";
 
 type Props = {
   /**
@@ -32,6 +34,7 @@ export default function ClaimProfile({ playerId }: Props) {
       title: "Profile Claimed",
       description: "You have claimed this profile.",
     });
+    revalidatePath("/player/[...slug]");
   }
 
   if (settings?.playerId == playerId || settings == undefined) {

projects/website/src/components/player/player-data.tsx

@@ -16,6 +16,9 @@ import { ScoreSort } from "@ssr/common/types/score/score-sort";
 import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
 import { config } from "../../../config";
 import { getPlayerIdCookie } from "@/common/website-utils";
+import { useGetPlayerIdCookie } from "@/hooks/use-player-id-cookie";
+import useDatabase from "@/hooks/use-database";
+import { useLiveQuery } from "dexie-react-hooks";
 
 type Props = {
   initialPlayerData: ScoreSaberPlayer;
@@ -35,10 +38,12 @@ export default function PlayerData({
   const isMobile = useIsMobile();
   const miniRankingsRef = useRef<HTMLDivElement>(null);
   const isMiniRankingsVisible = useIsVisible(miniRankingsRef);
+  const database = useDatabase();
+  const settings = useLiveQuery(() => database.getSettings());
 
   let player = initialPlayerData;
   const { data, isLoading, isError } = useQuery({
-    queryKey: ["player", player.id],
+    queryKey: ["playerData", player.id, settings?.playerId],
     queryFn: async (): Promise<ScoreSaberPlayer | undefined> => {
       const playerResponse = await scoresaberService.lookupPlayer(player.id);
       if (playerResponse == undefined) {