From ba4b3b765c8a0c90f9097b88d027ad12844fdf6a Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 1 Oct 2020 12:23:01 -0300
Subject: [PATCH 1/2] Usernav to be reused

---
 components/core/Layout/Layout.tsx           |  4 +--
 components/core/UserNav/UserNav.module.css  |  2 +-
 components/core/UserNav/UserNav.tsx         |  7 ++--
 components/ui/ClickOutside/ClickOutside.tsx | 38 +++++++++++++++++++++
 components/ui/ClickOutside/index.ts         |  1 +
 components/ui/Sidebar/Sidebar.tsx           | 12 +++++--
 components/ui/index.ts                      |  1 +
 7 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 components/ui/ClickOutside/ClickOutside.tsx
 create mode 100644 components/ui/ClickOutside/index.ts

diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index fafc3b39a..a984a42fd 100644
--- a/components/core/Layout/Layout.tsx
+++ b/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, closeSidebar } = useUI();
   return (
     <div className={rootClassName}>
       <Featurebar
@@ -25,7 +25,7 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
         <main className="h-screen">{children}</main>
       </Container>
       {displaySidebar && (
-        <Sidebar>
+        <Sidebar closeSidebar={closeSidebar}>
           <CartSidebarView />
         </Sidebar>
       )}
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index 3dd90ada2..df5b8dbba 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -6,5 +6,5 @@
 }
 
 .item {
-  @apply mr-6 cursor-pointer;
+  @apply mr-6 cursor-pointer relative;
 }
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index dd36cb5fe..71ba1cc9e 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -16,8 +16,11 @@ const UserNav: FunctionComponent<Props> = ({ className }) => {
   return (
     <nav className={rootClassName}>
       <ul className={s.list}>
-        <li className={s.item}>
-          <Bag onClick={openSidebar} />
+        <li className={s.item} onClick={openSidebar}>
+          <Bag />
+          <span className="bg-black h-4 w-4 absolute rounded-full inset-3 text-white flex items-center justify-center font-bold text-xs">
+            1
+          </span>
         </li>
         <li className={s.item}>
           <Heart />
diff --git a/components/ui/ClickOutside/ClickOutside.tsx b/components/ui/ClickOutside/ClickOutside.tsx
new file mode 100644
index 000000000..d7253aca0
--- /dev/null
+++ b/components/ui/ClickOutside/ClickOutside.tsx
@@ -0,0 +1,38 @@
+import React, {
+  FunctionComponent,
+  MutableRefObject,
+  useEffect,
+  useRef,
+} from "react";
+import { findDOMNode } from "react-dom";
+
+export interface ClickOutsideProps {
+  onClickOutside: (e?: MouseEvent) => void;
+  children: React.ReactNode | any;
+}
+
+const ClickOutside: FunctionComponent<ClickOutsideProps> = ({
+  children,
+  onClickOutside,
+}) => {
+  let node = useRef(null);
+
+  const handleClick = (e: MouseEvent) => {
+    console.log("eeee");
+    if (!e || !node.current.contains(e.target as HTMLInputElement)) {
+      console.log("eeee");
+      // onClickOutside && onClickOutside(e);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick, true);
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  });
+
+  return children;
+};
+
+export default ClickOutside;
diff --git a/components/ui/ClickOutside/index.ts b/components/ui/ClickOutside/index.ts
new file mode 100644
index 000000000..c0ce145a8
--- /dev/null
+++ b/components/ui/ClickOutside/index.ts
@@ -0,0 +1 @@
+export { default } from "./ClickOutside";
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 081198e3f..7780ad3ee 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -5,13 +5,21 @@ import s from "./Sidebar.module.css";
 interface Props {
   className?: string;
   children?: any;
+  closeSidebar: () => void;
 }
 
-const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
+const Sidebar: FunctionComponent<Props> = ({
+  className,
+  children,
+  closeSidebar,
+}) => {
   const rootClassName = cn(s.root, className);
   return (
     <div className={rootClassName}>
-      <div className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25">
+      <div
+        className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25"
+        onClick={closeSidebar}
+      >
         <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">
diff --git a/components/ui/index.ts b/components/ui/index.ts
index 531a3bd28..1e5ad510b 100644
--- a/components/ui/index.ts
+++ b/components/ui/index.ts
@@ -2,3 +2,4 @@ export { default as Button } from "./Button";
 export { default as Container } from "./Container";
 export { default as Sidebar } from "./Sidebar";
 export { default as Logo } from "./Logo";
+export { default as ClickOutside } from "./ClickOutside";

From de949095d7609adee3b9065aab2b6a4bd1cdb64d Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 1 Oct 2020 17:25:48 -0300
Subject: [PATCH 2/2] ProductGrid

---
 .../cart/CartSidebarView/CartSidebarView.tsx  |  2 +-
 components/core/Layout/Layout.tsx             |  4 +-
 components/icon/Cross.tsx                     |  6 +-
 .../ProductCard/ProductCard.module.css        |  3 +
 .../product/ProductCard/ProductCard.tsx       | 29 ++++++++++
 components/product/ProductCard/index.ts       |  1 +
 .../ProductGrid/ProductGrid.module.css        |  4 ++
 .../product/ProductGrid/ProductGrid.tsx       | 25 ++++++++
 components/product/ProductGrid/index.ts       |  1 +
 .../product/ProductView/ProductView.tsx       |  8 ---
 components/product/Swatch/Swatch.tsx          |  2 +-
 components/product/index.ts                   |  4 +-
 components/product/types.ts                   | 10 ++++
 components/ui/ClickOutside/ClickOutside.tsx   | 57 ++++++++++++-------
 components/ui/Sidebar/Sidebar.tsx             | 12 +---
 components/ui/index.ts                        |  1 -
 components/{ => ui}/types.ts                  |  0
 .../api/operations/get-all-products.ts        |  8 +--
 pages/index.tsx                               | 17 ++----
 tailwind.config.js                            |  1 +
 tsconfig.json                                 |  5 +-
 21 files changed, 134 insertions(+), 66 deletions(-)
 create mode 100644 components/product/ProductCard/ProductCard.module.css
 create mode 100644 components/product/ProductCard/ProductCard.tsx
 create mode 100644 components/product/ProductCard/index.ts
 create mode 100644 components/product/ProductGrid/ProductGrid.module.css
 create mode 100644 components/product/ProductGrid/ProductGrid.tsx
 create mode 100644 components/product/ProductGrid/index.ts
 create mode 100644 components/product/types.ts
 rename components/{ => ui}/types.ts (100%)

diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index b65d9498c..6de81cf61 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -38,7 +38,7 @@ const CartSidebarView: FunctionComponent = () => {
                 <span>-</span>
                 <input
                   className="w-6 border-gray-300 border mx-3 rounded text-center text-sm"
-                  value="1"
+                  defaultValue="1"
                 />
                 <span>+</span>
               </div>
diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index a984a42fd..fafc3b39a 100644
--- a/components/core/Layout/Layout.tsx
+++ b/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, closeSidebar } = useUI();
+  const { displaySidebar } = useUI();
   return (
     <div className={rootClassName}>
       <Featurebar
@@ -25,7 +25,7 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
         <main className="h-screen">{children}</main>
       </Container>
       {displaySidebar && (
-        <Sidebar closeSidebar={closeSidebar}>
+        <Sidebar>
           <CartSidebarView />
         </Sidebar>
       )}
diff --git a/components/icon/Cross.tsx b/components/icon/Cross.tsx
index cff53612d..f47f3db16 100644
--- a/components/icon/Cross.tsx
+++ b/components/icon/Cross.tsx
@@ -4,9 +4,9 @@ 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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
         d="M6 18L18 6M6 6l12 12"
       />
     </svg>
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
new file mode 100644
index 000000000..6bb0249b7
--- /dev/null
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -0,0 +1,3 @@
+.root {
+  @apply flex flex-row px-2;
+}
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
new file mode 100644
index 000000000..ab14cfd74
--- /dev/null
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -0,0 +1,29 @@
+import cn from "classnames";
+import s from "./ProductCard.module.css";
+import React, { FunctionComponent } from "react";
+
+interface Props {
+  className?: string;
+  children?: any;
+}
+
+const ProductCard: FunctionComponent<Props> = ({ className }) => {
+  const rootClassName = cn(s.root, className);
+  return (
+    <div className={rootClassName}>
+      <div className="absolute">
+        <h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl">
+          {/* {productData.title} */}
+        </h1>
+        <div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
+          {/* {productData.price} */}
+        </div>
+      </div>
+      <div className="flex-1 h-full p-24">
+        <div className="bg-violet h-full"></div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductCard;
diff --git a/components/product/ProductCard/index.ts b/components/product/ProductCard/index.ts
new file mode 100644
index 000000000..a8adb3f08
--- /dev/null
+++ b/components/product/ProductCard/index.ts
@@ -0,0 +1 @@
+export { default } from "./ProductCard";
diff --git a/components/product/ProductGrid/ProductGrid.module.css b/components/product/ProductGrid/ProductGrid.module.css
new file mode 100644
index 000000000..a92e0c6ab
--- /dev/null
+++ b/components/product/ProductGrid/ProductGrid.module.css
@@ -0,0 +1,4 @@
+.root {
+  @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full h-96;
+  min-height: calc((100vh - 80px - 56px) * 2);
+}
diff --git a/components/product/ProductGrid/ProductGrid.tsx b/components/product/ProductGrid/ProductGrid.tsx
new file mode 100644
index 000000000..b1d53a7a7
--- /dev/null
+++ b/components/product/ProductGrid/ProductGrid.tsx
@@ -0,0 +1,25 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import s from "./ProductGrid.module.css";
+
+interface Props {
+  className?: string;
+  children?: any;
+  products: [any];
+}
+
+const ProductView: FunctionComponent<Props> = ({ products, className }) => {
+  const rootClassName = cn(s.root, className);
+  return (
+    <div className={rootClassName}>
+      <div className="row-span-2 lg:col-span-2 bg-violet h-full"></div>
+      <div className="row-span-1 lg:col-span-1 bg-black h-full"></div>
+      <div className="row-span-1 lg:col-span-1 bg-pink"></div>
+      <div className="row-span-1 lg:col-span-1 bg-black h-full"></div>
+      <div className="row-span-2 lg:col-span-2 bg-blue h-full"></div>
+      <div className="row-span-1 lg:col-span-1 bg-cyan"></div>
+    </div>
+  );
+};
+
+export default ProductView;
diff --git a/components/product/ProductGrid/index.ts b/components/product/ProductGrid/index.ts
new file mode 100644
index 000000000..aa0f8fa43
--- /dev/null
+++ b/components/product/ProductGrid/index.ts
@@ -0,0 +1 @@
+export { default } from "./ProductGrid";
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 84535f104..64db792ca 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -3,14 +3,6 @@ import React, { FunctionComponent } from "react";
 import s from "./ProductView.module.css";
 import { Button } from "@components/ui";
 import { Swatch } from "@components/product";
-import { Colors } from "@components/types";
-interface ProductData {
-  title: string;
-  price: string;
-  description: string;
-  colors: [Colors];
-  sizes: [string];
-}
 
 interface Props {
   className?: string;
diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx
index 99fe31ca9..654c68dd4 100644
--- a/components/product/Swatch/Swatch.tsx
+++ b/components/product/Swatch/Swatch.tsx
@@ -1,7 +1,7 @@
 import cn from "classnames";
 import React, { FunctionComponent } from "react";
 import s from "./Swatch.module.css";
-import { Colors } from "@components/types";
+import { Colors } from "@components/ui/types";
 
 interface Props {
   className?: string;
diff --git a/components/product/index.ts b/components/product/index.ts
index 77b944983..ce920ba5d 100644
--- a/components/product/index.ts
+++ b/components/product/index.ts
@@ -1,2 +1,4 @@
-export { default as ProductView } from "./ProductView";
 export { default as Swatch } from "./Swatch";
+export { default as ProductView } from "./ProductView";
+export { default as ProductCard } from "./ProductCard";
+export { default as ProductGrid } from "./ProductGrid";
diff --git a/components/product/types.ts b/components/product/types.ts
new file mode 100644
index 000000000..3a1477069
--- /dev/null
+++ b/components/product/types.ts
@@ -0,0 +1,10 @@
+import { Colors } from "@components/ui/types";
+export { Product } from "@lib/bigcommerce";
+
+// export type ProductData = {
+//   title: string;
+//   price: string;
+//   description: string;
+//   colors: [Colors];
+//   sizes: [string];
+// };
diff --git a/components/ui/ClickOutside/ClickOutside.tsx b/components/ui/ClickOutside/ClickOutside.tsx
index d7253aca0..632718831 100644
--- a/components/ui/ClickOutside/ClickOutside.tsx
+++ b/components/ui/ClickOutside/ClickOutside.tsx
@@ -4,35 +4,48 @@ import React, {
   useEffect,
   useRef,
 } from "react";
-import { findDOMNode } from "react-dom";
+
+import { Component } from "react";
+import PropTypes from "prop-types";
 
 export interface ClickOutsideProps {
   onClickOutside: (e?: MouseEvent) => void;
   children: React.ReactNode | any;
+  render: () => void;
 }
 
-const ClickOutside: FunctionComponent<ClickOutsideProps> = ({
-  children,
-  onClickOutside,
-}) => {
-  let node = useRef(null);
+export default class ClickOutside extends Component<ClickOutsideProps> {
+  public domNode: Element | null = null;
 
-  const handleClick = (e: MouseEvent) => {
-    console.log("eeee");
-    if (!e || !node.current.contains(e.target as HTMLInputElement)) {
-      console.log("eeee");
-      // onClickOutside && onClickOutside(e);
+  handleRef = (element) => {
+    this.domNode = element;
+  };
+
+  public componentDidMount() {
+    document.addEventListener("click", this.handleClick, true);
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener("mousedown", this.handleClick, true);
+    document.removeEventListener("touchstart", this.handleClick, true);
+  }
+
+  public handleClick = (event) => {
+    function hasParent(element, root) {
+      return root && root.contains(element);
+    }
+
+    if (!hasParent(event.target, this.domNode)) {
+      if (typeof this.props.onClickOutside === "function") {
+        this.props.onClickOutside(event);
+      }
     }
   };
 
-  useEffect(() => {
-    document.addEventListener("click", handleClick, true);
-    return () => {
-      document.removeEventListener("click", handleClick);
-    };
-  });
-
-  return children;
-};
-
-export default ClickOutside;
+  render() {
+    return null;
+    // return this.props.render({
+    //   innerRef: this.handleRef,
+    // });
+  }
+}
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 7780ad3ee..081198e3f 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -5,21 +5,13 @@ import s from "./Sidebar.module.css";
 interface Props {
   className?: string;
   children?: any;
-  closeSidebar: () => void;
 }
 
-const Sidebar: FunctionComponent<Props> = ({
-  className,
-  children,
-  closeSidebar,
-}) => {
+const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className);
   return (
     <div className={rootClassName}>
-      <div
-        className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25"
-        onClick={closeSidebar}
-      >
+      <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">
diff --git a/components/ui/index.ts b/components/ui/index.ts
index 1e5ad510b..531a3bd28 100644
--- a/components/ui/index.ts
+++ b/components/ui/index.ts
@@ -2,4 +2,3 @@ export { default as Button } from "./Button";
 export { default as Container } from "./Container";
 export { default as Sidebar } from "./Sidebar";
 export { default as Logo } from "./Logo";
-export { default as ClickOutside } from "./ClickOutside";
diff --git a/components/types.ts b/components/ui/types.ts
similarity index 100%
rename from components/types.ts
rename to components/ui/types.ts
diff --git a/lib/bigcommerce/api/operations/get-all-products.ts b/lib/bigcommerce/api/operations/get-all-products.ts
index c69bea34d..668aef187 100644
--- a/lib/bigcommerce/api/operations/get-all-products.ts
+++ b/lib/bigcommerce/api/operations/get-all-products.ts
@@ -1,9 +1,9 @@
 import {
   GetAllProductsQuery,
   GetAllProductsQueryVariables,
-} from 'lib/bigcommerce/schema';
-import { getConfig, Images, ProductImageVariables } from '..';
-import { RecursivePartial } from '../types';
+} from "lib/bigcommerce/schema";
+import { getConfig, Images, ProductImageVariables } from "..";
+import { RecursivePartial } from "../types";
 
 export const getAllProductsQuery = /* GraphQL */ `
   query getAllProducts(
@@ -104,7 +104,7 @@ export const getAllProductsQuery = /* GraphQL */ `
 
 export interface GetAllProductsResult<T> {
   products: T extends GetAllProductsQuery
-    ? T['site']['products']['edges']
+    ? T["site"]["products"]["edges"]
     : unknown;
 }
 
diff --git a/pages/index.tsx b/pages/index.tsx
index abc67498f..b0ffda896 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,10 +1,10 @@
-import { GetStaticPropsContext, InferGetStaticPropsType } from 'next';
-import getAllProducts from 'lib/bigcommerce/api/operations/get-all-products';
-import { Layout } from '@components/core';
+import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
+import getAllProducts from "lib/bigcommerce/api/operations/get-all-products";
+import { Layout } from "@components/core";
+import { ProductGrid } from "@components/product";
 
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
   const { products } = await getAllProducts();
-
   return {
     props: { products },
   };
@@ -13,15 +13,10 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
 export default function Home({
   products,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  console.log('PRODUCTS', products);
-
+  console.log("PRODUCTS", products);
   return (
     <Layout>
-      <div className="h-full grid grid-cols-1 h-full lg:grid-cols-3 lg:grid-rows-2">
-        <div className="lg:row-span-2 lg:col-span-2 bg-violet h-full"></div>
-        <div className="lg:row-span-1 lg:col-span-1 bg-black h-full"></div>
-        <div className="lg:row-span-1 lg:col-span-1 bg-pink"></div>
-      </div>
+      <ProductGrid products={products} />
     </Layout>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 29f406734..dfb08c05e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,6 +15,7 @@ module.exports = {
         violet: "#7928CA",
         pink: "#FF0080",
         cyan: "#50E3C2",
+        blue: "#0070F3",
       },
     },
   },
diff --git a/tsconfig.json b/tsconfig.json
index d8d1fa01c..faa489c13 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,8 +15,9 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "paths": {
-      "@components/*": ["components/*"],
-      "@assets/*": ["assets/*"]
+      "@lib/*": ["lib/*"],
+      "@assets/*": ["assets/*"],
+      "@components/*": ["components/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],