From d47fa2d29f16ca73c37dcc65ce9ed3adda7a5d3d Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Sun, 25 Oct 2020 18:26:32 -0300 Subject: [PATCH] Support for multiple modal views --- components/auth/LoginView.tsx | 11 ++-- components/auth/SignUpView.tsx | 88 +++++++++++++++++++++++++++++++ components/auth/index.ts | 1 + components/core/Layout/Layout.tsx | 15 ++++-- components/ui/context.tsx | 22 ++++++++ 5 files changed, 127 insertions(+), 10 deletions(-) create mode 100644 components/auth/SignUpView.tsx diff --git a/components/auth/LoginView.tsx b/components/auth/LoginView.tsx index 9229799df..1587569eb 100644 --- a/components/auth/LoginView.tsx +++ b/components/auth/LoginView.tsx @@ -9,11 +9,7 @@ interface Props {} const LoginView: FC = () => { const [email, setEmail] = useState('') const [pass, setPass] = useState('') - // const { openModal, closeModal } = useUI() - - // useEffect(() => { - // open ? openModal() : closeModal() - // }, [open]) + const { setModalView } = useUI() const signup = useSignup() const login = useLogin() @@ -78,7 +74,10 @@ const LoginView: FC = () => { Don't have an account? {` `} - + setModalView('SIGNUP_VIEW')} + > Sign Up diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx new file mode 100644 index 000000000..bb88f4b01 --- /dev/null +++ b/components/auth/SignUpView.tsx @@ -0,0 +1,88 @@ +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 { useUI } from '@components/ui/context' + +interface Props {} + +const LoginView: FC = () => { + const [email, setEmail] = useState('') + const [pass, setPass] = useState('') + + const signup = useSignup() + const login = useLogin() + const { setModalView } = useUI() + // // Data about the currently logged in customer, it will update + // // automatically after a signup/login/logout + // 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 + // Passwords must be at least 7 characters and contain both alphabetic + // and numeric characters. + try { + await signup({ + // This account already exists, so it will throw the "duplicated_email" error + email: 'luis@vercel.com', + firstName: 'Luis', + lastName: 'Alvarez', + password: 'luis123', + }) + } catch (error) { + if (error.code === 'duplicated_email') { + // TODO: handle duplicated email + } + // Show a generic error saying that something bad happened, try again later + } + } + + const handleLogin = async () => { + // TODO: validate the password and email before calling the signup + // Passwords must be at least 7 characters and contain both alphabetic + // and numeric characters. + try { + await login({ + email: 'luis@vercel.com', + // This is an invalid password so it will throw the "invalid_credentials" error + password: 'luis1234', // will work with `luis123` + }) + } catch (error) { + if (error.code === 'invalid_credentials') { + // The email and password didn't match an existing account + } + // Show a generic error saying that something bad happened, try again later + } + } + + return ( +
+
+ +
+
+
+ +
+
+ +
+ + + Don't have an account? + {` `} + setModalView('LOGIN_VIEW')} + > + Log In + + +
+
+ ) +} + +export default LoginView diff --git a/components/auth/index.ts b/components/auth/index.ts index fa4dd296f..e0f739bc5 100644 --- a/components/auth/index.ts +++ b/components/auth/index.ts @@ -1 +1,2 @@ export { default as LoginView } from './LoginView' +export { default as SignUpView } from './SignUpView' diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index 3e3eac2a1..9619a0643 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -1,10 +1,10 @@ import cn from 'classnames' import s from './Layout.module.css' -import { FC, useEffect, useState } from 'react' +import React, { 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 { LoginView, SignUpView } from '@components/auth' import { useUI } from '@components/ui/context' import { usePreventScroll } from '@react-aria/overlays' import { CommerceProvider } from '@lib/bigcommerce' @@ -16,7 +16,13 @@ interface Props { } const Layout: FC = ({ children, pageProps }) => { - const { displaySidebar, displayModal, closeSidebar, closeModal } = useUI() + const { + displaySidebar, + displayModal, + closeSidebar, + closeModal, + modalView, + } = useUI() const [acceptedCookies, setAcceptedCookies] = useState(false) const [hasScrolled, setHasScrolled] = useState(false) @@ -58,7 +64,8 @@ const Layout: FC = ({ children, pageProps }) => { - + {modalView === 'LOGIN_VIEW' && } + {modalView === 'SIGNUP_VIEW' && } (initialState) @@ -76,6 +88,12 @@ function uiReducer(state: State, action: Action) { displayModal: false, } } + case 'SET_MODAL_VIEW': { + return { + ...state, + modalView: action.view, + } + } } } @@ -91,6 +109,9 @@ export const UIProvider: FC = (props) => { const openModal = () => dispatch({ type: 'OPEN_MODAL' }) const closeModal = () => dispatch({ type: 'CLOSE_MODAL' }) + const setModalView = (view: MODAL_VIEWS) => + dispatch({ type: 'SET_MODAL_VIEW', view }) + const value = { ...state, openSidebar, @@ -99,6 +120,7 @@ export const UIProvider: FC = (props) => { closeDropdown, openModal, closeModal, + setModalView, } return