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

View File

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