From 0e4845176731fba06b20297b179b5789ddf6f5d2 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 1 Oct 2020 09:39:31 -0300
Subject: [PATCH] UI State added

---
 .env                                            |  4 ++--
 .../cart/CartSidebarView/CartSidebarView.tsx    |  4 ++--
 components/core/Navbar/Navbar.tsx               |  6 ++----
 components/ui/context.tsx                       | 17 ++++++++++-------
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/.env b/.env
index 0f8d44c86..a094f95df 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
-NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_URL=https://store-qfzerv205w.mybigcommerce.com/graphql
-NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJlYXQiOjIxMzM0NDM2NjEsInN1Yl90eXBlIjoyLCJ0b2tlbl90eXBlIjoxLCJjb3JzIjpbImh0dHBzOi8vd3d3LnRlc3QuY29tIl0sImNpZCI6MSwiaWF0IjoxNjAwODQyOTk0LCJzdWIiOiJja3I2ZXZ6bjkyNzhjMHB3NWlhdmIzY3A0bDFvaXAxIiwic2lkIjoxMDAxNDEyMjAyLCJpc3MiOiJCQyJ9.RvBvNZ8SPC5MFckploPW1VvD-XGy6pGHENLIxCinguX9P2eNrhrDp9t821Ng2rw7O0eLMKB7YuDF4E15MK13tA
\ No newline at end of file
+BIGCOMMERCE_STOREFRONT_API_URL=https://store-qfzerv205w.mybigcommerce.com/graphql
+BIGCOMMERCE_STOREFRONT_API_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJlYXQiOjIxMzM0NDM2NjEsInN1Yl90eXBlIjoyLCJ0b2tlbl90eXBlIjoxLCJjb3JzIjpbImh0dHBzOi8vd3d3LnRlc3QuY29tIl0sImNpZCI6MSwiaWF0IjoxNjAwODQyOTk0LCJzdWIiOiJja3I2ZXZ6bjkyNzhjMHB3NWlhdmIzY3A0bDFvaXAxIiwic2lkIjoxMDAxNDEyMjAyLCJpc3MiOiJCQyJ9.RvBvNZ8SPC5MFckploPW1VvD-XGy6pGHENLIxCinguX9P2eNrhrDp9t821Ng2rw7O0eLMKB7YuDF4E15MK13tA
\ No newline at end of file
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index f392a0890..6a3a8ca10 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -5,7 +5,7 @@ import { Trash, Cross } from "@components/icon";
 import { useUI } from "@components/ui/context";
 
 const CartSidebarView: FunctionComponent = () => {
-  const { dispatch } = useUI();
+  const { closeSidebar } = useUI();
   return (
     <>
       <header className="px-4 py-6 sm:px-6 border-b border-gray-200">
@@ -17,7 +17,7 @@ const CartSidebarView: FunctionComponent = () => {
           </div>
           <div className="h-7 flex items-center">
             <button
-              onClick={() => dispatch("CLOSE_SIDEBAR")}
+              onClick={closeSidebar}
               aria-label="Close panel"
               className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
             >
diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx
index 5ac0c93bd..bee174068 100644
--- a/components/core/Navbar/Navbar.tsx
+++ b/components/core/Navbar/Navbar.tsx
@@ -12,9 +12,7 @@ interface Props {
 
 const Navbar: FunctionComponent<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className);
-  const { dispatch } = useUI();
-
-  const handleCartClick = () => dispatch("OPEN_SIDEBAR");
+  const { openSidebar } = useUI();
 
   return (
     <Container className={rootClassName}>
@@ -28,7 +26,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
         </nav>
       </div>
       <nav className="flex flex-row items-center">
-        <Bag className="mr-6" onClick={handleCartClick} />
+        <Bag className="mr-6" onClick={openSidebar} />
         <Heart className="mr-6" />
         <Avatar />
       </nav>
diff --git a/components/ui/context.tsx b/components/ui/context.tsx
index 4074deb7a..44dc1b587 100644
--- a/components/ui/context.tsx
+++ b/components/ui/context.tsx
@@ -1,15 +1,18 @@
-import React, { Context, FunctionComponent } from "react";
+import React, { FunctionComponent } from "react";
+
+export interface UIState {
+  displaySidebar: boolean;
+  openSidebar: () => {};
+  closeSidebar: () => {};
+}
 
 const initialState = {
   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";
 
 export const UIProvider: FunctionComponent = (props) => {