make "You" button in navbar show up w/o refreshing page

src/app/player/[id]/page.tsx

@@ -13,6 +13,7 @@ import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
 import { useSettingsStore } from "@/store/settingsStore";
 import { formatNumber } from "@/utils/number";
 import { fetchScores, getPlayerInfo } from "@/utils/scoresaber/api";
+import useStore from "@/utils/useStore";
 import {
   ClockIcon,
   GlobeAsiaAustraliaIcon,
@@ -59,7 +60,13 @@ const sortTypes: { [key: string]: SortType } = {
 const DEFAULT_SORT_TYPE = sortTypes.top;
 
 export default function Player({ params }: { params: { id: string } }) {
-  const settingsStore = useSettingsStore();
+  const settingsStore = useStore(useSettingsStore, (state) => {
+    return {
+      userId: state.userId,
+      setUserId: state.setUserId,
+      refreshProfile: state.refreshProfile,
+    };
+  });
   const searchParams = useSearchParams();
   const router = useRouter();
 
@@ -135,7 +142,8 @@ export default function Player({ params }: { params: { id: string } }) {
   );
 
   function claimProfile() {
-    settingsStore.setUserId(params.id);
+    settingsStore?.setUserId(params.id);
+    settingsStore?.refreshProfile();
     toast.success("Successfully claimed profile");
   }
 
@@ -206,7 +214,7 @@ export default function Player({ params }: { params: { id: string } }) {
 
               {/* Settings Buttons */}
               <div className="absolute right-3 top-16 flex justify-end md:relative md:right-3 md:top-0 md:mt-2 md:justify-center">
-                {settingsStore.userId !== params.id && (
+                {settingsStore?.userId !== params.id && (
                   <button>
                     <HomeIcon
                       title="Set as your Profile"

src/components/Navbar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useSettingsStore } from "@/store/settingsStore";
-import { useStore } from "@/utils/useState";
+import useStore from "@/utils/useStore";
 import {
   CogIcon,
   MagnifyingGlassIcon,

src/store/settingsStore.ts

@@ -2,7 +2,7 @@
 
 import { getPlayerInfo } from "@/utils/scoresaber/api";
 import { create } from "zustand";
-import { persist } from "zustand/middleware";
+import { createJSONStorage, persist } from "zustand/middleware";
 
 interface SettingsStore {
   userId: string | undefined;
@@ -10,6 +10,7 @@ interface SettingsStore {
 
   setUserId: (userId: string) => void;
   setProfilePicture: (profilePicture: string) => void;
+  refreshProfile: () => void;
 }
 
 export const useSettingsStore = create<SettingsStore>()(
@@ -22,15 +23,7 @@ export const useSettingsStore = create<SettingsStore>()(
         set({ userId });
       },
       setProfilePicture: (profilePicture: string) => set({ profilePicture }),
-    }),
+      async refreshProfile() {
-    {
-      name: "settings",
-      getStorage: () => localStorage,
-    },
-  ),
-);
-
-async function refreshProfile() {
         const id = useSettingsStore.getState().userId;
         if (!id) return;
 
@@ -42,6 +35,13 @@ async function refreshProfile() {
           profilePicture: profile.profilePicture,
         });
         console.log("Updated profile:", profile.id);
-}
+      },
+    }),
+    {
+      name: "settings",
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+);
 
-refreshProfile();
+useSettingsStore.getState().refreshProfile();

src/utils/useStore.ts

@@ -1,6 +1,7 @@
+// useStore.ts
 import { useEffect, useState } from "react";
 
-export const useStore = <T, F>(
+const useStore = <T, F>(
   store: (callback: (state: T) => unknown) => unknown,
   callback: (state: T) => F,
 ) => {
@@ -13,3 +14,5 @@ export const useStore = <T, F>(
 
   return data;
 };
+
+export default useStore;