Adding UI Context

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -1,11 +1,11 @@
 import React, { FunctionComponent } from "react";
 // import s from "./CartSidebarView.module.css";
 import { Button } from "@components/ui";
-import { Trash } from "@components/icon";
+import { Trash, Cross } from "@components/icon";
+import { useUI } from "@components/ui/context";
 
-interface Props {}
-
-const CartSidebarView: FunctionComponent<Props> = () => {
+const CartSidebarView: FunctionComponent = () => {
+  const { dispatch } = useUI();
   return (
     <>
       <header className="px-4 py-6 sm:px-6 border-b border-gray-200">
@@ -17,22 +17,11 @@ const CartSidebarView: FunctionComponent<Props> = () => {
           </div>
           <div className="h-7 flex items-center">
             <button
+              onClick={() => dispatch("CLOSE_SIDEBAR")}
               aria-label="Close panel"
               className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
             >
-              <svg
-                className="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
+              <Cross className="h-6 w-6" />
             </button>
           </div>
         </div>

components/core/Layout/Layout.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 const Layout: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className);
-  // const { displaySidebar } = useUI();
+  const { displaySidebar } = useUI();
   return (
     <Container className={rootClassName}>
       <Featurebar
@@ -22,11 +22,11 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
       />
       <Navbar />
       <main className="h-screen">{children}</main>
-      {/* {displaySidebar && (
+      {displaySidebar && (
         <Sidebar>
           <CartSidebarView />
         </Sidebar>
-      )} */}
+      )}
     </Container>
   );
 };

components/core/Navbar/Navbar.tsx

@@ -4,6 +4,7 @@ import s from "./Navbar.module.css";
 import { Logo, Container } from "@components/ui";
 import { Avatar, Searchbar } from "@components/core";
 import { Heart, Bag } from "@components/icon";
+import { useUI } from "@components/ui/context";
 interface Props {
   className?: string;
   children?: any;
@@ -11,6 +12,10 @@ interface Props {
 
 const Navbar: FunctionComponent<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className);
+  const { dispatch } = useUI();
+
+  const handleCartClick = () => dispatch("OPEN_SIDEBAR");
+
   return (
     <Container className={rootClassName}>
       <Logo />
@@ -23,7 +28,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
         </nav>
       </div>
       <nav className="flex flex-row items-center">
-        <Bag className="mr-6" />
+        <Bag className="mr-6" onClick={handleCartClick} />
         <Heart className="mr-6" />
         <Avatar />
       </nav>

components/icon/Cross.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const Cross = ({ ...props }) => {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M6 18L18 6M6 6l12 12"
+      />
+    </svg>
+  );
+};
+
+export default Cross;

components/icon/index.ts

@@ -1,3 +1,4 @@
 export { default as Bag } from "./Bag";
 export { default as Heart } from "./Heart";
 export { default as Trash } from "./Trash";
+export { default as Cross } from "./Cross";

components/ui/context.tsx

@@ -1,15 +1,16 @@
 import React, { Context, FunctionComponent } from "react";
 
-export interface ContextType {
-  displaySidebar: boolean;
-}
-
 const initialState = {
   displaySidebar: false,
+  dispatch: null,
 };
+export interface UIState {
+  displaySidebar: boolean;
+  dispatch: (string) => void;
+}
 
 function uiReducer(state, action) {
-  switch (action.type) {
+  switch (action) {
     case "OPEN_SIDEBAR": {
       return {
         ...state,
@@ -19,13 +20,13 @@ function uiReducer(state, action) {
     case "CLOSE_SIDEBAR": {
       return {
         ...state,
-        displaySidebar: true,
+        displaySidebar: false,
       };
     }
   }
 }
 
-export const UIContext = React.createContext<ContextType>(initialState);
+export const UIContext = React.createContext<UIState>(initialState);
 UIContext.displayName = "UIContext";
 
 export const UIProvider: FunctionComponent = (props) => {