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

.env

@@ -0,0 +1,2 @@
+BIGCOMMERCE_STOREFRONT_API_URL=https://store-qfzerv205w.mybigcommerce.com/graphql
+BIGCOMMERCE_STOREFRONT_API_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJlYXQiOjIxMzM0NDM2NjEsInN1Yl90eXBlIjoyLCJ0b2tlbl90eXBlIjoxLCJjb3JzIjpbImh0dHBzOi8vd3d3LnRlc3QuY29tIl0sImNpZCI6MSwiaWF0IjoxNjAwODQyOTk0LCJzdWIiOiJja3I2ZXZ6bjkyNzhjMHB3NWlhdmIzY3A0bDFvaXAxIiwic2lkIjoxMDAxNDEyMjAyLCJpc3MiOiJCQyJ9.RvBvNZ8SPC5MFckploPW1VvD-XGy6pGHENLIxCinguX9P2eNrhrDp9t821Ng2rw7O0eLMKB7YuDF4E15MK13tA

.env.example

@@ -1,7 +0,0 @@
-BIGCOMMERCE_STOREFRONT_API_URL=https://your-site.mybigcommerce.com/graphql
-BIGCOMMERCE_STOREFRONT_API_TOKEN=
-BIGCOMMERCE_STORE_API_URL=https://api.bigcommerce.com/stores/xxxxxxxxxxx
-BIGCOMMERCE_STORE_API_CLIENT_ID=
-BIGCOMMERCE_STORE_API_SECRET=
-BIGCOMMERCE_STORE_API_TOKEN=
-BIGCOMMERCE_TOKEN_SECRET="this-is-a-secret-value-with-at-least-32-characters"

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -1,33 +1,34 @@
 import React, { FunctionComponent } from "react";
-// import s from "./CartSidebarView.module.css";
+import { UserNav } from "@components/core";
 import { Button } from "@components/ui";
 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">
         <div className="flex items-start justify-between space-x-3">
-          <div className="space-y-1">
-            <h2 className="text-lg leading-7 font-medium text-gray-900 uppercase">
-              My Cart
-            </h2>
-          </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"
             >
               <Cross className="h-6 w-6" />
             </button>
           </div>
+          <div className="space-y-1">
+            <UserNav />
+          </div>
         </div>
+        <h2 className="pt-6 text-lg leading-7 font-medium text-gray-900 uppercase">
+          My Cart
+        </h2>
       </header>
 
-      <div className="px-4 sm:px-6 py-4">
+      <div className="px-4 sm:px-6 py-4 flex-1">
         <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
           <li className="flex flex-row space-x-6">
             <div className="h-12 w-12 bg-violet"></div>

components/core/Layout/Layout.tsx

@@ -15,19 +15,21 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className);
   const { displaySidebar } = useUI();
   return (
-    <Container className={rootClassName}>
+    <div className={rootClassName}>
       <Featurebar
         title="Free Standard Shipping on orders over $99.99"
         description="Due to COVID-19, some orders may experience processing and delivery delays."
       />
-      <Navbar />
-      <main className="h-screen">{children}</main>
+      <Container>
+        <Navbar />
+        <main className="h-screen">{children}</main>
+      </Container>
       {displaySidebar && (
         <Sidebar>
           <CartSidebarView />
         </Sidebar>
       )}
-    </Container>
+    </div>
   );
 };
 

components/core/Navbar/Navbar.tsx

@@ -2,20 +2,14 @@ import cn from "classnames";
 import React, { FunctionComponent } from "react";
 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";
+import { Searchbar } from "@components/core";
+import { UserNav } from "@components/core";
 interface Props {
   className?: string;
-  children?: any;
 }
 
 const Navbar: FunctionComponent<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className);
-  const { dispatch } = useUI();
-
-  const handleCartClick = () => dispatch("OPEN_SIDEBAR");
-
   return (
     <Container className={rootClassName}>
       <Logo />
@@ -27,11 +21,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
           <a>Accesories</a>
         </nav>
       </div>
-      <nav className="flex flex-row items-center">
-        <Bag className="mr-6" onClick={handleCartClick} />
-        <Heart className="mr-6" />
-        <Avatar />
-      </nav>
+      <UserNav />
     </Container>
   );
 };

components/core/UserNav/UserNav.module.css

@@ -0,0 +1,10 @@
+.root {
+}
+
+.list {
+  @apply flex flex-row items-center;
+}
+
+.item {
+  @apply mr-6 cursor-pointer;
+}

components/core/UserNav/UserNav.tsx

@@ -0,0 +1,33 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import s from "./UserNav.module.css";
+import { Avatar } from "@components/core";
+import { Heart, Bag } from "@components/icon";
+import { useUI } from "@components/ui/context";
+
+interface Props {
+  className?: string;
+}
+
+const UserNav: FunctionComponent<Props> = ({ className }) => {
+  const rootClassName = cn(s.root, className);
+  const { openSidebar } = useUI();
+
+  return (
+    <nav className={rootClassName}>
+      <ul className={s.list}>
+        <li className={s.item}>
+          <Bag onClick={openSidebar} />
+        </li>
+        <li className={s.item}>
+          <Heart />
+        </li>
+        <li className={s.item}>
+          <Avatar />
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default UserNav;

components/core/UserNav/index.ts

@@ -0,0 +1 @@
+export { default } from "./UserNav";

components/core/index.ts

@@ -4,3 +4,4 @@ export { default as Footer } from "./Footer";
 export { default as Layout } from "./Layout";
 export { default as Navbar } from "./Navbar";
 export { default as Searchbar } from "./Searchbar";
+export { default as UserNav } from "./UserNav";

components/ui/Sidebar/Sidebar.tsx

@@ -11,12 +11,12 @@ const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className);
   return (
     <div className={rootClassName}>
-      <div className="fixed inset-0 overflow-hidden">
+      <div className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25">
         <div className="absolute inset-0 overflow-hidden">
           <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 ">
             <div className="w-screen max-w-2xl">
               <div className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
-                <div className="flex-1">{children}</div>
+                {children}
               </div>
             </div>
           </section>

components/ui/context.tsx

@@ -1,13 +1,42 @@
-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 const UIContext = React.createContext(initialState);
+UIContext.displayName = "UIContext";
+
+export const UIProvider: FunctionComponent = (props) => {
+  const [state, dispatch] = React.useReducer(uiReducer, initialState);
+
+  const openSidebar = () => dispatch("OPEN_SIDEBAR");
+  const closeSidebar = () => dispatch("CLOSE_SIDEBAR");
+
+  const value = {
+    ...state,
+    openSidebar,
+    closeSidebar,
+  };
+
+  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;
 };
-export interface UIState {
-  displaySidebar: boolean;
-  dispatch: (string) => void;
-}
 
 function uiReducer(state, action) {
   switch (action) {
@@ -25,23 +54,3 @@ function uiReducer(state, action) {
     }
   }
 }
-
-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;
-};

lib/commerce-api.ts

@@ -0,0 +1,9 @@
+import BigcommerceAPI from "./bigcommerce/api";
+
+const API_URL = process.env.NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_URL!;
+const API_TOKEN = process.env.NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_TOKEN!;
+
+export const commerce = new BigcommerceAPI({
+  commerceUrl: API_URL,
+  apiToken: API_TOKEN,
+});