From 48ab2f224297b7a3cdf0ac1bd3d40453c2e2a1f0 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Wed, 29 Sep 2021 17:11:58 +0700
Subject: [PATCH] :sparkles: feat: show menu in mode login/ nit login

:%s
---
 pages/account-not-login.tsx                   | 15 --------
 src/components/common/Header/Header.tsx       | 28 ++++++++++-----
 .../components/HeaderMenu/HeaderMenu.tsx      | 36 ++++++++++++-------
 3 files changed, 43 insertions(+), 36 deletions(-)
 delete mode 100644 pages/account-not-login.tsx

diff --git a/pages/account-not-login.tsx b/pages/account-not-login.tsx
deleted file mode 100644
index cbda16486..000000000
--- a/pages/account-not-login.tsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index a0b220c08..f3a514970 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -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} />
-            
         </>
     )
 })
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index c29890dbd..a4977b198 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -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>