feat: show menu in mode login/ nit login

:%s
This commit is contained in:
lytrankieio123
2021-09-29 17:11:58 +07:00
parent faabf5228d
commit 48ab2f2242
3 changed files with 43 additions and 36 deletions

View File

@@ -1,15 +0,0 @@
import React from 'react';
import { Layout } from 'src/components/common';
import { AccountSignIn } from 'src/components/modules/account';
const AccountNotLogin = () => {
return (
<>
<AccountSignIn/>
</>
);
};
AccountNotLogin.Layout = Layout
export default AccountNotLogin;

View File

@@ -1,7 +1,6 @@
import classNames from 'classnames' import classNames from 'classnames'
import React, { memo, useEffect, useMemo, useRef, useState } from 'react' import React, { memo, useEffect, useRef, useState } from 'react'
import { useModalCommon } from 'src/components/hooks' import { useModalCommon } from 'src/components/hooks'
import { CartDrawer } from '..'
import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate' import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo' import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo'
import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight' import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
@@ -17,6 +16,7 @@ interface props {
const Header = memo(({ toggleFilter, visibleFilter }: props) => { const Header = memo(({ toggleFilter, visibleFilter }: props) => {
const headeFullRef = useRef<HTMLDivElement>(null) const headeFullRef = useRef<HTMLDivElement>(null)
const [isFullHeader, setIsFullHeader] = useState<boolean>(true) const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
const [isModeAuthenRegister, setIsModeAuthenRegister] = useState<boolean>(false)
const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false }) const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false }) const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false })
@@ -32,7 +32,17 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
return () => { return () => {
window.removeEventListener('scroll', handleScroll) window.removeEventListener('scroll', handleScroll)
} }
}, [headeFullRef.current]) }, [])
const openModalRegister = () => {
setIsModeAuthenRegister(true)
openModalAuthen()
}
const openModalLogin = () => {
setIsModeAuthenRegister(false)
openModalAuthen()
}
return ( return (
<> <>
@@ -43,7 +53,8 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
<HeaderMenu <HeaderMenu
isStickyHeader={true} isStickyHeader={true}
toggleFilter={toggleFilter} toggleFilter={toggleFilter}
openModalAuthen={openModalAuthen} openModalLogin={openModalLogin}
openModalRegister={openModalRegister}
openModalInfo={openModalInfo} /> openModalInfo={openModalInfo} />
</div> </div>
@@ -54,16 +65,17 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
isFull={isFullHeader} isFull={isFullHeader}
visibleFilter={visibleFilter} visibleFilter={visibleFilter}
toggleFilter={toggleFilter} toggleFilter={toggleFilter}
openModalAuthen={openModalAuthen} openModalLogin={openModalLogin}
openModalInfo={openModalInfo} /> openModalRegister = {openModalRegister}
openModalInfo={openModalInfo}
/>
<HeaderSubMenu /> <HeaderSubMenu />
</div> </div>
</header> </header>
<HeaderSubMenuMobile /> <HeaderSubMenuMobile />
<ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} /> <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} mode={isModeAuthenRegister? 'register': ''} />
<ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} /> <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
</> </>
) )
}) })

View File

@@ -22,12 +22,14 @@ import {
import Logo from '../../../Logo/Logo' import Logo from '../../../Logo/Logo'
import s from './HeaderMenu.module.scss' import s from './HeaderMenu.module.scss'
import { useLogout } from '../../../../hooks/auth' import { useLogout } from '../../../../hooks/auth'
import useActiveCustomer from 'src/components/hooks/useActiveCustomer'
interface Props { interface Props {
children?: any children?: any
isFull?: boolean isFull?: boolean
isStickyHeader?: boolean isStickyHeader?: boolean
visibleFilter?: boolean visibleFilter?: boolean
openModalAuthen: () => void openModalLogin: () => void
openModalRegister: () => void
openModalInfo: () => void openModalInfo: () => void
toggleFilter: () => void toggleFilter: () => void
} }
@@ -37,29 +39,37 @@ const HeaderMenu = memo(
isFull, isFull,
isStickyHeader, isStickyHeader,
visibleFilter, visibleFilter,
openModalAuthen, openModalLogin,
openModalRegister,
openModalInfo, openModalInfo,
toggleFilter, toggleFilter,
}: Props) => { }: Props) => {
const router = useRouter() const router = useRouter()
const { toggleCartDrawer } = useCartDrawer() const { toggleCartDrawer } = useCartDrawer()
const { customer } = useActiveCustomer()
const { logout } = useLogout() const { logout } = useLogout()
const optionMenu = useMemo( const optionMenuNotAuthen = useMemo(
() => [ () => [
{ {
onClick: openModalAuthen, onClick: openModalLogin,
name: 'Login (Demo)', name: 'Sign in',
}, },
{ {
onClick: openModalInfo, onClick: openModalRegister,
name: 'Create User Info (Demo)', name: 'Create account',
},
{
link: '/account-not-login',
name: 'Account Not Login (Demo)',
}, },
],
[openModalLogin, openModalRegister]
)
const optionMenu = useMemo(
() => [
// {
// onClick: openModalInfo,
// name: 'Create User Info (Demo)',
// },
{ {
link: '/demo', link: '/demo',
name: 'Notifications Empty (Demo)', name: 'Notifications Empty (Demo)',
@@ -78,7 +88,7 @@ const HeaderMenu = memo(
onClick: logout, onClick: logout,
}, },
], ],
[openModalAuthen, openModalInfo, logout] [logout]
) )
return ( return (
<section <section
@@ -140,7 +150,7 @@ const HeaderMenu = memo(
</Link> </Link>
</li> </li>
<li> <li>
<MenuDropdown options={optionMenu} isHasArrow={false}> <MenuDropdown options={customer ? optionMenu : optionMenuNotAuthen} isHasArrow={false}>
<IconUser /> <IconUser />
</MenuDropdown> </MenuDropdown>
</li> </li>