cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

UI State added

Browse Source
This commit is contained in:
Belen Curcio 2020-10-01 09:39:31 -03:00
parent 7cf79cea91
commit 0e48451767
4 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env
View File

@ -1,2 +1,2 @@
NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_URL=https://store-qfzerv205w.mybigcommerce.com/graphql BIGCOMMERCE_STOREFRONT_API_URL=https://store-qfzerv205w.mybigcommerce.com/graphql
NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJlYXQiOjIxMzM0NDM2NjEsInN1Yl90eXBlIjoyLCJ0b2tlbl90eXBlIjoxLCJjb3JzIjpbImh0dHBzOi8vd3d3LnRlc3QuY29tIl0sImNpZCI6MSwiaWF0IjoxNjAwODQyOTk0LCJzdWIiOiJja3I2ZXZ6bjkyNzhjMHB3NWlhdmIzY3A0bDFvaXAxIiwic2lkIjoxMDAxNDEyMjAyLCJpc3MiOiJCQyJ9.RvBvNZ8SPC5MFckploPW1VvD-XGy6pGHENLIxCinguX9P2eNrhrDp9t821Ng2rw7O0eLMKB7YuDF4E15MK13tA BIGCOMMERCE_STOREFRONT_API_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJlYXQiOjIxMzM0NDM2NjEsInN1Yl90eXBlIjoyLCJ0b2tlbl90eXBlIjoxLCJjb3JzIjpbImh0dHBzOi8vd3d3LnRlc3QuY29tIl0sImNpZCI6MSwiaWF0IjoxNjAwODQyOTk0LCJzdWIiOiJja3I2ZXZ6bjkyNzhjMHB3NWlhdmIzY3A0bDFvaXAxIiwic2lkIjoxMDAxNDEyMjAyLCJpc3MiOiJCQyJ9.RvBvNZ8SPC5MFckploPW1VvD-XGy6pGHENLIxCinguX9P2eNrhrDp9t821Ng2rw7O0eLMKB7YuDF4E15MK13tA

4
components/cart/CartSidebarView/CartSidebarView.tsx
View File

@ -5,7 +5,7 @@ import { Trash, Cross } from "@components/icon";
import { useUI } from "@components/ui/context"; import { useUI } from "@components/ui/context";
const CartSidebarView: FunctionComponent = () => { const CartSidebarView: FunctionComponent = () => {
const { dispatch } = useUI(); const { closeSidebar } = useUI();
return ( return (
<> <>
<header className="px-4 py-6 sm:px-6 border-b border-gray-200"> <header className="px-4 py-6 sm:px-6 border-b border-gray-200">
@ -17,7 +17,7 @@ const CartSidebarView: FunctionComponent = () => {
</div> </div>
<div className="h-7 flex items-center"> <div className="h-7 flex items-center">
<button <button
onClick={() => dispatch("CLOSE_SIDEBAR")} onClick={closeSidebar}
aria-label="Close panel" aria-label="Close panel"
className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150" className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
> >

6
components/core/Navbar/Navbar.tsx
View File

@ -12,9 +12,7 @@ interface Props {
const Navbar: FunctionComponent<Props> = ({ className }) => { const Navbar: FunctionComponent<Props> = ({ className }) => {
const rootClassName = cn(s.root, className); const rootClassName = cn(s.root, className);
const { dispatch } = useUI(); const { openSidebar } = useUI();
const handleCartClick = () => dispatch("OPEN_SIDEBAR");
return ( return (
<Container className={rootClassName}> <Container className={rootClassName}>
@ -28,7 +26,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
</nav> </nav>
</div> </div>
<nav className="flex flex-row items-center"> <nav className="flex flex-row items-center">
<Bag className="mr-6" onClick={handleCartClick} /> <Bag className="mr-6" onClick={openSidebar} />
<Heart className="mr-6" /> <Heart className="mr-6" />
<Avatar /> <Avatar />
</nav> </nav>

17
components/ui/context.tsx
View File

@ -1,15 +1,18 @@
import React, { Context, FunctionComponent } from "react"; import React, { FunctionComponent } from "react";
export interface UIState {
displaySidebar: boolean;
openSidebar: () => {};
closeSidebar: () => {};
}
const initialState = { const initialState = {
displaySidebar: false, displaySidebar: false,
dispatch: null, openSidebar: null,
closeSidebar: null,
}; };
export interface UIState {
displaySidebar: boolean;
dispatch: (string) => void;
}
export const UIContext = React.createContext<UIState>(initialState); export const UIContext = React.createContext(initialState);
UIContext.displayName = "UIContext"; UIContext.displayName = "UIContext";
export const UIProvider: FunctionComponent = (props) => { export const UIProvider: FunctionComponent = (props) => {