Merge pull request #928 from mirumee/fix/crash-on-search-for-products…

…-without-category

Add default value to product item category in case none is provided

CHANGELOG.md

@@ -35,6 +35,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Refactor variant picker components and open sidebar after adding product to cart - #809 by @krzysztofwolski
 - Fix checkout address view - #909 by @konstantinoschristomanos
 - Support for static url - #721 by @marianoeramirez and @dominik-zeglen
+- Fix search crashing when displaying item with no category - #928 by @mmarkusik
 
 ## 2.10.4
 

package.json

@@ -208,7 +208,6 @@
     "tsc": "npx tsc --noEmit & npx tsc --noEmit -p src/@next",
     "heroku-postbuild": "npm run build",
     "sitemap": "ts-node ./src/sitemap-builder.ts",
-    "generate": "npx plop --plopfile ./.plop/index.js",
     "cy:run": "cypress run",
     "cy:run:record": "npm run cy:run -- --record",
     "cy:open": "cypress open",

src/components/OverlayManager/Search/ProductItem.tsx

@@ -14,7 +14,7 @@ const ProductItem: React.FC<SearchResults_products_edges> = ({
       <Thumbnail source={product} />
       <span>
         <h4>{product.name}</h4>
-        <p>{product.category.name}</p>
+        <p>{product.category?.name || "-"}</p>
       </span>
     </Link>
   </li>

src/components/OverlayManager/Search/__snapshots__/stories.storyshot

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots components/OverlayManager/Search/ProductItem default 1`] = `
+.c0 {
+  position: relative;
+  margin: 20px;
+}
+
+.c1 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 3px solid rgba(0,0,0,0.2);
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+<div
+  className="c0"
+>
+  <li
+    className="search__products__item"
+  >
+    <a
+      href="/product/product-name/72/"
+      onClick={[Function]}
+    >
+      <img
+        alt="placeholder"
+        src={[Function]}
+      />
+      <span>
+        <h4>
+          Product Name
+        </h4>
+        <p>
+          Category Name
+        </p>
+      </span>
+    </a>
+  </li>
+  <div
+    className="c1"
+  />
+</div>
+`;
+
+exports[`Storyshots components/OverlayManager/Search/ProductItem without category 1`] = `
+.c0 {
+  position: relative;
+  margin: 20px;
+}
+
+.c1 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 3px solid rgba(0,0,0,0.2);
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+<div
+  className="c0"
+>
+  <li
+    className="search__products__item"
+  >
+    <a
+      href="/product/product-name/72/"
+      onClick={[Function]}
+    >
+      <img
+        alt="placeholder"
+        src={[Function]}
+      />
+      <span>
+        <h4>
+          Product Name
+        </h4>
+        <p>
+          -
+        </p>
+      </span>
+    </a>
+  </li>
+  <div
+    className="c1"
+  />
+</div>
+`;

src/components/OverlayManager/Search/scss/index.scss

@@ -13,6 +13,10 @@ $drawer-width: 25rem;
     min-height: 100vh;
   }
 
+  .input {
+    margin-bottom: 0;
+  }
+
   &__input {
     .input__icon-right {
       svg * {

src/components/OverlayManager/Search/stories.tsx

@@ -0,0 +1,42 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { MemoryRouter } from "react-router";
+
+import ProductItem from "./ProductItem";
+
+storiesOf("components/OverlayManager/Search/ProductItem", module)
+  .addParameters({ component: ProductItem })
+  .add("default", () => (
+    <MemoryRouter>
+      <ProductItem
+        __typename="ProductCountableEdge"
+        node={{
+          __typename: "Product",
+          thumbnail: null,
+          thumbnail2x: null,
+          id: "UHJvZHVjdDo3Mg==",
+          name: "Product Name",
+          category: {
+            __typename: "Category",
+            id: "categoryId",
+            name: "Category Name",
+          },
+        }}
+      />
+    </MemoryRouter>
+  ))
+  .add("without category", () => (
+    <MemoryRouter>
+      <ProductItem
+        __typename="ProductCountableEdge"
+        node={{
+          __typename: "Product",
+          thumbnail: null,
+          thumbnail2x: null,
+          id: "UHJvZHVjdDo3Mg==",
+          name: "Product Name",
+          category: null,
+        }}
+      />
+    </MemoryRouter>
+  ));