Modal Stable / Login View

components/auth/LoginView.tsx

@@ -1,19 +1,23 @@
-import { FC, useEffect } from 'react'
-import { Logo, Modal, Button } from '@components/ui'
+import { FC, useEffect, useState } from 'react'
+import { Logo, Modal, Button, Input } 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'
 
-interface Props {
-  open: boolean
-}
+interface Props {}
+
+const LoginView: FC<Props> = () => {
+  const [email, setEmail] = useState('')
+  const [pass, setPass] = useState('')
+  // const { openModal, closeModal } = useUI()
+
+  // useEffect(() => {
+  //   open ? openModal() : closeModal()
+  // }, [open])
 
-const LoginView: FC<Props> = ({ open }) => {
   const signup = useSignup()
   const login = useLogin()
-  const logout = useLogout()
+
   // // Data about the currently logged in customer, it will update
   // // automatically after a signup/login/logout
   // const { data } = useCustomer()
@@ -56,43 +60,30 @@ const LoginView: FC<Props> = ({ open }) => {
     }
   }
 
-  const { openModal, closeModal } = useUI()
-  useEffect(() => {
-    open ? openModal() : closeModal()
-  }, [open])
-
   return (
-    <Modal open={open}>
-      <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" />
-        </div>
-        <div className="flex flex-col space-y-3">
-          <div className="border border-accents-3 text-accents-6">
-            <input
-              placeholder="Email"
-              className="focus:outline-none bg-primary focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
-            />
-          </div>
-          <div className="border border-accents-3 text-accents-6">
-            <input
-              placeholder="Password"
-              className="bg-primary focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
-            />
-          </div>
-          <Button variant="slim" onClick={handleSignup}>
-            Log In
-          </Button>
-          <span className="pt-3 text-center text-sm">
-            <span className="text-accents-7">Don't have an account?</span>
-            {` `}
-            <a className="text-accent-9 font-bold hover:underline cursor-pointer">
-              Sign Up
-            </a>
-          </span>
-        </div>
+    <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" />
       </div>
-    </Modal>
+      <div className="flex flex-col space-y-3">
+        <div className="border border-accents-3 text-accents-6">
+          <Input placeholder="Email" onChange={setEmail} />
+        </div>
+        <div className="border border-accents-3 text-accents-6">
+          <Input placeholder="Password" onChange={setEmail} />
+        </div>
+        <Button variant="slim" onClick={handleSignup}>
+          Log In
+        </Button>
+        <span className="pt-3 text-center text-sm">
+          <span className="text-accents-7">Don't have an account?</span>
+          {` `}
+          <a className="text-accent-9 font-bold hover:underline cursor-pointer">
+            Sign Up
+          </a>
+        </span>
+      </div>
+    </div>
   )
 }
 

components/core/Layout/Layout.tsx

@@ -1,14 +1,14 @@
-import { FC, useEffect, useState } from 'react'
 import cn from 'classnames'
-import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
-import { CommerceProvider } from '@lib/bigcommerce'
-import { Navbar, Featurebar, Footer } from '@components/core'
-import { Container, Sidebar } from '@components/ui'
-import Button from '@components/ui/Button'
-import { CartSidebarView } from '@components/cart'
-import { useUI } from '@components/ui/context'
 import s from './Layout.module.css'
+import { FC, useEffect, useState } from 'react'
+import { CartSidebarView } from '@components/cart'
+import { Container, Sidebar, Button, Modal } from '@components/ui'
+import { Navbar, Featurebar, Footer } from '@components/core'
+import { LoginView } from '@components/auth'
+import { useUI } from '@components/ui/context'
 import { usePreventScroll } from '@react-aria/overlays'
