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 { useSettingsStore } from "@/store/settingsStore";
|
||||||
import { formatNumber } from "@/utils/number";
|
import { formatNumber } from "@/utils/number";
|
||||||
import { fetchScores, getPlayerInfo } from "@/utils/scoresaber/api";
|
import { fetchScores, getPlayerInfo } from "@/utils/scoresaber/api";
|
||||||
|
import useStore from "@/utils/useStore";
|
||||||
import {
|
import {
|
||||||
ClockIcon,
|
ClockIcon,
|
||||||
GlobeAsiaAustraliaIcon,
|
GlobeAsiaAustraliaIcon,
|
||||||
@ -59,7 +60,13 @@ const sortTypes: { [key: string]: SortType } = {
|
|||||||
const DEFAULT_SORT_TYPE = sortTypes.top;
|
const DEFAULT_SORT_TYPE = sortTypes.top;
|
||||||
|
|
||||||
export default function Player({ params }: { params: { id: string } }) {
|
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 searchParams = useSearchParams();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
@ -135,7 +142,8 @@ export default function Player({ params }: { params: { id: string } }) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
function claimProfile() {
|
function claimProfile() {
|
||||||
settingsStore.setUserId(params.id);
|
settingsStore?.setUserId(params.id);
|
||||||
|
settingsStore?.refreshProfile();
|
||||||
toast.success("Successfully claimed profile");
|
toast.success("Successfully claimed profile");
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -206,7 +214,7 @@ export default function Player({ params }: { params: { id: string } }) {
|
|||||||
|
|
||||||
{/* Settings Buttons */}
|
{/* 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">
|
<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>
|
<button>
|
||||||
<HomeIcon
|
<HomeIcon
|
||||||
title="Set as your Profile"
|
title="Set as your Profile"
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useSettingsStore } from "@/store/settingsStore";
|
import { useSettingsStore } from "@/store/settingsStore";
|
||||||
import { useStore } from "@/utils/useState";
|
import useStore from "@/utils/useStore";
|
||||||
import {
|
import {
|
||||||
CogIcon,
|
CogIcon,
|
||||||
MagnifyingGlassIcon,
|
MagnifyingGlassIcon,
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import { getPlayerInfo } from "@/utils/scoresaber/api";
|
import { getPlayerInfo } from "@/utils/scoresaber/api";
|
||||||
import { create } from "zustand";
|
import { create } from "zustand";
|
||||||
import { persist } from "zustand/middleware";
|
import { createJSONStorage, persist } from "zustand/middleware";
|
||||||
|
|
||||||
interface SettingsStore {
|
interface SettingsStore {
|
||||||
userId: string | undefined;
|
userId: string | undefined;
|
||||||
@ -10,6 +10,7 @@ interface SettingsStore {
|
|||||||
|
|
||||||
setUserId: (userId: string) => void;
|
setUserId: (userId: string) => void;
|
||||||
setProfilePicture: (profilePicture: string) => void;
|
setProfilePicture: (profilePicture: string) => void;
|
||||||
|
refreshProfile: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useSettingsStore = create<SettingsStore>()(
|
export const useSettingsStore = create<SettingsStore>()(
|
||||||
@ -22,26 +23,25 @@ export const useSettingsStore = create<SettingsStore>()(
|
|||||||
set({ userId });
|
set({ userId });
|
||||||
},
|
},
|
||||||
setProfilePicture: (profilePicture: string) => set({ profilePicture }),
|
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",
|
name: "settings",
|
||||||
getStorage: () => localStorage,
|
storage: createJSONStorage(() => localStorage),
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
async function refreshProfile() {
|
useSettingsStore.getState().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();
|
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
|
// useStore.ts
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
export const useStore = <T, F>(
|
const useStore = <T, F>(
|
||||||
store: (callback: (state: T) => unknown) => unknown,
|
store: (callback: (state: T) => unknown) => unknown,
|
||||||
callback: (state: T) => F,
|
callback: (state: T) => F,
|
||||||
) => {
|
) => {
|
||||||
@ -13,3 +14,5 @@ export const useStore = <T, F>(
|
|||||||
|
|
||||||
return data;
|
return data;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default useStore;
|
Loading…
Reference in New Issue
Block a user