fix data fetching and auto refresh data

src/components/AppProvider.tsx

@@ -1,19 +1,9 @@
 "use client";
 
-import { usePlayerScoresStore } from "@/store/playerScoresStore";
-
 type AppProviderProps = {
   children: React.ReactNode;
 };
 
-usePlayerScoresStore.getState().updatePlayerScores();
-setTimeout(
-  () => {
-    usePlayerScoresStore.getState().updatePlayerScores();
-  },
-  1000 * 60 * 10,
-); // fetch new scores every 10 minutes
-
 export default function AppProvider({ children }: AppProviderProps) {
   return <>{children}</>;
 }

src/components/Button.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 
 interface ButtonProps {
-  text: string;
+  text: JSX.Element | string;
   url: string;
   icon?: JSX.Element;
   className?: string;

src/components/Navbar.tsx

@@ -32,7 +32,7 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
       </a>
 
       {children && (
-        <div className="absolute z-20 hidden divide-y rounded-md bg-neutral-600 shadow-sm group-hover:flex">
+        <div className="absolute z-20 hidden divide-y rounded-md bg-gray-600 opacity-[0.98] shadow-sm group-hover:flex">
           <div className="p-2">{children}</div>
         </div>
       )}
@@ -61,7 +61,27 @@ export default function Navbar() {
         )}
 
         <NavbarButton text="Friends" icon={<UserIcon height={20} width={20} />}>
-          <p className="text-sm font-bold">No friends, add someone!</p>
+          {settingsStore?.friends.length == 0 ? (
+            <p className="text-sm font-bold">No friends, add someone!</p>
+          ) : (
+            settingsStore?.friends.map((friend) => {
+              return (
+                <Button
+                  key={friend.id}
+                  className="mt-2 bg-gray-600"
+                  text={friend.name}
+                  url={`/player/${friend.id}`}
+                  icon={
+                    <Avatar
+                      url={friend.profilePicture}
+                      label={`${friend.name}'s avatar`}
+                      size={20}
+                    />
+                  }
+                />
+              );
+            })
+          )}
 
           <Button
             className="mt-2"

src/components/player/PlayerInfo.tsx

@@ -3,7 +3,11 @@ import { usePlayerScoresStore } from "@/store/playerScoresStore";
 import { useSettingsStore } from "@/store/settingsStore";
 import { formatNumber } from "@/utils/number";
 import { calcPpBoundary, getHighestPpPlay } from "@/utils/scoresaber/scores";
-import { GlobeAsiaAustraliaIcon, HomeIcon } from "@heroicons/react/20/solid";
+import {
+  GlobeAsiaAustraliaIcon,
+  HomeIcon,
+  UserIcon,
+} from "@heroicons/react/20/solid";
 import { useRef } from "react";
 import ReactCountryFlag from "react-country-flag";
 import { toast } from "react-toastify";
@@ -29,41 +33,62 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
 
   async function claimProfile() {
     settingsStore?.setUserId(playerId);
-    settingsStore?.refreshProfile();
+    addProfile(false);
+  }
 
