diff --git a/lib/src/Components/AppShell/UserControl.tsx b/lib/src/Components/AppShell/UserControl.tsx index 7c2902ae..c951d372 100644 --- a/lib/src/Components/AppShell/UserControl.tsx +++ b/lib/src/Components/AppShell/UserControl.tsx @@ -1,10 +1,9 @@ import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon' -import { useState, useEffect } from 'react' import { Link } from 'react-router-dom' import { toast } from 'react-toastify' import { useAuth } from '#components/Auth/useAuth' -import { useItems } from '#components/Map/hooks/useItems' +import { useMyProfile } from '#components/Map/hooks/useMyProfile' import { useAppState } from './hooks/useAppState' @@ -13,17 +12,14 @@ import type { Item } from '#types/Item' export const UserControl = () => { const { isAuthenticated, user, logout } = useAuth() const appState = useAppState() + const { myProfile } = useMyProfile() - const [userProfile, setUserProfile] = useState({} as Item) - const items = useItems() - - useEffect(() => { - const profile = - user && items.find((i) => i.user_created?.id === user.id && i.layer?.userProfileLayer) - profile - ? setUserProfile(profile) - : setUserProfile({ id: 'new', name: user?.first_name ?? '', text: '' }) - }, [user, items]) + // Use myProfile or create a fallback object for display + const userProfile: Partial = myProfile ?? { + id: 'new', + name: user?.first_name ?? '', + text: '', + } const onLogout = async () => { await toast.promise(logout(), { @@ -52,7 +48,7 @@ export const UserControl = () => { {isAuthenticated ? (
{avatar && ( @@ -62,7 +58,7 @@ export const UserControl = () => {
)} -
{userProfile.name || user?.first_name}
+
{userProfile.name ?? user?.first_name}