Merge pull request #167 from trojanh/products-page-fix

fix: show product not found in products table
reactioncommerce · Jan 19, 2020 · 65b47ec · 65b47ec
2 parents 3944c57 + 05ca14d
commit 65b47ec
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 35 deletions.
diff --git a/imports/plugins/included/product-variant/components/productGrid.js b/imports/plugins/included/product-variant/components/productGrid.js
@@ -73,8 +73,25 @@ const styles = (theme) => ({
   tableBody: {
     "& tr:nth-child(odd)": {
       backgroundColor: theme.palette.colors.black02
+    },
+    "& td": {
+      borderBottom: "none",
+      letterSpacing: "0.28px",
+      padding: 0,
+      color: theme.palette.colors.coolGrey500
+    },
+    "& td:first-child": {
+      padding: "4px",
+      width: "50px"
+    },
+    "& td:nth-child(2)": {
+      width: "60px"
     }
   },
+  textNotFound: {
+    textAlign: "right",
+    height: "50px"
+  },
   tableHead: {
     "& tr th": {
       borderBottom: "none",
@@ -192,6 +209,29 @@ class ProductGrid extends Component {
     );
   }
 
+  /**
+   * Render the not found component
+   * @access protected
+   * @returns {Node} React node containing the `NotFound` component.
+   */
+  renderNotFound() {
+    const { classes } = this.props;
+
+    return (
+      <TableRow className={"product-table-row-item"}>
+        <TableCell />
+        <TableCell />
+        <TableCell />
+        <TableCell className={classes.textNotFound}>
+          <Components.Translation defaultValue="No Products Found" i18nKey="app.noProductsFound" />
+        </TableCell>
+        <TableCell />
+        <TableCell />
+        <TableCell />
+      </TableRow>
+    );
+  }
+
   renderProductGridItems() {
     const { productMediaById, products } = this.props;
     const { classes, ...notClasses } = this.props;
@@ -208,15 +248,7 @@ class ProductGrid extends Component {
       ));
     }
 
-    return (
-      <div className="row">
-        <div className="text-center">
-          <h3>
-            <Components.Translation defaultValue="No Products Found" i18nKey="app.noProductsFound" />
-          </h3>
-        </div>
-      </div>
-    );
+    return this.renderNotFound();
   }
 
   handleDisplayTagSelector = () => {

diff --git a/imports/plugins/included/product-variant/components/products.js b/imports/plugins/included/product-variant/components/products.js
@@ -108,45 +108,20 @@ class Products extends Component {
     return null;
   }
 
-  /**
-   * Render the not found component
-   * @access protected
-   * @returns {Node} React node containing the `NotFound` component.
-   */
-  renderNotFound() {
-    return (
-      <Components.NotFound
-        i18nKeyTitle="productGrid.noProductsFound"
-        icon="fa fa-barcode"
-        title="No Products Found"
-      />
-    );
-  }
-
   /**
    * Render component
    * @access protected
    * @returns {Node} React node containing elements that make up the `Products` component.
    */
   render() {
-    const { isProductsSubscriptionReady, isReady, showNotFound } = this.props;
-
-    // Force show the not-found view.
-    if (showNotFound) {
-      return this.renderNotFound();
-    }
+    const { isProductsSubscriptionReady, isReady } = this.props;
 
     if (!isProductsSubscriptionReady || !isReady) {
       return (
         <Components.Loading />
       );
     }
 
-    // Render not-found view if no products are available.
-    if (!this.hasProducts) {
-      return this.renderNotFound();
-    }
-
     return (
       <div id="container-main">
         {this.renderProductGrid()}