[151] Hide filters, add home page collection upon empty search

package.json

@@ -24,6 +24,7 @@
     "graphql-tag": "^2.9.2",
     "history": "^4.7.2",
     "js-base64": "^2.4.8",
+    "lodash": "^4.17.11",
     "nuka-carousel": "^4.3.9",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
@@ -42,6 +43,7 @@
     "@storybook/cli": "^4.0.0-alpha.16",
     "@storybook/react": "^4.0.0-alpha.16",
     "@types/graphql": "^0.13.4",
+    "@types/lodash": "^4.14.118",
     "@types/node": "^10.7.1",
     "@types/nuka-carousel": "^4.2.3",
     "@types/react": "^16.4.11",

src/components/HomePage/index.tsx

@@ -1,21 +1,19 @@
+import { get } from "lodash";
 import * as React from "react";
 import { Query } from "react-apollo";
 import { Link } from "react-router-dom";
 
-import { Button, Carousel, Loader, ProductListItem } from "..";
+import { Button, Carousel, Loader, ProductListItem, ProductsFeatured } from "..";
 import { ProductsList } from "../../core/types/saleor";
-import { generateCategoryUrl, generateProductUrl } from "../../core/utils";
+import { generateCategoryUrl } from "../../core/utils";
 import { Error } from "../Error";
 import { GET_PRODUCTS_AND_CATEGORIES } from "./queries";
 
 import "./scss/index.scss";
 
 const canDisplay = (data: ProductsList) =>
