defer beatsaver map data loading & fix it being fucked

src/app/api/beatsaver/mapdata/route.ts

@@ -4,11 +4,24 @@ import { BeatsaverAPI } from "@/utils/beatsaver/api";
 
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url);
-  const mapHashes = searchParams.get("hashes")?.split(",") ?? undefined;
+  const mapHashes = searchParams.get("hashes");
 
   if (!mapHashes) {
     return new Response("mapHashes parameter is required", { status: 400 });
   }
+  let toFetch: any[] = [];
+  if (mapHashes.includes(",")) {
+    const parts = mapHashes.substring(0, mapHashes.length - 1).split(",");
+    toFetch.push(...parts);
+  } else {
+    toFetch.push(mapHashes);
+  }
+  // Convert all hashes to uppercase
+  for (const hash of toFetch) {
+    toFetch[toFetch.indexOf(hash)] = hash.toUpperCase();
+  }
+  // Remove duplicates
+  toFetch = toFetch.filter((hash, index) => toFetch.indexOf(hash) === index);
 
   const idOnly = searchParams.get("idonly") === "true";
   let totalInCache = 0;
@@ -24,39 +37,51 @@ export async function GET(request: Request) {
 
   const fetchAndCacheMap = async (mapHash: string) => {
     const beatSaverMap = await BeatsaverAPI.fetchMapByHash(mapHash);
+
     if (beatSaverMap) {
-      maps[mapHash] = idOnly ? { id: beatSaverMap.id } : beatSaverMap;
+      addMap(mapHash, beatSaverMap);
-      await (
+      await cacheMap(mapHash, beatSaverMap);
-        await Redis.client
-      ).set(
-        `beatsaver:map:${mapHash}`,
-        JSON.stringify(idOnly ? { id: beatSaverMap.id } : beatSaverMap),
-        "EX",
-        60 * 60 * 24 * 7,
-      );
     }
   };
 
-  for (const mapHash of mapHashes) {
+  const cacheMap = async (mapHash: string, map: BeatsaverMap) => {
+    await (
+      await Redis.client
+    ).set(
+      `beatsaver:map:${mapHash}`,
+      JSON.stringify(idOnly ? { id: map.id } : map),
+      "EX",
+      60 * 60 * 24 * 7,
+    );
+  };
+
+  const addMap = (mapHash: string, map: any) => {
+    maps[mapHash] = idOnly ? { id: map.id } : map;
+  };
+
+  for (const mapHash of toFetch) {
     const map = await fetchMapFromCache(mapHash);
-    if (map) {
+    if (map !== null) {
-      maps[mapHash] = JSON.parse(map);
+      const json = JSON.parse(map);
+      addMap(mapHash, json);
       totalInCache++;
     }
   }
 
-  if (totalInCache === 0) {
+  if (totalInCache === 0 && toFetch.length > 1) {
-    const beatSaverMaps = await BeatsaverAPI.fetchMapsByHash(...mapHashes);
+    const beatSaverMaps = await BeatsaverAPI.fetchMapsByHash(...toFetch);
     if (beatSaverMaps) {
-      for (const mapHash of mapHashes) {
+      for (const mapHash of toFetch) {
         const beatSaverMap = beatSaverMaps[mapHash.toLowerCase()];
+
         if (beatSaverMap) {
-          await fetchAndCacheMap(mapHash);
+          await cacheMap(mapHash, beatSaverMap);
+          addMap(mapHash, beatSaverMap);
         }
       }
     }
   } else {
-    for (const mapHash of mapHashes) {
+    for (const mapHash of toFetch) {
       if (!maps[mapHash]) {
         await fetchAndCacheMap(mapHash);
       }

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

@@ -69,12 +69,7 @@ export async function generateMetadata({
  */
 async function getData(id: string, page: number, sort: string) {
   const playerData = await ScoreSaberAPI.fetchPlayerData(id);
-  const playerScores = await ScoreSaberAPI.fetchScoresWithBeatsaverData(
+  const playerScores = await ScoreSaberAPI.fetchScores(id, page, sort, 10);
-    id,
-    page,
-    sort,
-    10,
-  );
   return {
     playerData: playerData,
     playerScores: playerScores,

src/components/player/Scores.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { ScoresaberScoreWithBeatsaverData } from "@/schemas/scoresaber/scoreWithBeatsaverData";
+import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
 import { useSettingsStore } from "@/store/settingsStore";
 import { SortType, SortTypes } from "@/types/SortTypes";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
@@ -16,11 +16,11 @@ type PageInfo = {
   page: number;
   totalPages: number;
   sortType: SortType;
-  scores: Record<string, ScoresaberScoreWithBeatsaverData>;
+  scores: ScoresaberPlayerScore[] | undefined;
 };
 
 type ScoresProps = {
-  initalScores: Record<string, ScoresaberScoreWithBeatsaverData> | undefined;
+  initalScores: ScoresaberPlayerScore[] | undefined;
   initalPage: number;
   initalSortType: SortType;
   initalTotalPages?: number;
@@ -45,7 +45,7 @@ export default function Scores({
     page: initalPage,
     totalPages: initalTotalPages || 1,
     sortType: initalSortType,
-    scores: initalScores ? initalScores : {},
+    scores: initalScores,
   });
   const [changedPage, setChangedPage] = useState(false);
 
@@ -61,35 +61,32 @@ export default function Scores({
         return;
       }
 
-      ScoreSaberAPI.fetchScoresWithBeatsaverData(
+      ScoreSaberAPI.fetchScores(playerId, page, sortType.value, 10).then(
-        playerId,
+        (scoresResponse) => {
-        page,
+          if (!scoresResponse) {
-        sortType.value,
+            setError(true);
-        10,
+            setErrorMessage("No Scores");
-      ).then((scoresResponse) => {
+            setScores({ ...scores });
-        if (!scoresResponse) {
+            return;
-          setError(true);
+          }
-          setErrorMessage("No Scores");
+          setScores({
-          setScores({ ...scores });
+            ...scores,
-          return;
+            scores: scoresResponse.scores,
-        }
+            totalPages: scoresResponse.pageInfo.totalPages,
-        setScores({
+            page: page,
-          ...scores,
+            sortType: sortType,
-          scores: scoresResponse.scores,
+          });
-          totalPages: scoresResponse.pageInfo.totalPages,
+          settingsStore?.setLastUsedSortType(sortType);
-          page: page,
+          window.history.pushState(
-          sortType: sortType,
+            {},
-        });
+            "",
-        settingsStore?.setLastUsedSortType(sortType);
+            `/player/${playerId}/${sortType.value}/${page}`,
-        window.history.pushState(
+          );
-          {},
+          setChangedPage(true);
-          "",
-          `/player/${playerId}/${sortType.value}/${page}`,
-        );
-        setChangedPage(true);
 
-        console.log(`Switched page to ${page} with sort ${sortType.value}`);
+          console.log(`Switched page to ${page} with sort ${sortType.value}`);
-      });
+        },
+      );
     },
     [
       changedPage,
@@ -151,32 +148,36 @@ export default function Scores({
 
       <div className="flex h-full w-full flex-col items-center justify-center">
         <>
-          <div className="grid min-w-full grid-cols-1 divide-y divide-border">
+          {scores.scores ? (
-            {Object.values(scores.scores).map((scoreData, id) => {
+            <>
-              const { score, leaderboard, mapId } = scoreData;
+              <div className="grid min-w-full grid-cols-1 divide-y divide-border">
+                {scores.scores.map((scoreData, id) => {
+                  const { score, leaderboard } = scoreData;
 
-              return (
+                  return (
-                <Score
+                    <Score
-                  key={id}
+                      key={id}
-                  player={playerData}
+                      player={playerData}
-                  score={score}
+                      score={score}
-                  leaderboard={leaderboard}
+                      leaderboard={leaderboard}
-                  mapId={mapId}
+                    />
-                  ownProfile={settingsStore?.player}
+                  );
+                })}
+              </div>
+              {/* Pagination */}
+              <div className="pt-3">
+                <Pagination
+                  currentPage={scores.page}
+                  totalPages={scores.totalPages}
+                  onPageChange={(page) => {
+                    updateScoresPage(scores.sortType, page);
+                  }}
                 />
-              );
+              </div>
-            })}
+            </>
-          </div>
+          ) : (
-          {/* Pagination */}
+            <p>No Scores!</p>
-          <div className="pt-3">
+          )}
-            <Pagination
-              currentPage={scores.page}
-              totalPages={scores.totalPages}
-              onPageChange={(page) => {
-                updateScoresPage(scores.sortType, page);
-              }}
-            />
-          </div>
         </>
       </div>
     </Card>

src/components/player/score/MapButtons.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import BeatSaverLogo from "@/components/icons/BeatSaverLogo";
+import YouTubeLogo from "@/components/icons/YouTubeLogo";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
+import { Button } from "@/components/ui/button";
+import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
+import { songNameToYouTubeLink } from "@/utils/songUtils";
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import CopyBsrButton from "./CopyBsrButton";
+
+type MapButtonsProps = {
+  leaderboard: ScoresaberLeaderboardInfo;
+};
+
+export default function MapButtons({ leaderboard }: MapButtonsProps) {
+  const [mapId, setMapId] = useState<string | undefined>(undefined);
+  const hash = leaderboard.songHash;
+
+  const getMapId = useCallback(async () => {
+    const beatSaberMap = await fetch(
+      `/api/beatsaver/mapdata?hashes=${hash}&idonly=true`,
+    );
+    if (!beatSaberMap) {
+      return;
+    }
+    const json = await beatSaberMap.json();
+    setMapId(json.maps[hash].id);
+  }, [hash]);
+
+  useEffect(() => {
+    getMapId();
+  }, [getMapId]);
+
+  return (
+    <div className="hidden flex-col items-center justify-between gap-1 p-1 md:flex md:items-start md:justify-end">
+      {mapId && (
+        <>
+          <div className="flex gap-1">
+            <Tooltip>
+              <TooltipTrigger>
+                <Link
+                  href={`https://beatsaver.com/maps/${mapId}`}
+                  target="_blank"
+                >
+                  <Button
+                    className="h-[30px] w-[30px] bg-neutral-700 p-1"
+                    variant={"secondary"}
+                  >
+                    <BeatSaverLogo size={20} />
+                  </Button>
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Click to open the map page</p>
+              </TooltipContent>
+            </Tooltip>
+
+            <CopyBsrButton mapId={mapId} />
+          </div>
+          <div className="flex gap-1">
+            <Tooltip>
+              <TooltipTrigger>
+                <Link
+                  href={`${songNameToYouTubeLink(
+                    leaderboard.songName,
+                    leaderboard.songSubName,
+                    leaderboard.songAuthorName,
+                  )}`}
+                  target="_blank"
+                >
+                  <Button
+                    className="h-[30px] w-[30px] bg-neutral-700 p-1"
+                    variant={"secondary"}
+                  >
+                    <YouTubeLogo size={20} />
+                  </Button>
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Click to view the song on YouTube</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/components/player/score/Score.tsx

@@ -1,4 +1,3 @@
-import YouTubeLogo from "@/components/icons/YouTubeLogo";
 import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberScore } from "@/schemas/scoresaber/score";
@@ -7,7 +6,6 @@ import { getPpGainedFromScore } from "@/utils/scoresaber/scores";
 import {
   scoresaberDifficultyNumberToName,
   songDifficultyToColor,
-  songNameToYouTubeLink,
 } from "@/utils/songUtils";
 import { formatDate, formatTimeAgo } from "@/utils/timeUtils";
 import {
@@ -19,28 +17,19 @@ import {
 import clsx from "clsx";
 import Image from "next/image";
 import Link from "next/link";
-import BeatSaverLogo from "../../icons/BeatSaverLogo";
+import { Suspense } from "react";
 import HeadsetIcon from "../../icons/HeadsetIcon";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/Tooltip";
-import { Button } from "../../ui/button";
 import ScoreStatLabel from "../ScoreStatLabel";
-import CopyBsrButton from "./CopyBsrButton";
+import MapButtons from "./MapButtons";
 
 type ScoreProps = {
   score: ScoresaberScore;
   player: ScoresaberPlayer;
   leaderboard: ScoresaberLeaderboardInfo;
-  ownProfile?: ScoresaberPlayer;
-  mapId?: string;
 };
 
-export default function Score({
+export default function Score({ score, player, leaderboard }: ScoreProps) {
-  score,
-  player,
-  leaderboard,
-  ownProfile,
-  mapId,
-}: ScoreProps) {
   const isFullCombo = score.missedNotes + score.badCuts === 0;
   const diffName = scoresaberDifficultyNumberToName(
     leaderboard.difficulty.difficulty,
@@ -124,58 +113,9 @@ export default function Score({
         </Link>
       </div>
 
-      <div className="hidden flex-col items-center justify-between gap-1 p-1 md:flex md:items-start md:justify-end">
+      <Suspense fallback={<div />}>
-        {mapId && (
+        <MapButtons leaderboard={leaderboard} />
-          <>
+      </Suspense>
-            <div className="flex gap-1">
-              <Tooltip>
-                <TooltipTrigger>
-                  <Link
-                    href={`https://beatsaver.com/maps/${mapId}`}
-                    target="_blank"
-                  >
-                    <Button
-                      className="h-[30px] w-[30px] bg-neutral-700 p-1"
-                      variant={"secondary"}
-                    >
-                      <BeatSaverLogo size={20} />
-                    </Button>
-                  </Link>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>Click to open the map page</p>
-                </TooltipContent>
-              </Tooltip>
-
-              <CopyBsrButton mapId={mapId} />
-            </div>
-            <div className="flex gap-1">
-              <Tooltip>
-                <TooltipTrigger>
-                  <Link
-                    href={`${songNameToYouTubeLink(
-                      leaderboard.songName,
-                      leaderboard.songSubName,
-                      leaderboard.songAuthorName,
-                    )}`}
-                    target="_blank"
-                  >
-                    <Button
-                      className="h-[30px] w-[30px] bg-neutral-700 p-1"
-                      variant={"secondary"}
-                    >
-                      <YouTubeLogo size={20} />
-                    </Button>
-                  </Link>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>Click to view the song on YouTube</p>
-                </TooltipContent>
-              </Tooltip>
-            </div>
-          </>
-        )}
-      </div>
 
       <div className="flex items-center justify-between p-1 md:items-start md:justify-end">
         <div className="flex flex-col md:hidden">

src/utils/beatsaver/api.ts

@@ -25,7 +25,7 @@ async function fetchMapsByHash(
       BS_GET_MAP_BY_HASH_URL,
       true,
       hashes.substring(0, hashes.length - 1),
-    ) + "?idonly=true",
+    ),
   );
   const json = await response.json();
 
@@ -47,6 +47,7 @@ async function fetchMapByHash(hash: string): Promise<BeatsaverMap | undefined> {
   const response = await BeatsaverFetchQueue.fetch(
     formatString(BS_GET_MAP_BY_HASH_URL, true, hash),
   );
+  console.log(formatString(BS_GET_MAP_BY_HASH_URL, true, hash));
   const json = await response.json();
 
   // Check if there was an error fetching the user data

src/utils/fetchWithQueue.ts

@@ -13,7 +13,7 @@ export class FetchQueue {
    * @param url - The URL to fetch.
    * @returns The response.
    */
-  public async fetch(url: string, options?: any): Promise<any> {
+  public async fetch(url: string, options?: any): Promise<Response> {
     const now = Date.now();
 
     if (now < this.rateLimitReset) {

src/utils/scoresaber/api.ts

@@ -178,6 +178,8 @@ async function fetchScoresWithBeatsaverData(
   for (const score of scores) {
     url += `${score.leaderboard.songHash},`;
   }
+  url = url.substring(0, url.length - 1);
+  url += "&idonly=true";
   const mapResponse = await fetch(url, {
     next: {
       revalidate: 60 * 60 * 24 * 7, // 1 week