From de949095d7609adee3b9065aab2b6a4bd1cdb64d Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 1 Oct 2020 17:25:48 -0300 Subject: [PATCH] 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 = () => { - + 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 = ({ className, children }) => { const rootClassName = cn(s.root, className); - const { displaySidebar, closeSidebar } = useUI(); + const { displaySidebar } = useUI(); return (
= ({ className, children }) => {
{children}
{displaySidebar && ( - + )} 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 ( 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 = ({ className }) => { + const rootClassName = cn(s.root, className); + return ( +
+
+

+ {/* {productData.title} */} +

+
+ {/* {productData.price} */} +
+
+
+
+
+
+ ); +}; + +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 = ({ products, className }) => { + const rootClassName = cn(s.root, className); + return ( +
+
+
+
+
+
+
+
+ ); +}; + +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 = ({ - children, - onClickOutside, -}) => { - let node = useRef(null); +export default class ClickOutside extends Component { + 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 = ({ - className, - children, - closeSidebar, -}) => { +const Sidebar: FunctionComponent = ({ className, children }) => { const rootClassName = cn(s.root, className); return (
-
+
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 { 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) { - console.log('PRODUCTS', products); - + console.log("PRODUCTS", products); return ( -
-
-
-
-
+ ); } 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"],