[BUGFIX] Show a message when a category has no products assigned

packages/venia-ui/lib/RootComponents/Category/NoProductsFound/index.js

@@ -0,0 +1 @@
+export { default } from './noProductsFound';

packages/venia-ui/lib/RootComponents/Category/NoProductsFound/noProductsFound.css

@@ -0,0 +1,30 @@
+.root {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    justify-content: center;
+}
+
+.title {
+    font-size: 1rem;
+    font-weight: 600;
+    text-align: center;
+}
+
+.categories {
+    margin-top: 2rem;
+}
+
+.list {
+    margin-top: 1rem;
+}
+
+.listItem {
+    text-align: center;
+    text-decoration: underline;
+}
+
+.listItem:not(:last-child) {
+    margin-bottom: 0.5rem;
+}

packages/venia-ui/lib/RootComponents/Category/NoProductsFound/noProductsFound.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { string, shape, objectOf, number } from 'prop-types';
+import { mergeClasses } from '../../../classify';
+import { Link, resourceUrl } from '@magento/venia-drivers';
+import defaultClasses from './noProductsFound.css';
+
+const NoProductsFound = props => {
+    const classes = mergeClasses(defaultClasses, props.classes);
+    const categories = props.categories;
+
+    // TODO: get categoryUrlSuffix from graphql storeOptions when it is ready
+    const categoryUrlSuffix = '.html';
+
+    const categoryList = (
+        <ul className={classes.list}>
+            {Object.values(categories)
+                .filter(category => category.isActive)
+                .map(category => {
+                    const uri = resourceUrl(
+                        `/${category.urlKey}${categoryUrlSuffix}`
+                    );
+
+                    return (
+                        <li key={category.id} className={classes.listItem}>
+                            <Link to={uri}>{category.name}</Link>
+                        </li>
+                    );
+                })}
+        </ul>
+    );
+
+    return (
+        <div className={classes.root}>
+            <img src={''} alt="Sorry! There are no products in this category" />
+            <h2 className={classes.title}>
+                Sorry! There are no products in this category
+            </h2>
+            <div className={classes.categories}>
+                <p>Try one of these categories</p>
+                {categoryList}
+            </div>
+        </div>
+    );
+};
+
+export default NoProductsFound;
+
+NoProductsFound.propTypes = {
+    classes: shape({
+        root: string,
+        title: string,
+        list: string,
+        categories: string,
+        listItem: string
+    }),
+    categories: objectOf(
+        shape({
+            name: string.isRequired,
+            id: number.isRequired
+        })
+    ).isRequired
+};

packages/venia-ui/lib/RootComponents/Category/category.js

@@ -14,9 +14,10 @@ import isObjectEmpty from '../../util/isObjectEmpty';
 import { getFilterParams } from '../../util/getFilterParamsFromUrl';
 import CategoryContent from './categoryContent';
 import defaultClasses from './category.css';
+import NoProductsFound from './NoProductsFound';
 
 const Category = props => {
-    const { filterClear, id, openDrawer, pageSize } = props;
+    const { filterClear, id, openDrawer, pageSize, categories } = props;
     const classes = mergeClasses(defaultClasses, props.classes);
 
     const [paginationValues, paginationApi] = usePagination({
@@ -91,11 +92,13 @@ const Category = props => {
     }
 
     // Show the loading indicator until data has been fetched.
-    if (!totalPagesFromData) {
+    if (totalPagesFromData === null) {
         return fullPageLoadingIndicator;
     }
 
-    return (
+    return totalPagesFromData === 0 ? (
+        <NoProductsFound categories={categories} />
+    ) : (
         <CategoryContent
             classes={classes}
             data={loading ? null : data}
@@ -123,6 +126,14 @@ Category.defaultProps = {
     pageSize: 6
 };
 
+const mapStateToProps = ({ catalog }) => {
+    const categories = catalog.categories;
+
+    return {
+        categories
+    };
+};
+
 const mapDispatchToProps = dispatch => ({
     filterClear: () => dispatch(catalogActions.filterOption.clear()),
     openDrawer: () => dispatch(toggleDrawer('filter'))
@@ -131,7 +142,7 @@ const mapDispatchToProps = dispatch => ({
 export default compose(
     withRouter,
     connect(
-        null,
+        mapStateToProps,
         mapDispatchToProps
     )
 )(Category);