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>