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

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

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);
},
};

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;
}
},
},
),
);

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,
);