UI State added

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"
             >

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>

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) => {