diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 6b071d6..3c10be9 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -15,44 +15,42 @@ import { } from "@/components/ui/dropdown-menu"; import { useState, useEffect } from 'react'; import { ThemeToggleButton } from '@/components/ui/theme-toggle'; -// import LanguageSwitcher from './LanguageSwitcher'; // Removed -import { useI18n, useCurrentLocale, useChangeLocale } from '@/locales/client'; +import { useI18n, useCurrentLocale } from '@/locales/client'; +import { getUserByEmail } from '@/app/actions/user'; +import type { User } from '@/types'; export default function Header() { const pathname = usePathname(); const router = useRouter(); const t = useI18n(); const locale = useCurrentLocale(); - const changeLocale = useChangeLocale(); const [isAuthenticated, setIsAuthenticated] = useState(false); const [isMounted, setIsMounted] = useState(false); - const [userEmail, setUserEmail] = useState(null); + const [user, setUser] = useState(null); useEffect(() => { setIsMounted(true); - const authStatus = localStorage.getItem('isToyShareAuthenticated') === 'true'; - setIsAuthenticated(authStatus); - if (authStatus) { - setUserEmail(localStorage.getItem('userEmail')); - } - }, []); - useEffect(() => { - // This effect handles re-authentication status if localStorage changes from another tab/window - const handleStorageChange = () => { + const checkAuth = async () => { const authStatus = localStorage.getItem('isToyShareAuthenticated') === 'true'; setIsAuthenticated(authStatus); if (authStatus) { - setUserEmail(localStorage.getItem('userEmail')); + const email = localStorage.getItem('userEmail'); + if (email) { + const fetchedUser = await getUserByEmail(email); + setUser(fetchedUser); + } } else { - setUserEmail(null); + setUser(null); } }; + + checkAuth(); - window.addEventListener('storage', handleStorageChange); + window.addEventListener('storage', checkAuth); return () => { - window.removeEventListener('storage', handleStorageChange); + window.removeEventListener('storage', checkAuth); }; }, []); @@ -62,8 +60,6 @@ export default function Header() { const preferredLang = localStorage.getItem('userPreferredLanguage') as 'en' | 'zh-TW' | null; if (preferredLang && preferredLang !== locale) { const currentPathWithoutLocale = pathname.startsWith(`/${locale}`) ? pathname.substring(`/${locale}`.length) : pathname; - // Ensure the path exists before redirecting. For simplicity, assume it does. - // A more robust solution would check against a list of valid routes for the preferredLang. router.push(`/${preferredLang}${currentPathWithoutLocale}${window.location.search}`); } } @@ -74,11 +70,11 @@ export default function Header() { localStorage.removeItem('isToyShareAuthenticated'); localStorage.removeItem('userEmail'); setIsAuthenticated(false); - setUserEmail(null); + setUser(null); router.push(`/${locale}/`); }; - const isAdmin = userEmail === 'user@example.com' || userEmail === 'admin@example.com'; + const isAdmin = user?.role === 'Admin'; const cleanPathname = pathname.startsWith(`/${locale}`) ? pathname.substring(`/${locale}`.length) || '/' @@ -99,7 +95,7 @@ export default function Header() { {t('header.browse_toys')} - {isMounted && isAuthenticated ? ( + {isMounted && isAuthenticated && user ? (