102 lines
3.0 KiB
TypeScript
102 lines
3.0 KiB
TypeScript
'use client';
|
|
import { Link } from '@/shared/config/i18n/navigation';
|
|
import { Button } from '@/shared/ui/button';
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuContent,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
NavigationMenuTrigger,
|
|
} from '@/shared/ui/navigation-menu';
|
|
import SubMenuLink from './SubMenuLink';
|
|
import { ChangeLang } from './ChangeLang';
|
|
import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useUserPlagiatStore } from '@/shared/zustand/user';
|
|
import { LogOut } from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
function AuthButtons() {
|
|
const t = useTranslations('Navbar');
|
|
const [localUser, setLocalUser] = useState<{
|
|
id: number;
|
|
name: string;
|
|
surname: string;
|
|
} | null>(null);
|
|
|
|
const auth = {
|
|
login: { title: t('login'), url: '#' },
|
|
signup: { title: t('signup'), url: '#' },
|
|
};
|
|
|
|
const userItem = [{ title: t('logout'), url: '/', icon: LogOut }];
|
|
|
|
const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
|
|
const toggleRegisterModal = useRegisterModal(
|
|
(state) => state.toggleRegisterModal,
|
|
);
|
|
const user = useUserPlagiatStore((state) => state.user);
|
|
const clearUser = useUserPlagiatStore((state) => state.clearUser);
|
|
const clearTokens = () => {
|
|
localStorage.removeItem('access');
|
|
localStorage.removeItem('refresh');
|
|
localStorage.removeItem('user');
|
|
clearUser();
|
|
};
|
|
console.log('Current user:', user);
|
|
|
|
useEffect(() => {
|
|
const data = localStorage.getItem('user');
|
|
|
|
if (data) {
|
|
setLocalUser(JSON.parse(data));
|
|
} else {
|
|
setLocalUser(null);
|
|
}
|
|
}, [user]);
|
|
|
|
if (localUser) {
|
|
return (
|
|
<div className="flex flex-row max-sm:items-center max-sm:justify-around gap-3">
|
|
<div className="sm:flex hidden">
|
|
<ChangeLang />
|
|
</div>
|
|
<NavigationMenu>
|
|
<NavigationMenuItem>
|
|
<NavigationMenuTrigger className="text-xl">
|
|
{localUser.name} {localUser.surname}
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent className="bg-popover text-popover-foreground">
|
|
{userItem.map((subItem) => (
|
|
<NavigationMenuLink
|
|
asChild
|
|
key={subItem.title}
|
|
className="w-80"
|
|
>
|
|
<SubMenuLink logOut={clearTokens} item={subItem} />
|
|
</NavigationMenuLink>
|
|
))}
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
</NavigationMenu>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-row max-sm:items-center max-sm:justify-around gap-3">
|
|
<div className="sm:flex hidden">
|
|
<ChangeLang />
|
|
</div>
|
|
<Button variant="outline" onClick={() => toggleLoginModal()}>
|
|
<Link href={auth.login.url}>{auth.login.title}</Link>
|
|
</Button>
|
|
<Button onClick={() => toggleRegisterModal()}>
|
|
<Link href={auth.signup.url}>{auth.signup.title}</Link>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { AuthButtons };
|