make "You" button in navbar show up w/o refreshing page
Some checks failed
deploy / deploy (push) Has been cancelled
Some checks failed
deploy / deploy (push) Has been cancelled
This commit is contained in:
parent
70c5109417
commit
aeeaa523f9
@ -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"
|
||||
|
@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useSettingsStore } from "@/store/settingsStore";
|
||||
import { useStore } from "@/utils/useState";
|
||||
import useStore from "@/utils/useStore";
|
||||
import {
|
||||
CogIcon,
|
||||
MagnifyingGlassIcon,
|
||||
|
@ -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,26 +23,25 @@ export const useSettingsStore = create<SettingsStore>()(
|
||||
set({ userId });
|
||||
},
|
||||
setProfilePicture: (profilePicture: string) => set({ profilePicture }),
|
||||
async refreshProfile() {
|
||||
const id = useSettingsStore.getState().userId;
|
||||
if (!id) return;
|
||||
|
||||
const profile = await getPlayerInfo(id);
|
||||
if (profile == undefined || profile == null) return;
|
||||
|
||||
useSettingsStore.setState({
|
||||
userId: profile.id,
|
||||
profilePicture: profile.profilePicture,
|
||||
});
|
||||
console.log("Updated profile:", profile.id);
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: "settings",
|
||||
getStorage: () => localStorage,
|
||||
storage: createJSONStorage(() => localStorage),
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
async function refreshProfile() {
|
||||
const id = useSettingsStore.getState().userId;
|
||||
if (!id) return;
|
||||
|
||||
const profile = await getPlayerInfo(id);
|
||||
if (profile == undefined || profile == null) return;
|
||||
|
||||
useSettingsStore.setState({
|
||||
userId: profile.id,
|
||||
profilePicture: profile.profilePicture,
|
||||
});
|
||||
console.log("Updated profile:", profile.id);
|
||||
}
|
||||
|
||||
refreshProfile();
|
||||
useSettingsStore.getState().refreshProfile();
|
||||
|
@ -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;
|
Loading…
Reference in New Issue
Block a user