Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

switch to async storage for faster loading
All checks were successful
deploy / deploy (push) Successful in 1m55s
Details

Browse Source
This commit is contained in:
Lee 2023-10-23 09:54:26 +01:00
parent 70ed248be7
commit a0aca8c9b1
10 changed files with 118 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -15,6 +15,7 @@
"clsx": "^2.0.0",
"date-fns": "^2.30.0",
"encoding": "^0.1.13",
"idb-keyval": "^6.2.1",
"next": "13.5.6",
"next-build-id": "^3.0.0",
"node-fetch-cache": "^3.1.3",
@ -3010,6 +3011,11 @@
"node": ">=0.10.0"
}
},
"node_modules/idb-keyval": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.1.tgz",
"integrity": "sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg=="
},
"node_modules/ieee754": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"clsx": "^2.0.0",
"date-fns": "^2.30.0",
"encoding": "^0.1.13",
"idb-keyval": "^6.2.1",
"next": "13.5.6",
"next-build-id": "^3.0.0",
"node-fetch-cache": "^3.1.3",

2
src/app/layout.tsx
View File

@ -1,4 +1,4 @@
import { AppProvider } from "@/components/AppProvider";
import AppProvider from "@/components/AppProvider";
import { ssrSettings } from "@/ssrSettings";
import { Metadata } from "next";
import { Inter } from "next/font/google";

54
src/components/AppProvider.tsx
View File

@ -1,18 +1,48 @@
"use client";
import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
type AppProviderProps = {
children: React.ReactNode;
};
export function AppProvider({ children }: AppProviderProps) {
return <>{children}</>;
}
import { useSettingsStore } from "@/store/settingsStore";
import React from "react";
const UPDATE_INTERVAL = 1000 * 60 * 15; // 15 minutes
useScoresaberScoresStore.getState().updatePlayerScores();
setInterval(() => {
export default class AppProvider extends React.Component {
_state = {
mounted: false, // Whether the component has mounted
// Whether the data from the async storage has been loaded
dataLoaded: {
scores: false,
settings: false,
},
};
async componentDidMount(): Promise<void> {
if (this._state.mounted) {
return;
}
this._state.mounted = true;
// Load data from async storage
await useSettingsStore.persist.rehydrate();
await useScoresaberScoresStore.persist.rehydrate();
await useSettingsStore.getState().refreshProfiles();
setInterval(() => {
useSettingsStore.getState().refreshProfiles();
}, UPDATE_INTERVAL);
await useScoresaberScoresStore.getState().updatePlayerScores();
setInterval(() => {
useScoresaberScoresStore.getState().updatePlayerScores();
}, UPDATE_INTERVAL);
}, UPDATE_INTERVAL);
}
constructor(props: any) {
super(props);
}
render(): React.ReactNode {
const props: any = this.props;
return <>{props.children}</>;
}
}

5
src/components/player/PlayerPage.tsx
View File

