make "You" button in navbar show up w/o refreshing page
Some checks failed
deploy / deploy (push) Has been cancelled

This commit is contained in:
Lee 2023-10-21 22:25:41 +01:00
parent 70c5109417
commit aeeaa523f9
4 changed files with 33 additions and 22 deletions

@ -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;