-  data &&
-  data.shop &&
-  data.shop.homepageCollection &&
-  data.categories &&
-  data.categories.edges;
+  get(data, "shop.homepageCollection") &&
+  get(data, "categories.edges");
 
 const HomePage: React.SFC = () => (
   <div className="home-page">
@@ -26,17 +24,14 @@ const HomePage: React.SFC = () => (
     >
       {({ error, data, loading }) => {
         if (canDisplay(data)) {
+          const backgroundImg = data.shop.homepageCollection.backgroundImage;
           return (
             <>
               <div
                 className="home-page__hero"
                 style={
-                  data.shop.homepageCollection.backgroundImage
-                    ? {
-                        backgroundImage: `url(${
-                          data.shop.homepageCollection.backgroundImage.url
-                        })`
-                      }
+                  backgroundImg
+                    ? { backgroundImage: `url(${backgroundImg.url})` }
                     : null
                 }
               >
@@ -67,23 +62,7 @@ const HomePage: React.SFC = () => (
                   )}
                 </div>
               </div>
-              <div className="home-page__featured">
-                <div className="container">
-                  <h3>Featured</h3>
-                  <Carousel>
-                    {data.shop.homepageCollection.products.edges.map(
-                      ({ node: product }) => (
-                        <Link
-                          to={generateProductUrl(product.id, product.name)}
-                          key={product.id}
-                        >
-                          <ProductListItem product={product} />
-                        </Link>
-                      )
-                    )}
-                  </Carousel>
-                </div>
-              </div>
+              <ProductsFeatured />
               <div className="home-page__categories">
                 <div className="container">
                   <h3>Shop by category</h3>

src/components/HomePage/queries.ts

@@ -9,25 +9,6 @@ export const GET_PRODUCTS_AND_CATEGORIES = gql`
           url
         }
         name
-        products(first: 20) {
-          edges {
-            node {
-              id
-              name
-              thumbnailUrl
-              thumbnailUrl2x: thumbnailUrl(size: 510)
-              category {
-                id
-                name
-              }
-              price {
-                currency
-                amount
-                localized
-              }
-            }
-          }
-        }
       }
     }
     categories(level: 0, first: 4) {

src/components/HomePage/scss/index.scss

@@ -60,22 +60,6 @@
     }
   }
 
-  &__featured {
-    padding: 2rem 0 4rem;
-
-    h3 {
-      text-transform: uppercase;
-      font-weight: $bold-font-weight;
-      margin-bottom: 2rem;
-    }
-
-    a {
-      display: inline-block;
-      text-decoration: none;
-      color: $base-font-color;
-    }
-  }
-
   &__categories {
     margin-bottom: 2rem;
 

src/components/ProductFilters/scss/index.scss

@@ -15,9 +15,5 @@
     @media (max-width: $small-screen) {
       grid-template-columns: 1fr;
     }
-
-    &__filter {
-      min-width: 15rem;
-    }
   }
 }

src/components/ProductsFeatured/index.tsx

@@ -0,0 +1,62 @@
+import './scss/index.scss';
+
+import { get } from 'lodash';
+import * as React from 'react';
+import { Query } from 'react-apollo';
+import { Link } from 'react-router-dom';
+
+import { Carousel, Loader, ProductListItem } from '..';
+import { generateProductUrl } from '../../core/utils';
+import { GET_FEATURED_PRODUCTS } from './queries';
+
+
+interface ProductsFeaturedProps {
+  title?: string;
+}
+
+const ProductsFeatured: React.SFC<ProductsFeaturedProps> = ({ title }) => {
+  return (
+    <Query
+      query={GET_FEATURED_PRODUCTS}
+      fetchPolicy="cache-first"
+      errorPolicy="all"
+    >
+      {({ error, data, loading }) => {
+        const products = get(data, 'shop.homepageCollection.products.edges');
+
+        if (loading) {
+          return <Loader />;
+        }
+
+        if (products && products.length) {
+          return (
+            <div className="products-featured">
+              <div className="container">
+                <h3>{title}</h3>
+                <Carousel>
+                  {
+                    products.map(({ node: product }) => (
+                      <Link
+                        to={generateProductUrl(product.id, product.name)}
+                        key={product.id}
+                      >
+                        <ProductListItem product={product} />
+                      </Link>
+                    ))
+                  }
+                </Carousel>
+              </div>
+            </div>
+          );
+        }
+        return null;
+      }}
+    </Query>
+  );
+};
+
+ProductsFeatured.defaultProps = {
+  title: 'Featured'
+};
+
+export default ProductsFeatured;

src/components/ProductsFeatured/queries.tsx

@@ -0,0 +1,30 @@
+import gql from "graphql-tag";
+
+export const GET_FEATURED_PRODUCTS = gql`
+  query ProductsList {
+    shop {
+      homepageCollection {
+        id
+        products(first: 20) {
+          edges {
+            node {
+              id
+              name
+              thumbnailUrl
+              thumbnailUrl2x: thumbnailUrl(size: 510)
+              category {
+                id
+                name
+              }
+              price {
+                currency
+                amount
+                localized
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;

src/components/ProductsFeatured/scss/index.scss

@@ -0,0 +1,17 @@
+@import "../../App/scss/variables.scss";
+
+.products-featured {
+  padding: 2rem 0 4rem;
+
+  h3 {
+    text-transform: uppercase;
+    font-weight: $bold-font-weight;
+    margin-bottom: 2rem;
+  }
+
+  a {
+    display: inline-block;
+    text-decoration: none;
+    color: $base-font-color;
+  }
+}

src/components/ProductsList/index.tsx

@@ -16,6 +16,7 @@ interface ProductsListProps {
   onLoadMore: () => void;
   products: CategoryProductInterface;
   onOrder: (order: string) => void;
+  notFoundPhrase?: string;
 }
 
 export const ProductList: React.SFC<ProductsListProps> = ({
@@ -24,40 +25,46 @@ export const ProductList: React.SFC<ProductsListProps> = ({
   hasNextPage,
   onLoadMore,
   products,
-  onOrder
+  onOrder,
+  notFoundPhrase
 }) => {
   const filterOptions = [
     { value: "price", label: "Price Low-High" },
     { value: "-price", label: "Price High-Low" },
     { value: "name", label: "Name Increasing" },
     { value: "-name", label: "Name Decreasing" }
   ];
+  const sortValues = filterOptions.find((option) => option.value === filters.sortBy);
+  const hasProducts = !!products.totalCount;
   return (
     <div className="products-list">
       <div className="products-list__products container">
         <div className="products-list__products__subheader">
           <span className="products-list__products__subheader__total">
             {products.totalCount} Products
           </span>
-          {displayLoader && (
+          {
+            displayLoader &&
             <div className="products-list__loader">
               <Loader />
             </div>
-          )}
+          }
           <span className="products-list__products__subheader__sort">
-            <span>Sort by:</span>{" "}
-            <Dropdown
-              options={filterOptions}
-              value={
-                filterOptions.find(option => option.value === filters.sortBy) ||
-                ""
-              }
-              isSearchable={false}
-              onChange={event => onOrder(event.value)}
-            />
+            {
+              hasProducts &&
+              <>
+                <span>Sort by:</span>{' '}
+                <Dropdown
+                  options={filterOptions}
+                  value={sortValues || ''}
+                  isSearchable={false}
+                  onChange={event => onOrder(event.value)}
+                />
+              </>
+            }
           </span>
         </div>
-        {products.edges.length > 0 ? (
+        {hasProducts ? (
           <>
             <div className="products-list__products__grid">
               {products.edges.map(({ node: product }) => (
@@ -83,12 +90,16 @@ export const ProductList: React.SFC<ProductsListProps> = ({
           </>
         ) : (
           <div className="products-list__products-not-found">
-            We couldn't find any product matching these conditions
+            {notFoundPhrase}
           </div>
         )}
       </div>
     </div>
   );
 };
 
+ProductList.defaultProps = {
+  notFoundPhrase: 'We couldn\'t find any product matching these conditions'
+};
+
 export default ProductList;

src/components/index.ts

@@ -37,3 +37,4 @@ export { default as CheckoutPayment } from "./CheckoutPayment";
 export { default as ShippingAddressForm } from "./ShippingAddressForm";
 export { default as CheckoutReview } from "./CheckoutReview";
 export { default as Debounce } from "./Debounce";
+export { default as ProductsFeatured } from './ProductsFeatured';