@ -8,6 +8,7 @@ import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
import { useSettingsStore } from "@/store/settingsStore";
import { SortType, SortTypes } from "@/types/SortTypes";
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
import useStore from "@/utils/useStore";
import dynamic from "next/dynamic";
import { useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
@ -27,6 +28,7 @@ type PlayerPageProps = {
const DEFAULT_SORT_TYPE = SortTypes.top;
export default function PlayerPage({ id }: PlayerPageProps) {
const settingsStore = useStore(useSettingsStore, (store) => store);
const searchParams = useSearchParams();
const [mounted, setMounted] = useState(false);
@ -49,8 +51,7 @@ export default function PlayerPage({ id }: PlayerPageProps) {
let sortType: SortType;
const sortTypeString = searchParams.get("sort");
if (sortTypeString == null) {
sortType =
useSettingsStore.getState().lastUsedSortType || DEFAULT_SORT_TYPE;
sortType = settingsStore?.lastUsedSortType || DEFAULT_SORT_TYPE;
} else {
sortType = SortTypes[sortTypeString] || DEFAULT_SORT_TYPE;
}

8
src/components/player/Scores.tsx
View File

@ -3,6 +3,7 @@ import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
import { useSettingsStore } from "@/store/settingsStore";
import { SortType, SortTypes } from "@/types/SortTypes";
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
import useStore from "@/utils/useStore";
import dynamic from "next/dynamic";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
@ -27,6 +28,7 @@ type ScoresProps = {
};
export default function Scores({ playerData, page, sortType }: ScoresProps) {
const settingsStore = useStore(useSettingsStore, (store) => store);
const playerId = playerData.id;
const router = useRouter();
@ -61,9 +63,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
page: page,
sortType: sortType,
});
useSettingsStore.setState({
lastUsedSortType: sortType,
});
settingsStore?.setLastUsedSortType(sortType);
if (page > 1) {
router.push(
@ -80,7 +80,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
},
);
},
[playerId, router, scores],
[playerId, router, scores, settingsStore],
);
useEffect(() => {

19
src/store/IndexedDBStorage.ts Normal file
View File

@ -0,0 +1,19 @@
"use client";
import { del, get, set } from "idb-keyval";
import { StateStorage } from "zustand/middleware";
export const IDBStorage: StateStorage = {
getItem: async (name: string): Promise<string | null> => {
//console.log(name, "has been retrieved");
return (await get(name)) || null;
},
setItem: async (name: string, value: string): Promise<void> => {
//console.log(name, "with value", value, "has been saved");
await set(name, value);
},
removeItem: async (name: string): Promise<void> => {
//console.log(name, "has been deleted");
await del(name);
},
};

73
src/store/scoresaberScoresStore.ts
View File

@ -6,13 +6,12 @@ import { ScoreSaberAPI } from "@/utils/scoresaber/api";
import { toast } from "react-toastify";
import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";
import { IDBStorage } from "./IndexedDBStorage";
import { useSettingsStore } from "./settingsStore";
type Player = {
id: string;
scores: {
scoresaber: ScoresaberSmallerPlayerScore[];
};
scores: ScoresaberSmallerPlayerScore[];
};
interface ScoreSaberScoresStore {
@ -60,14 +59,14 @@ interface ScoreSaberScoresStore {
/**
* Refreshes the player scores and adds any new scores to the local database
*/
updatePlayerScores: () => void;
updatePlayerScores: () => Promise<void>;
}
const UPDATE_INTERVAL = 1000 * 60 * 30; // 30 minutes
export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
persist(
(set) => ({
(set, get) => ({
lastUpdated: 0,
players: [],
@ -76,12 +75,12 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
},
exists: (playerId: string) => {
const players: Player[] = useScoresaberScoresStore.getState().players;
const players: Player[] = get().players;
return players.some((player) => player.id == playerId);
},
get: (playerId: string) => {
const players: Player[] = useScoresaberScoresStore.getState().players;
const players: Player[] = get().players;
return players.find((player) => player.id == playerId);
},
@ -89,10 +88,10 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
playerId: string,
callback?: (page: number, totalPages: number) => void,
) => {
const players = useScoresaberScoresStore.getState().players;
const players: Player[] = get().players;
// Check if the player already exists
if (useScoresaberScoresStore.getState().exists(playerId)) {
if (get().exists(playerId)) {
return {
error: true,
message: "Player already exists",
@ -146,13 +145,12 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
}
// Remove scores that are already in the database
const player = useScoresaberScoresStore.getState().get(playerId);
const player = get().get(playerId);
if (player) {
scores = scores.filter(
(score) =>
player.scores.scoresaber.findIndex(
(s) => s.score.id == score.score.id,
) == -1,
player.scores.findIndex((s) => s.score.id == score.score.id) ==
-1,
);
}
@ -161,9 +159,7 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
...players,
{
id: playerId,
scores: {
scoresaber: scores,
},
scores: scores,
},
],
});
@ -174,7 +170,7 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
},
updatePlayerScores: async () => {
const players = useScoresaberScoresStore.getState().players;
const players = get().players;
const friends = useSettingsStore.getState().friends;
let allPlayers = new Array<ScoresaberPlayer>();
@ -188,7 +184,11 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
// add local player and friends if they don't exist
for (const player of allPlayers) {
if (useScoresaberScoresStore.getState().get(player.id) == undefined) {
if (get().lastUpdated == 0) {
set({ lastUpdated: Date.now() });
}
if (get().get(player.id) == undefined) {
toast.info(
`${
player.id == localPlayer?.id
@ -196,7 +196,7 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
: `Friend ${player.name} was`
} missing from the ScoreSaber scores database, adding...`,
);
await useScoresaberScoresStore.getState().addPlayer(player.id);
await get().addPlayer(player.id);
toast.success(
`${
player.id == useSettingsStore.getState().player?.id
@ -209,18 +209,14 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
// Skip if we refreshed the scores recently
const timeUntilRefreshMs =
UPDATE_INTERVAL -
(Date.now() - useScoresaberScoresStore.getState().lastUpdated);
UPDATE_INTERVAL - (Date.now() - get().lastUpdated);
if (timeUntilRefreshMs > 0) {
console.log(
"Waiting",
timeUntilRefreshMs / 1000,
"seconds to refresh scores for players",
);
setTimeout(
() => useScoresaberScoresStore.getState().updatePlayerScores(),
timeUntilRefreshMs,
);
setTimeout(() => get().updatePlayerScores(), timeUntilRefreshMs);
return;
}
@ -229,7 +225,7 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
if (player == undefined) continue;
console.log(`Updating scores for ${player.id}...`);
let oldScores = player.scores.scoresaber;
let oldScores: ScoresaberSmallerPlayerScore[] = player.scores;
// Sort the scores by date (newset to oldest), so we know when to stop searching for new scores
oldScores = oldScores.sort((a, b) => {
@ -296,13 +292,13 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
let newPlayers = players;
// Remove the player if it already exists
newPlayers = newPlayers.filter((playerr) => playerr.id != player.id);
newPlayers = newPlayers.filter(
(playerr: Player) => playerr.id != player.id,
);
// Add the player
newPlayers.push({
id: player.id,
scores: {
scoresaber: oldScores,
},
scores: oldScores,
});
if (newScoresCount > 0) {
@ -318,23 +314,8 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
}),
{
name: "scoresaberScores",
storage: createJSONStorage(() => localStorage),
storage: createJSONStorage(() => IDBStorage),
version: 1,
migrate: (state: any, version: number) => {
if (version == 1) {
state.players = state.players.map((player: any) => {
return {
id: player.id,
scores: {
scoresaber: player.scores,
},
};
});
return state;
}
},
},
),
);

31
src/store/settingsStore.ts
View File

@ -5,6 +5,7 @@ import { SortType, SortTypes } from "@/types/SortTypes";
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";
import { IDBStorage } from "./IndexedDBStorage";
interface SettingsStore {
player: ScoresaberPlayer | undefined;
@ -19,14 +20,14 @@ interface SettingsStore {
clearFriends: () => void;
setLastUsedSortType: (sortType: SortType) => void;
setProfilesLastUpdated: (profilesLastUpdated: number) => void;
refreshProfiles: () => void;
refreshProfiles: () => Promise<void>;
}
const UPDATE_INTERVAL = 1000 * 60 * 10; // 10 minutes
export const useSettingsStore = create<SettingsStore>()(
persist(
(set) => ({
(set, get) => ({
player: undefined,
lastUsedSortType: SortTypes.top,
friends: [],
@ -39,7 +40,7 @@ export const useSettingsStore = create<SettingsStore>()(
},
async addFriend(friendId: string) {
const friends = useSettingsStore.getState().friends;
const friends = this.friends;
if (friends.some((friend) => friend.id == friendId)) {
return false;
}
@ -52,7 +53,7 @@ export const useSettingsStore = create<SettingsStore>()(
},
removeFriend: (friendId: string) => {
const friends = useSettingsStore.getState().friends;
const friends = get().friends;
set({ friends: friends.filter((friend) => friend.id != friendId) });
return friendId;
@ -61,7 +62,7 @@ export const useSettingsStore = create<SettingsStore>()(
clearFriends: () => set({ friends: [] }),
isFriend: (friendId: string) => {
const friends: ScoresaberPlayer[] = useSettingsStore.getState().friends;
const friends: ScoresaberPlayer[] = get().friends;
return friends.some((friend) => friend.id == friendId);
},
@ -75,8 +76,7 @@ export const useSettingsStore = create<SettingsStore>()(
async refreshProfiles() {
const timeUntilRefreshMs =
UPDATE_INTERVAL -
(Date.now() - useSettingsStore.getState().profilesLastUpdated);
UPDATE_INTERVAL - (Date.now() - get().profilesLastUpdated);
if (timeUntilRefreshMs > 0) {
console.log(
"Waiting",
@ -87,7 +87,7 @@ export const useSettingsStore = create<SettingsStore>()(
return;
}
const player = useSettingsStore.getState().player;
const player = get().player;
if (player != undefined) {
const newPlayer = await ScoreSaberAPI.fetchPlayerData(player.id);
if (newPlayer != undefined && newPlayer != null) {
@ -96,7 +96,7 @@ export const useSettingsStore = create<SettingsStore>()(
}
}
const friends = useSettingsStore.getState().friends;
const friends = get().friends;
const newFriends = await Promise.all(
friends.map(async (friend) => {
const newFriend = await ScoreSaberAPI.fetchPlayerData(friend.id);
@ -105,21 +105,12 @@ export const useSettingsStore = create<SettingsStore>()(
return newFriend;
}),
);
set({ friends: newFriends });
useSettingsStore.setState({ profilesLastUpdated: Date.now() });
set({ profilesLastUpdated: Date.now(), friends: newFriends });
},
}),
{
name: "settings",
storage: createJSONStorage(() => localStorage),
storage: createJSONStorage(() => IDBStorage),
},
),
);
// Refresh profiles every 10 minutes
useSettingsStore.getState().refreshProfiles();
setInterval(
() => useSettingsStore.getState().refreshProfiles(),
UPDATE_INTERVAL,
);

6
src/utils/scoresaber/scores.ts
View File

@ -118,7 +118,7 @@ export function calcPpBoundary(playerId: string, expectedPp = 1) {
const rankedScores = useScoresaberScoresStore
.getState()
.players.find((p) => p.id === playerId)
?.scores?.scoresaber.filter((s) => s.score.pp !== undefined);
?.scores?.filter((s) => s.score.pp !== undefined);
if (!rankedScores) return null;
const rankedScorePps = rankedScores
@ -159,7 +159,7 @@ export function getHighestPpPlay(playerId: string) {
const rankedScores = useScoresaberScoresStore
.getState()
.players.find((p) => p.id === playerId)
?.scores?.scoresaber.filter((s) => s.score.pp !== undefined);
?.scores?.filter((s) => s.score.pp !== undefined);
if (!rankedScores) return null;
const rankedScorePps = rankedScores
@ -179,7 +179,7 @@ export function getAveragePp(playerId: string, limit: number = 20) {
const rankedScores = useScoresaberScoresStore
.getState()
.players.find((p) => p.id === playerId)
?.scores?.scoresaber.filter((s) => s.score.pp !== undefined);
?.scores?.filter((s) => s.score.pp !== undefined);
if (!rankedScores) return null;
const rankedScorePps = rankedScores