Merge branch 'master' of https://github.com/okbel/e-comm-example

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

@@ -4,6 +4,8 @@ import s from "./Layout.module.css";
 import { Navbar, Featurebar } from "@components/core";
 import { Container, Sidebar } from "@components/ui";
 import { CartSidebarView } from "@components/cart";
+import { useUI } from "@components/ui/context";
+
 interface Props {
   className?: string;
   children?: any;
@@ -11,6 +13,7 @@ interface Props {
 
 const Layout: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className);
+  const { displaySidebar } = useUI();
   return (
     <Container className={rootClassName}>
       <Featurebar
@@ -19,9 +22,11 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
       />
       <Navbar />
       <main className="h-screen">{children}</main>
-      {/* <Sidebar>
-        <CartSidebarView />
-      </Sidebar> */}
+      {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

@@ -0,0 +1,47 @@
+import React, { Context, FunctionComponent } from "react";
+
+const initialState = {
+  displaySidebar: false,
+  dispatch: null,
+};
+export interface UIState {
+  displaySidebar: boolean;
+  dispatch: (string) => void;
+}
+
+function uiReducer(state, action) {
+  switch (action) {
+    case "OPEN_SIDEBAR": {
+      return {
+        ...state,
+        displaySidebar: true,
+      };
+    }
+    case "CLOSE_SIDEBAR": {
+      return {
+        ...state,
+        displaySidebar: false,
+      };
+    }
+  }
+}
+
+export const UIContext = React.createContext<UIState>(initialState);
+UIContext.displayName = "UIContext";
+
+export const UIProvider: FunctionComponent = (props) => {
+  const [state, dispatch] = React.useReducer(uiReducer, initialState);
+  const value = {
+    ...state,
+    dispatch,
+  };
+  return <UIContext.Provider value={value} {...props} />;
+};
+
+export const useUI = () => {
+  const context = React.useContext(UIContext);
+  if (context === undefined) {
+    throw new Error(`useUI must be used within a UIProvider`);
+  }
+  return context;
+};

pages/_app.tsx

@@ -1,9 +1,13 @@
 import "@assets/global.css";
+import React from "react";
+import { UIProvider } from "@components/ui/context";
 
 export default function MyApp({ Component, pageProps }) {
   return (
     <>
-      <Component {...pageProps} />
+      <UIProvider>
+        <Component {...pageProps} />
+      </UIProvider>
     </>
   );
 }