forked from crowetic/commerce
UI State added
This commit is contained in:
parent
7cf79cea91
commit
0e48451767
4
.env
4
.env
@ -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
|
@ -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"
|
||||||
>
|
>
|
||||||
|
@ -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>
|
||||||
|
@ -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) => {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user