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