Merge pull request #165 from mirumee/151/empty_search_hide_filters

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

src/components/HomePage/index.tsx

@@ -2,20 +2,22 @@ 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, maybe } 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;
+  maybe(() => !!data.shop.homepageCollection && !!data.categories.edges, false);
 
 const HomePage: React.SFC = () => (
   <div className="home-page">
@@ -26,17 +28,14 @@ const HomePage: React.SFC = () => (
     >
       {({ error, data, loading }) => {
         if (canDisplay(data)) {
+          const { backgroundImg } = data.shop.homepageCollection;
           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 +66,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,56 @@
+import * as React from "react";
+import { Query } from "react-apollo";
+import { Link } from "react-router-dom";
+
+import { Carousel, Loader, ProductListItem } from "..";
+import { generateProductUrl, maybe } from "../../core/utils";
+import { GET_FEATURED_PRODUCTS } from "./queries";
+
+import "./scss/index.scss";
+
+interface ProductsFeaturedProps {
+  title?: string;
+}
+
+const ProductsFeatured: React.SFC<ProductsFeaturedProps> = ({ title }) => {
+  return (
+    <Query query={GET_FEATURED_PRODUCTS}>
+      {({ error, data, loading }) => {
+        const products = maybe(
+          () => data.shop.homepageCollection.products.edges,
+          []
+        );
+
+        if (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>
+          );
+        }
+        if (loading) {
+          return <Loader />;
+        }
+        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: $spacer * 2;
+  }
+
+  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,14 +25,19 @@ 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">
@@ -45,19 +51,20 @@ export const ProductList: React.SFC<ProductsListProps> = ({
             </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";

src/core/utils.ts

@@ -101,3 +101,12 @@ export const convertSortByFromString = (sortBy: string) => {
       : undefined;
   return { field, direction };
 };
+
+export function maybe<T>(exp: () => T, d?: T) {
+  try {
+    const result = exp();
+    return result === undefined ? d : result;
+  } catch {
+    return d;
+  }
+}