+import { CommerceProvider } from '@lib/bigcommerce'
+import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 interface Props {
   pageProps: {
     pages?: Page[]
@@ -16,7 +16,7 @@ interface Props {
 }
 
 const Layout: FC<Props> = ({ children, pageProps }) => {
-  const { displaySidebar, displayDropdown, closeSidebar } = useUI()
+  const { displaySidebar, displayModal, closeSidebar, closeModal } = useUI()
   const [acceptedCookies, setAcceptedCookies] = useState(false)
   const [hasScrolled, setHasScrolled] = useState(false)
 
@@ -36,7 +36,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
   }, [])
 
   usePreventScroll({
-    isDisabled: !displaySidebar,
+    isDisabled: !(displaySidebar || displayModal),
   })
 
   return (
@@ -54,11 +54,12 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         </header>
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
-
         <Sidebar open={displaySidebar} onClose={closeSidebar}>
           <CartSidebarView />
         </Sidebar>
-
+        <Modal open={displayModal} onClose={closeModal}>
+          <LoginView />
+        </Modal>
         <Featurebar
           title="This site uses cookies to improve your experience."
           description="By clicking, you agree to our Privacy Policy."

components/core/UserNav/DropdownMenu.tsx

@@ -5,7 +5,7 @@ import cn from 'classnames'
 import s from './DropdownMenu.module.css'
 import { Moon, Sun } from '@components/icon'
 import { Menu, Transition } from '@headlessui/react'
-
+import useLogout from '@lib/bigcommerce/use-logout'
 interface DropdownMenuProps {
   open: boolean
 }
@@ -27,7 +27,7 @@ const LINKS = [
 
 const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
   const { theme, setTheme } = useTheme()
-
+  const logout = useLogout()
   return (
     <Transition
       show={open}
@@ -68,7 +68,12 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
           </a>
         </Menu.Item>
         <Menu.Item>
-          <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>Logout</a>
+          <a
+            className={cn(s.link, 'border-t border-accents-2 mt-4')}
+            onClick={() => logout()}
+          >
+            Logout
+          </a>
         </Menu.Item>
       </Menu.Items>
     </Transition>

components/core/UserNav/UserNav.tsx

@@ -22,7 +22,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
   const { data } = useCart()
   const { data: customer } = useCustomer()
 
-  const { openSidebar, closeSidebar, displaySidebar } = useUI()
+  const { openSidebar, closeSidebar, displaySidebar, openModal } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
   return (
     <nav className={cn(s.root, className)}>
@@ -30,7 +30,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
         <ul className={s.list}>
           <li
             className={s.item}
-            onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
+            onClick={(e) => (displaySidebar ? closeSidebar() : openSidebar())}
           >
             <Bag />
             {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
@@ -41,20 +41,26 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
             </li>
           </Link>
           <li className={s.item}>
-            <Menu>
-              {({ open }) => (
-                <>
-                  <Menu.Button className={s.avatarButton} aria-label="Menu">
-                    <Avatar />
-                  </Menu.Button>
-                  {customer ? (
+            {customer ? (
+              <Menu>
+                {({ open }) => (
+                  <>
+                    <Menu.Button className={s.avatarButton} aria-label="Menu">
+                      <Avatar />
+                    </Menu.Button>
                     <DropdownMenu open={open} />
-                  ) : (
-                    <LoginView open={open} />
-                  )}
-                </>
-              )}
-            </Menu>
+                  </>
+                )}
+              </Menu>
+            ) : (
+              <button
+                className={s.avatarButton}
+                aria-label="Menu"
+                onClick={() => openModal()}
+              >
+                <Avatar />
+              </button>
+            )}
           </li>
         </ul>
       </div>

components/ui/Input/Input.module.css

@@ -0,0 +1,4 @@
+.root {
+  @apply focus:outline-none bg-primary focus:shadow-outline-gray border-none py-2 
+  px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10;
+}

components/ui/Input/Input.tsx

@@ -0,0 +1,25 @@
+import cn from 'classnames'
+import s from './Input.module.css'
+import React, { InputHTMLAttributes } from 'react'
+
+export interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  className?: string
+  onChange?: (...args: any[]) => any
+}
+
+const Input: React.FC<Props> = (props) => {
+  const { className, children, onChange, ...rest } = props
+
+  const rootClassName = cn(s.root, {}, className)
+
+  const handleOnChange = (e: any) => {
+    if (onChange) {
+      onChange(e.target.value)
+    }
+    return null
+  }
+
+  return <input className={rootClassName} onChange={handleOnChange} {...rest} />
+}
+
+export default Input

components/ui/Input/index.ts

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

components/ui/Modal/Modal.tsx

@@ -8,7 +8,7 @@ import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
 interface Props {
   className?: string
   children?: any
-  open?: boolean
+  open: boolean
   onClose?: () => void
 }
 
@@ -22,14 +22,22 @@ const Modal: FC<Props> = ({
   const rootClassName = cn(s.root, className)
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
   let { modalProps } = useModal()
-  let { overlayProps } = useOverlay(props, ref)
-  let { dialogProps } = useDialog(props, ref)
+  let { dialogProps } = useDialog({}, ref)
+  let { overlayProps } = useOverlay(
+    {
+      isOpen: open,
+      isDismissable: true,
+      onClose: onClose,
+      ...props,
+    },
+    ref
+  )
 
   return (
     <Transition show={open}>
       <OverlayContainer>
-        <div className={rootClassName} onClick={onClose}>
-          <FocusScope contain restoreFocus autoFocus>
+        <FocusScope contain restoreFocus autoFocus>
+          <div className={rootClassName}>
             <Transition.Child
               enter="transition-opacity ease-linear duration-300"
               enterFrom="opacity-0"
@@ -39,17 +47,17 @@ const Modal: FC<Props> = ({
               leaveTo="opacity-0"
             >
               <div
+                className={s.modal}
                 {...overlayProps}
                 {...dialogProps}
                 {...modalProps}
                 ref={ref}
-                className={s.modal}
               >
                 {children}
               </div>
             </Transition.Child>
-          </FocusScope>
-        </div>
+          </div>
+        </FocusScope>
       </OverlayContainer>
     </Transition>
   )

components/ui/context.tsx

@@ -101,8 +101,6 @@ export const UIProvider: FC = (props) => {
     closeModal,
   }
 
-  console.log('state', state)
-
   return <UIContext.Provider value={value} {...props} />
 }
 

components/ui/index.ts

@@ -9,3 +9,4 @@ export { default as LoadingDots } from './LoadingDots'
 export { default as Skeleton } from './Skeleton'
 export { default as Modal } from './Modal'
 export { default as Text } from './Text'
+export { default as Input } from './Input'