Correct UI State

components/auth/LoginView.tsx

@@ -1,17 +1,22 @@
-import useSignup from '@lib/bigcommerce/use-signup'
+import { FC, useEffect } from 'react'
-import { Layout } from '@components/core'
 import { Logo, Modal, Button } from '@components/ui'
+import useSignup from '@lib/bigcommerce/use-signup'
 import useLogin from '@lib/bigcommerce/use-login'
 import useLogout from '@lib/bigcommerce/use-logout'
 import useCustomer from '@lib/bigcommerce/use-customer'
+import { useUI } from '@components/ui/context'
 
-export default function Login() {
+interface Props {
+  open: boolean
+}
+
+const LoginView: FC<Props> = ({ open }) => {
   const signup = useSignup()
   const login = useLogin()
   const logout = useLogout()
-  // Data about the currently logged in customer, it will update
+  // // Data about the currently logged in customer, it will update
-  // automatically after a signup/login/logout
+  // // automatically after a signup/login/logout
-  const { data } = useCustomer()
+  // const { data } = useCustomer()
   // TODO: use this method. It can take more than 5 seconds to do a signup
   const handleSignup = async () => {
     // TODO: validate the password and email before calling the signup
@@ -51,9 +56,13 @@ export default function Login() {
     }
   }
 
+  const { openModal, closeModal } = useUI()
+  useEffect(() => {
+    open ? openModal() : closeModal()
+  }, [open])
+
   return (
-    <div className="pb-20">
+    <Modal open={open}>
-      <Modal close={() => {}}>
       <div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
         <div className="flex justify-center pb-12 ">
           <Logo width="64px" height="64px" />
@@ -84,8 +93,7 @@ export default function Login() {
         </div>
       </div>
     </Modal>
-    </div>
   )
 }
 
-Login.Layout = Layout
+export default LoginView

components/auth/index.ts

@@ -0,0 +1 @@
+export { default as LoginView } from './LoginView'

components/core/UserNav/UserNav.tsx

@@ -5,10 +5,11 @@ import { FC } from 'react'
 import { Heart, Bag } from '@components/icon'
 import { Avatar } from '@components/core'
 import { useUI } from '@components/ui/context'
+import { LoginView } from '@components/auth'
 import DropdownMenu from './DropdownMenu'
 import { Menu } from '@headlessui/react'
 import useCart from '@lib/bigcommerce/cart/use-cart'
-
+import useCustomer from '@lib/bigcommerce/use-customer'
 interface Props {
   className?: string
 }
@@ -19,9 +20,10 @@ const countItems = (count: number, items: any[]) =>
 
 const UserNav: FC<Props> = ({ className, children, ...props }) => {
   const { data } = useCart()
+  const { data: customer } = useCustomer()
+
   const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
-
   return (
     <nav className={cn(s.root, className)}>
       <div className={s.mainContainer}>
@@ -45,7 +47,11 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
                   <Menu.Button className={s.avatarButton} aria-label="Menu">
                     <Avatar />
                   </Menu.Button>
+                  {customer ? (
                     <DropdownMenu open={open} />
+                  ) : (
+                    <LoginView open={open} />
+                  )}
                 </>
               )}
             </Menu>

components/ui/Modal/Modal.tsx

@@ -2,21 +2,21 @@ import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Modal.module.css'
 import { useDialog } from '@react-aria/dialog'
-import { useOverlay, useModal } from '@react-aria/overlays'
 import { FocusScope } from '@react-aria/focus'
-
+import { Transition } from '@headlessui/react'
+import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
 interface Props {
   className?: string
   children?: any
-  show?: boolean
+  open?: boolean
-  close: () => void
+  onClose?: () => void
 }
 
 const Modal: FC<Props> = ({
   className,
   children,
-  show = true,
+  open = false,
-  close,
+  onClose,
   ...props
 }) => {
   const rootClassName = cn(s.root, className)
@@ -26,8 +26,18 @@ const Modal: FC<Props> = ({
   let { dialogProps } = useDialog(props, ref)
 
   return (
-    <div className={rootClassName}>
+    <Transition show={open}>
+      <OverlayContainer>
+        <div className={rootClassName} onClick={onClose}>
           <FocusScope contain restoreFocus autoFocus>
+            <Transition.Child
+              enter="transition-opacity ease-linear duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="transition-opacity ease-linear duration-300"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
               <div
                 {...overlayProps}
                 {...dialogProps}
@@ -37,8 +47,11 @@ const Modal: FC<Props> = ({
               >
                 {children}
               </div>
+            </Transition.Child>
           </FocusScope>
         </div>
+      </OverlayContainer>
+    </Transition>
   )
 }
 

components/ui/context.tsx

@@ -5,11 +5,13 @@ import { SSRProvider, OverlayProvider } from 'react-aria'
 export interface State {
   displaySidebar: boolean
   displayDropdown: boolean
+  displayModal: boolean
 }
 
 const initialState = {
   displaySidebar: false,
   displayDropdown: false,
+  displayModal: false,
 }
 
 type Action =
@@ -25,6 +27,12 @@ type Action =
   | {
       type: 'CLOSE_DROPDOWN'
     }
+  | {
+      type: 'OPEN_MODAL'
+    }
+  | {
+      type: 'CLOSE_MODAL'
+    }
 
 export const UIContext = React.createContext<State | any>(initialState)
 
@@ -56,6 +64,18 @@ function uiReducer(state: State, action: Action) {
         displayDropdown: false,
       }
     }
+    case 'OPEN_MODAL': {
+      return {
+        ...state,
+        displayModal: true,
+      }
+    }
+    case 'CLOSE_MODAL': {
+      return {
+        ...state,
+        displayModal: false,
+      }
+    }
   }
 }
 
@@ -68,14 +88,21 @@ export const UIProvider: FC = (props) => {
   const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
   const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
 
+  const openModal = () => dispatch({ type: 'OPEN_MODAL' })
+  const closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
+
   const value = {
     ...state,
     openSidebar,
     closeSidebar,
     openDropdown,
     closeDropdown,
+    openModal,
+    closeModal,
   }
 
+  console.log('state', state)
+
   return <UIContext.Provider value={value} {...props} />
 }