Modal Stable / Login View

This commit is contained in:
Belen Curcio 2020-10-25 18:13:25 -03:00
parent 42eb79d81f
commit eb94d2dbf9
10 changed files with 124 additions and 84 deletions

View File

@ -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>
)
}

View File

@ -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."

View File

@ -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>

View File

@ -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>

View File

@ -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;
}

View File

@ -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

View File

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

View File

@ -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>
)

View File

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

View File

@ -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'