114 lines
3.5 KiB
TypeScript
114 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Button } from 'antd';
|
|
import { useSelectedLayoutSegment } from 'next/navigation';
|
|
import { Link } from '../../../i18n/routing';
|
|
import { AUTH_TOKEN_KEY } from '../../../constants/common';
|
|
import { useLocalStorage } from '../../../hooks/useLocalStorage';
|
|
import { AuthModal } from '../../Modals/AuthModal';
|
|
import { i18nText } from '../../../i18nKeys';
|
|
|
|
type HeaderAuthLinksProps = {
|
|
locale: string;
|
|
separatorClass?: string;
|
|
};
|
|
|
|
function HeaderAuthLinks ({
|
|
locale,
|
|
separatorClass = 'b-header__nav__list__line'
|
|
}: HeaderAuthLinksProps) {
|
|
const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
|
|
const [mode, setMode] = useState<'enter' | 'register' | 'reset' | 'finish'>('enter');
|
|
const selectedLayoutSegment = useSelectedLayoutSegment();
|
|
const pathname = selectedLayoutSegment || '';
|
|
const [token, setToken] = useLocalStorage(AUTH_TOKEN_KEY, '');
|
|
const [isPayPath, setIsPayPath] = useState<boolean>(false);
|
|
|
|
const onOpen = (mode: 'enter' | 'register' | 'reset' | 'finish') => {
|
|
setMode(mode);
|
|
setIsOpenModal(true);
|
|
};
|
|
|
|
const handleAuthRegister = () => {
|
|
setIsPayPath(true);
|
|
onOpen('register');
|
|
};
|
|
|
|
const handleAuthEnter = () => {
|
|
setIsPayPath(true);
|
|
onOpen('enter');
|
|
};
|
|
|
|
useEffect(() => {
|
|
document.addEventListener('show_auth_register', handleAuthRegister);
|
|
document.addEventListener('show_auth_enter', handleAuthEnter);
|
|
return () => {
|
|
document.removeEventListener('show_auth_register', handleAuthRegister);
|
|
document.removeEventListener('show_auth_enter', handleAuthEnter);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!isOpenModal) {
|
|
setMode('enter');
|
|
}
|
|
}, [isOpenModal]);
|
|
|
|
useEffect(() => {
|
|
if (token && isPayPath) {
|
|
const showPayForm = new Event('show_pay_form');
|
|
document.dispatchEvent(showPayForm);
|
|
}
|
|
}, [token]);
|
|
|
|
const addNewEvent = (name: 'show_auth_register' | 'show_auth_enter') => {
|
|
const evt = new Event(name);
|
|
document.dispatchEvent(evt);
|
|
};
|
|
|
|
return token
|
|
? (
|
|
<li>
|
|
<Link href={'/account/sessions' as any} className={pathname === 'account' ? 'active' : ''}>
|
|
{i18nText('account', locale)}
|
|
</Link>
|
|
</li>
|
|
)
|
|
: (
|
|
<>
|
|
<li>
|
|
<Button
|
|
className="b-header__auth"
|
|
type="link"
|
|
onClick={() => addNewEvent('show_auth_register')}
|
|
>
|
|
{i18nText('registration', locale)}
|
|
</Button>
|
|
</li>
|
|
<li>
|
|
<span className={separatorClass}>|</span>
|
|
</li>
|
|
<li>
|
|
<Button
|
|
className="b-header__auth"
|
|
type="link"
|
|
onClick={() => addNewEvent('show_auth_enter')}
|
|
>
|
|
{i18nText('enter', locale)}
|
|
</Button>
|
|
</li>
|
|
<AuthModal
|
|
open={isOpenModal}
|
|
handleCancel={() => setIsOpenModal(false)}
|
|
mode={mode}
|
|
updateMode={setMode}
|
|
updateToken={setToken}
|
|
locale={locale}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default HeaderAuthLinks;
|