-    const reponse = await playerScoreStore?.addPlayer(
-      playerId,
-      (page, totalPages) => {
-        const autoClose = page == totalPages ? 5000 : false;
-
-        if (page == 1) {
-          toastId.current = toast.info(
-            `Fetching scores ${page}/${totalPages}`,
-            {
-              autoClose: autoClose,
-              progress: page / totalPages,
-            },
-          );
-        } else {
-          toast.update(toastId.current, {
-            progress: page / totalPages,
-            render: `Fetching scores ${page}/${totalPages}`,
-            autoClose: autoClose,
-          });
-        }
-
-        console.log(`Fetching scores for ${playerId} (${page}/${totalPages})`);
-      },
-    );
-    if (reponse?.error) {
-      toast.error("Failed to claim profile");
-      console.log(reponse.message);
+  async function addFriend() {
+    const friend = await settingsStore?.addFriend(playerData.id);
+    if (!friend) {
+      toast.error(`Failed to add ${playerData.name} as a friend`);
       return;
     }
-
-    toast.success("Successfully claimed profile");
+    addProfile(true);
   }
 
+  async function addProfile(isFriend: boolean) {
+    if (!usePlayerScoresStore.getState().exists(playerId)) {
+      const reponse = await playerScoreStore?.addPlayer(
+        playerId,
+        (page, totalPages) => {
+          const autoClose = page == totalPages ? 5000 : false;
+
+          if (page == 1) {
+            toastId.current = toast.info(
+              `Fetching scores ${page}/${totalPages}`,
+              {
+                autoClose: autoClose,
+                progress: page / totalPages,
+              },
+            );
+          } else {
+            toast.update(toastId.current, {
+              progress: page / totalPages,
+              render: `Fetching scores ${page}/${totalPages}`,
+              autoClose: autoClose,
+            });
+          }
+
+          console.log(
+            `Fetching scores for ${playerId} (${page}/${totalPages})`,
+          );
+        },
+      );
+      if (reponse?.error) {
+        toast.error("Failed to fetch scores");
+        console.log(reponse.message);
+        return;
+      }
+    }
+
+    if (!isFriend) {
+      toast.success(`Successfully set ${playerData.name} as your profile`);
+    } else {
+      toast.success(`Successfully added ${playerData.name} as a friend`);
+    }
+  }
+
+  const isOwnProfile = settingsStore?.userId == playerId;
+
   return (
     <Card className="mt-2">
       {/* Player Info */}
@@ -76,14 +101,21 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
 
           {/* Settings Buttons */}
           <div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center">
-            {settingsStore?.userId !== playerId && (
-              <button>
-                <HomeIcon
-                  title="Set as your Profile"
-                  width={28}
-                  height={28}
-                  onClick={claimProfile}
-                />
+            {!isOwnProfile && (
+              <button
+                className="h-fit w-fit rounded-md bg-blue-500 p-1 hover:bg-blue-600"
+                onClick={claimProfile}
+              >
+                <HomeIcon title="Set as your Profile" width={24} height={24} />
+              </button>
+            )}
+
+            {!settingsStore?.isFriend(playerId) && !isOwnProfile && (
+              <button
+                className="rounded-md bg-blue-500 p-1 hover:bg-blue-600"
+                onClick={addFriend}
+              >
+                <UserIcon title="Add as Friend" width={24} height={24} />
               </button>
             )}
           </div>

src/store/playerScoresStore.ts

@@ -2,21 +2,23 @@
 
 import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
 import { fetchAllScores, fetchScores } from "@/utils/scoresaber/api";
+import moment from "moment";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
+import { useSettingsStore } from "./settingsStore";
 
 type Player = {
-  lastUpdated: number;
   id: string;
   scores: ScoresaberPlayerScore[];
 };
 
 interface PlayerScoresStore {
+  lastUpdated: number;
   players: Player[];
 
+  setLastUpdated: (lastUpdated: number) => void;
   exists: (playerId: string) => boolean;
   get(playerId: string): Player | undefined;
-
   addPlayer: (
     playerId: string,
     callback?: (page: number, totalPages: number) => void,
@@ -27,13 +29,18 @@ interface PlayerScoresStore {
   updatePlayerScores: () => void;
 }
 
-const UPDATE_INTERVAL = 1000 * 60 * 60; // 1 hour
+const UPDATE_INTERVAL = 1000 * 60 * 30; // 30 minutes
 
 export const usePlayerScoresStore = create<PlayerScoresStore>()(
   persist(
     (set) => ({
+      lastUpdated: 0,
       players: [],
 
+      setLastUpdated: (lastUpdated: number) => {
+        set({ lastUpdated });
+      },
+
       exists: (playerId: string) => {
         const players: Player[] = usePlayerScoresStore.getState().players;
         return players.some((player) => player.id == playerId);
@@ -73,15 +80,11 @@ export const usePlayerScoresStore = create<PlayerScoresStore>()(
             message: "Could not fetch scores for player",
           };
         }
-
-        console.log(scores);
-
         set({
           players: [
             ...players,
             {
               id: playerId,
-              lastUpdated: new Date().getTime(),
               scores: scores,
             },
           ],
@@ -93,18 +96,34 @@ export const usePlayerScoresStore = create<PlayerScoresStore>()(
       },
 
       updatePlayerScores: async () => {
+        // Skip if we refreshed the scores recently
+        const timeUntilRefreshMs =
+          UPDATE_INTERVAL -
+          (Date.now() - usePlayerScoresStore.getState().lastUpdated);
+        if (timeUntilRefreshMs > 0) {
+          console.log(
+            "Waiting",
+            moment.duration(timeUntilRefreshMs).humanize(),
+            "to refresh scores for players",
+          );
+          setTimeout(
+            () => usePlayerScoresStore.getState().updatePlayerScores(),
+            timeUntilRefreshMs,
+          );
+          return;
+        }
+
         const players = usePlayerScoresStore.getState().players;
+        const friends = useSettingsStore.getState().friends;
+        for (const friend of friends) {
+          players.push({
+            id: friend.id,
+            scores: [],
+          });
+        }
 
         for (const player of players) {
           if (player == undefined) continue;
-
-          // Skip if the player was already updated recently
-          if (
-            player.lastUpdated >
-            new Date(Date.now() - UPDATE_INTERVAL).getTime()
-          )
-            continue;
-
           console.log(`Updating scores for ${player.id}...`);
 
           let oldScores = player.scores;
@@ -116,7 +135,9 @@ export const usePlayerScoresStore = create<PlayerScoresStore>()(
             return bDate.getTime() - aDate.getTime();
           });
 
-          const mostRecentScore = oldScores?.[0].score;
+          if (!oldScores || oldScores.length == 0) continue;
+
+          const mostRecentScore = oldScores[0].score;
           if (mostRecentScore == undefined) continue;
           let search = true;
 
@@ -150,7 +171,6 @@ export const usePlayerScoresStore = create<PlayerScoresStore>()(
           newPlayers = newPlayers.filter((playerr) => playerr.id != player.id);
           // Add the player
           newPlayers.push({
-            lastUpdated: new Date().getTime(),
             id: player.id,
             scores: oldScores,
           });
@@ -158,6 +178,11 @@ export const usePlayerScoresStore = create<PlayerScoresStore>()(
           if (newScoresCount > 0) {
             console.log(`Found ${newScoresCount} new scores for ${player.id}`);
           }
+
+          set({
+            players: newPlayers,
+            lastUpdated: Date.now(),
+          });
         }
       },
     }),
@@ -167,3 +192,8 @@ export const usePlayerScoresStore = create<PlayerScoresStore>()(
     },
   ),
 );
+
+usePlayerScoresStore.getState().updatePlayerScores();
+setInterval(() => {
+  usePlayerScoresStore.getState().updatePlayerScores();
+}, UPDATE_INTERVAL);

src/store/settingsStore.ts

@@ -1,7 +1,9 @@
 "use client";
 
+import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { SortType, SortTypes } from "@/types/SortTypes";
 import { getPlayerInfo } from "@/utils/scoresaber/api";
+import moment from "moment";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 
@@ -9,19 +11,30 @@ interface SettingsStore {
   userId: string | undefined;
   profilePicture: string | undefined;
   lastUsedSortType: SortType;
+  friends: ScoresaberPlayer[];
+  profilesLastUpdated: number;
 
   setUserId: (userId: string) => void;
   setProfilePicture: (profilePicture: string) => void;
   setLastUsedSortType: (sortType: SortType) => void;
-  refreshProfile: () => void;
+  addFriend: (friendId: string) => Promise<boolean>;
+  removeFriend: (friendId: string) => void;
+  isFriend: (friendId: string) => boolean;
+  clearFriends: () => void;
+  setProfilesLastUpdated: (profilesLastUpdated: number) => void;
+  refreshProfiles: () => void;
 }
 
+const UPDATE_INTERVAL = 1000 * 60 * 10; // 10 minutes
+
 export const useSettingsStore = create<SettingsStore>()(
   persist(
     (set) => ({
       userId: undefined,
       profilePicture: undefined,
       lastUsedSortType: SortTypes.top,
+      friends: [],
+      profilesLastUpdated: 0,
 
       setUserId: (userId: string) => {
         set({ userId });
@@ -32,18 +45,77 @@ export const useSettingsStore = create<SettingsStore>()(
       setLastUsedSortType: (sortType: SortType) =>
         set({ lastUsedSortType: sortType }),
 
-      async refreshProfile() {
-        const id = useSettingsStore.getState().userId;
-        if (!id) return;
+      async addFriend(friendId: string) {
+        const friends = useSettingsStore.getState().friends;
+        if (friends.some((friend) => friend.id == friendId)) {
+          return false;
+        }
 
-        const profile = await getPlayerInfo(id);
-        if (profile == undefined || profile == null) return;
+        const friend = await getPlayerInfo(friendId);
+        if (friend == undefined || friend == null) return false;
 
-        useSettingsStore.setState({
-          userId: profile.id,
-          profilePicture: profile.profilePicture,
-        });
-        console.log("Updated profile:", profile.id);
+        set({ friends: [...friends, friend] });
+        return true;
+      },
+
+      removeFriend: (friendId: string) => {
+        const friends = useSettingsStore.getState().friends;
+        set({ friends: friends.filter((friend) => friend.id != friendId) });
+
+        return friendId;
+      },
+
+      clearFriends: () => set({ friends: [] }),
+
+      isFriend: (friendId: string) => {
+        const friends: ScoresaberPlayer[] = useSettingsStore.getState().friends;
+        return friends.some((friend) => friend.id == friendId);
+      },
+
+      setProfilesLastUpdated: (profilesLastUpdated: number) =>
+        set({ profilesLastUpdated }),
+
+      async refreshProfiles() {
+        const timeUntilRefreshMs =
+          UPDATE_INTERVAL -
+          (Date.now() - useSettingsStore.getState().profilesLastUpdated);
+        if (timeUntilRefreshMs > 0) {
+          console.log(
+            "Waiting",
+            moment.duration(timeUntilRefreshMs).humanize(),
+            "to refresh profiles",
+          );
+          setTimeout(() => this.refreshProfiles(), timeUntilRefreshMs);
+          return;
+        }
+
+        const userId = useSettingsStore.getState().userId;
+        const profiles =
+          useSettingsStore.getState().friends.map((f) => f.id) ?? [];
+        if (userId) {
+          profiles.push(userId);
+        }
+
+        for (const profileId of profiles) {
+          const profile = await getPlayerInfo(profileId);
+          if (profile == undefined || profile == null) return;
+
+          if (this.isFriend(profileId)) {
+            const friends = useSettingsStore.getState().friends;
+            const friendIndex = friends.findIndex(
+              (friend) => friend.id == profileId,
+            );
+            friends[friendIndex] = profile;
+            set({ friends });
+          } else {
+            this.setProfilePicture(profile.profilePicture);
+            set({ userId: profile.id });
+          }
+
+          console.log("Updated profile:", profile.id);
+        }
+
+        useSettingsStore.setState({ profilesLastUpdated: Date.now() });
       },
     }),
     {
@@ -53,4 +125,8 @@ export const useSettingsStore = create<SettingsStore>()(
   ),
 );
 
-useSettingsStore.getState().refreshProfile();
+useSettingsStore.getState().refreshProfiles();
+setInterval(
+  () => useSettingsStore.getState().refreshProfiles(),
+  UPDATE_INTERVAL,
+);

src/utils/scoresaber/api.ts

@@ -145,8 +145,6 @@ export async function fetchAllScores(
     page++;
   } while (!done);
 
-  console.log(scores);
-
   return scores as ScoresaberPlayerScore[];
 }