crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 15:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make sure to only refresh navbar and modals when required

Browse Source
This commit is contained in:
Luis Alvarez 2021-06-08 11:19:49 -05:00
parent f2c4ff32b5
commit 6442c8017e
2 changed files with 92 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
components/common/Layout/Layout.tsx
View File

@ -49,21 +49,53 @@ interface Props {
}
}
const ModalView: FC<{ modalView: string; closeModal(): any }> = ({
modalView,
closeModal,
}) => {
return (
<Modal onClose={closeModal}>
{modalView === 'LOGIN_VIEW' && <LoginView />}
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
{modalView === 'FORGOT_VIEW' && <ForgotPassword />}
</Modal>
)
}
const ModalUI: FC = () => {
const { displayModal, closeModal, modalView } = useUI()
return displayModal ? (
<ModalView modalView={modalView} closeModal={closeModal} />
) : null
}
const SidebarView: FC<{ sidebarView: string; closeSidebar(): any }> = ({
sidebarView,
closeSidebar,
}) => {
return (
<Sidebar onClose={closeSidebar}>
{sidebarView === 'CART_VIEW' && <CartSidebarView />}
{sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
{sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
{sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
</Sidebar>
)
}
const SidebarUI: FC = () => {
const { displaySidebar, closeSidebar, sidebarView } = useUI()
return displaySidebar ? (
<SidebarView sidebarView={sidebarView} closeSidebar={closeSidebar} />
) : null
}
const Layout: FC<Props> = ({
children,
pageProps: { categories = [], ...pageProps },
}) => {
const {
displaySidebar,
displayModal,
closeSidebar,
closeModal,
modalView,
sidebarView,
} = useUI()
const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
const { locale = 'en-US' } = useRouter()
const navBarlinks = categories.slice(0, 2).map((c) => ({
label: c.name,
href: `/search/${c.slug}`,
@ -75,24 +107,8 @@ const Layout: FC<Props> = ({
<Navbar links={navBarlinks} />
<main className="fit">{children}</main>
<Footer pages={pageProps.pages} />
{displayModal && (
<Modal onClose={closeModal}>
{modalView === 'LOGIN_VIEW' && <LoginView />}
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
{modalView === 'FORGOT_VIEW' && <ForgotPassword />}
</Modal>
)}
{displaySidebar && (
<Sidebar onClose={closeSidebar}>
{sidebarView === 'CART_VIEW' && <CartSidebarView />}
{sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
{sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
{sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
</Sidebar>
)}
<ModalUI />
<SidebarUI />
<FeatureBar
title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
hide={acceptedCookies}

70
components/ui/context.tsx
View File

@ -1,4 +1,4 @@
import React, { FC, useMemo } from 'react'
import React, { FC, useCallback, useMemo } from 'react'
import { ThemeProvider } from 'next-themes'
export interface State {
@ -161,32 +161,60 @@ function uiReducer(state: State, action: Action) {
export const UIProvider: FC = (props) => {
const [state, dispatch] = React.useReducer(uiReducer, initialState)
const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' })
const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' })
const toggleSidebar = () =>
state.displaySidebar
? dispatch({ type: 'CLOSE_SIDEBAR' })
: dispatch({ type: 'OPEN_SIDEBAR' })
const closeSidebarIfPresent = () =>
state.displaySidebar && dispatch({ type: 'CLOSE_SIDEBAR' })
const openSidebar = useCallback(() => dispatch({ type: 'OPEN_SIDEBAR' }), [
dispatch,
])
const closeSidebar = useCallback(() => dispatch({ type: 'CLOSE_SIDEBAR' }), [
dispatch,
])
const toggleSidebar = useCallback(
() =>
state.displaySidebar
? dispatch({ type: 'CLOSE_SIDEBAR' })
: dispatch({ type: 'OPEN_SIDEBAR' }),
[dispatch, state.displaySidebar]
)
const closeSidebarIfPresent = useCallback(
() => state.displaySidebar && dispatch({ type: 'CLOSE_SIDEBAR' }),
[dispatch, state.displaySidebar]
)
const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
const openDropdown = useCallback(() => dispatch({ type: 'OPEN_DROPDOWN' }), [
dispatch,
])
const closeDropdown = useCallback(
() => dispatch({ type: 'CLOSE_DROPDOWN' }),
[dispatch]
)
const openModal = () => dispatch({ type: 'OPEN_MODAL' })
const closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
const openModal = useCallback(() => dispatch({ type: 'OPEN_MODAL' }), [
dispatch,
])
const closeModal = useCallback(() => dispatch({ type: 'CLOSE_MODAL' }), [
dispatch,
])
const openToast = () => dispatch({ type: 'OPEN_TOAST' })
const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
const openToast = useCallback(() => dispatch({ type: 'OPEN_TOAST' }), [
dispatch,
])
const closeToast = useCallback(() => dispatch({ type: 'CLOSE_TOAST' }), [
dispatch,
])
const setUserAvatar = (value: string) =>
dispatch({ type: 'SET_USER_AVATAR', value })
const setUserAvatar = useCallback(
(value: string) => dispatch({ type: 'SET_USER_AVATAR', value }),
[dispatch]
)
const setModalView = (view: MODAL_VIEWS) =>
dispatch({ type: 'SET_MODAL_VIEW', view })
const setModalView = useCallback(
(view: MODAL_VIEWS) => dispatch({ type: 'SET_MODAL_VIEW', view }),
[dispatch]
)
const setSidebarView = (view: SIDEBAR_VIEWS) =>
dispatch({ type: 'SET_SIDEBAR_VIEW', view })
const setSidebarView = useCallback(
(view: SIDEBAR_VIEWS) => dispatch({ type: 'SET_SIDEBAR_VIEW', view }),
[dispatch]
)
const value = useMemo(
() => ({