defer beatsaver map data loading & fix it being fucked

2023-11-24 20:43:23 +00:00 · 2023-11-24 20:43:23 +00:00 · 407bcc866b
commit 407bcc866b
parent b74b22c0b6
8 changed files with 206 additions and 148 deletions
--- a/src/app/api/beatsaver/mapdata/route.ts
+++ b/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;
-      await (
-        await Redis.client
-      ).set(
-        `beatsaver:map:${mapHash}`,
-        JSON.stringify(idOnly ? { id: beatSaverMap.id } : beatSaverMap),
-        "EX",
-        60 * 60 * 24 * 7,
-      );
+      addMap(mapHash, beatSaverMap);
+      await cacheMap(mapHash, beatSaverMap);
    }
  };

-  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) {
-      maps[mapHash] = JSON.parse(map);
+    if (map !== null) {
+      const json = JSON.parse(map);
+      addMap(mapHash, json);
      totalInCache++;
    }
  }

-  if (totalInCache === 0) {
-    const beatSaverMaps = await BeatsaverAPI.fetchMapsByHash(...mapHashes);
+  if (totalInCache === 0 && toFetch.length > 1) {
+    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);
      }
--- a/src/app/player/[id]/[sort]/[page]/page.tsx
+++ b/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(
-    id,
-    page,
-    sort,
-    10,
-  );
+  const playerScores = await ScoreSaberAPI.fetchScores(id, page, sort, 10);
  return {
    playerData: playerData,
    playerScores: playerScores,
--- a/src/components/player/Scores.tsx
+++ b/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(
-        playerId,
-        page,
-        sortType.value,
-        10,
-      ).then((scoresResponse) => {
-        if (!scoresResponse) {
-          setError(true);
-          setErrorMessage("No Scores");
-          setScores({ ...scores });
-          return;
-        }
-        setScores({
-          ...scores,
-          scores: scoresResponse.scores,
-          totalPages: scoresResponse.pageInfo.totalPages,
-          page: page,
-          sortType: sortType,
-        });
-        settingsStore?.setLastUsedSortType(sortType);
-        window.history.pushState(
-          {},
-          "",
-          `/player/${playerId}/${sortType.value}/${page}`,
-        );
-        setChangedPage(true);
+      ScoreSaberAPI.fetchScores(playerId, page, sortType.value, 10).then(
+        (scoresResponse) => {
+          if (!scoresResponse) {
+            setError(true);
+            setErrorMessage("No Scores");
+            setScores({ ...scores });
+            return;
+          }
+          setScores({
+            ...scores,
+            scores: scoresResponse.scores,
+            totalPages: scoresResponse.pageInfo.totalPages,
+            page: page,
+            sortType: sortType,
+          });
+          settingsStore?.setLastUsedSortType(sortType);
+          window.history.pushState(
+            {},
+            "",
+            `/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">
-            {Object.values(scores.scores).map((scoreData, id) => {
-              const { score, leaderboard, mapId } = scoreData;
+          {scores.scores ? (
+            <>
+              <div className="grid min-w-full grid-cols-1 divide-y divide-border">
+                {scores.scores.map((scoreData, id) => {
+                  const { score, leaderboard } = scoreData;

-              return (
-                <Score
-                  key={id}
-                  player={playerData}
-                  score={score}
-                  leaderboard={leaderboard}
-                  mapId={mapId}
-                  ownProfile={settingsStore?.player}
+                  return (
+                    <Score
+                      key={id}
+                      player={playerData}
+                      score={score}
+                      leaderboard={leaderboard}
+                    />
+                  );
+                })}
+              </div>
+              {/* Pagination */}
+              <div className="pt-3">
+                <Pagination
+                  currentPage={scores.page}
+                  totalPages={scores.totalPages}
+                  onPageChange={(page) => {
+                    updateScoresPage(scores.sortType, page);
+                  }}
                />
-              );
-            })}
-          </div>
-          {/* Pagination */}
-          <div className="pt-3">
-            <Pagination
-              currentPage={scores.page}
-              totalPages={scores.totalPages}
-              onPageChange={(page) => {
-                updateScoresPage(scores.sortType, page);
-              }}
-            />
-          </div>
+              </div>
+            </>
+          ) : (
+            <p>No Scores!</p>
+          )}
        </>
      </div>
    </Card>
--- a/src/components/player/score/MapButtons.tsx
+++ b/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>
+  );
+}
--- a/src/components/player/score/Score.tsx
+++ b/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({
-  score,
-  player,
-  leaderboard,
-  ownProfile,
-  mapId,
-}: ScoreProps) {
+export default function Score({ score, player, leaderboard }: 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">
-        {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>
+      <Suspense fallback={<div />}>
+        <MapButtons leaderboard={leaderboard} />
+      </Suspense>

      <div className="flex items-center justify-between p-1 md:items-start md:justify-end">
        <div className="flex flex-col md:hidden">
--- a/src/utils/beatsaver/api.ts
+++ b/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
--- a/src/utils/fetchWithQueue.ts
+++ b/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) {
--- a/src/utils/scoresaber/api.ts
+++ b/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