Code improvements

src/components/App/index.tsx

@@ -2,14 +2,14 @@ import * as React from "react";
 
 import { ApolloConsumer } from "react-apollo";
 import {
+  CartOverlay,
   Footer,
   MainMenu,
   MainMenuNavOverlay,
   MetaConsumer,
   MobileNav,
   SearchOverlay
 } from "..";
-import { CartOverlay } from "../CartOverlay";
 import CartProvider from "../CartProvider";
 import { LoginOverlay } from "../LoginOverlay";
 import { NotificationOverlay } from "../NotificationOverlay";

src/components/CachedImage/index.tsx → src/components/CachedImage/CachedImage.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 interface CachedImageProps {
   url: string;
   url2x?: string;
+  alt?: string;
 }
 
 interface CachedImageState {
@@ -56,12 +57,16 @@ class CachedImage extends React.Component<CachedImageProps, CachedImageState> {
   }
 
   render() {
-    const { url, url2x } = this.props;
+    const { url, url2x, alt } = this.props;
     if (this.state.isUnavailable) {
       return this.props.children || null;
     }
     return (
-      <img src={url} srcSet={url2x ? `${url} 1x, ${url2x} 2x` : `${url} 1x`} />
+      <img
+        src={url}
+        srcSet={url2x ? `${url} 1x, ${url2x} 2x` : `${url} 1x`}
+        alt={alt}
+      />
     );
   }
 }

src/components/CachedImage/CachedThumbnail.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+import { maybe } from "../../core/utils";
+import CachedImage from "./CachedImage";
+
+const noPhotoPng = require("../../images/nophoto.png");
+
+const CachedThumbnail: React.SFC<{
+  source: {
+    thumbnail: { url: string; alt: string };
+    thumbnail2x: { url: string };
+  };
+  noPhotoDefault?: boolean;
+  children?: React.ReactNode;
+}> = ({ source, noPhotoDefault, children }) => {
+  const defaultImg = noPhotoDefault ? noPhotoPng : undefined;
+  return (
+    <CachedImage
+      url={maybe(() => source.thumbnail.url, defaultImg)}
+      url2x={maybe(() => source.thumbnail2x.url, defaultImg)}
+      alt={maybe(() => source.thumbnail.alt, "")}
+    >
+      {children}
+    </CachedImage>
+  );
+};
+
+CachedThumbnail.defaultProps = {
+  noPhotoDefault: true
+};
+
+export default CachedThumbnail;

src/components/CachedImage/index.ts

@@ -0,0 +1,2 @@
+export { default as CachedImage } from "./CachedImage";
+export { default as CachedThumbnail } from "./CachedThumbnail";

src/components/CartOverlay/index.tsx → src/components/CartOverlay/CartOverlay.tsx

@@ -6,9 +6,8 @@ import { Link } from "react-router-dom";
 import ReactSVG from "react-svg";
 
 import { Button } from "..";
-import { maybe, priceToString } from "../../core/utils";
+import { priceToString } from "../../core/utils";
 import { checkoutLoginUrl } from "../App/routes";
-import CachedImage from "../CachedImage";
 import { CartContext } from "../CartProvider/context";
 import { Error } from "../Error";
 import GoToCart from "../GoToCart";
@@ -21,13 +20,13 @@ import { Overlay } from "../Overlay";
 import { OverlayContext, OverlayType } from "../Overlay/context";
 import { ShopContext } from "../ShopProvider/context";
 import { UserContext } from "../User/context";
+import Empty from "./Empty";
+import ProductList from "./ProductList";
 
 const cartSvg = require("../../images/cart.svg");
 const closeSvg = require("../../images/x.svg");
-const noPhotoPng = require("../../images/nophoto.png");
-const removeSvg = require("../../images/garbage.svg");
 
-export const CartOverlay: React.SFC = () => (
+const CartOverlay: React.SFC = () => (
   <OverlayContext.Consumer>
     {overlay =>
       overlay.type === OverlayType.cart ? (
@@ -67,45 +66,16 @@ export const CartOverlay: React.SFC = () => (
                           </div>
                           <ReactSVG
                             path={closeSvg}
-                            onClick={() => overlay.hide()}
+                            onClick={overlay.hide}
                             className="overlay__header__close-icon"
                           />
                         </div>
                         {lines.length ? (
                           <>
-                            <ul className="cart__list">
-                              {lines.map(line => (
-                                <li
-                                  key={line.variant.id}
-                                  className="cart__list__item"
-                                >
-                                  <CachedImage
-                                    url={maybe(
-                                      () => line.variant.product.thumbnail.url,
-                                      noPhotoPng
-                                    )}
-                                    url2x={maybe(
-                                      () => line.variant.product.thumbnail2x.url
-                                    )}
-                                  />
-                                  <div className="cart__list__item__details">
-                                    <p>{line.variant.price.localized}</p>
-                                    <p>{line.variant.product.name}</p>
-                                    <span className="cart__list__item__details__variant">
-                                      <span>{line.variant.name}</span>
-                                      <span>{"Qty: " + line.quantity}</span>
-                                    </span>
-                                    <ReactSVG
-                                      path={removeSvg}
-                                      className="cart__list__item__details__delete-icon"
-                                      onClick={() =>
-                                        cart.remove(line.variant.id)
-                                      }
-                                    />
-                                  </div>
-                                </li>
-                              ))}
-                            </ul>
+                            <ProductList
+                              lines={lines}
+                              removeFromCart={cart.remove}
+                            />
                             <div className="cart__footer">
                               <div className="cart__footer__subtotoal">
                                 <span>Subtotal</span>
@@ -128,7 +98,6 @@ export const CartOverlay: React.SFC = () => (
                                   apolloClient={client}
                                   cart={cart}
                                   secondary
-                                  onClick={overlay.hide}
                                 >
                                   Go to my bag
                                 </GoToCart>
@@ -154,18 +123,7 @@ export const CartOverlay: React.SFC = () => (
                             </div>
                           </>
                         ) : (
-                          <div className="cart__empty">
-                            <h4>Yor bag is empty</h4>
-                            <p>
-                              You haven’t added anything to your bag. We’re sure
-                              you’ll find something in our store
-                            </p>
-                            <div className="cart__empty__action">
-                              <Button secondary onClick={() => overlay.hide()}>
-                                Continue Shopping
-                              </Button>
-                            </div>
-                          </div>
+                          <Empty overlayHide={overlay.hide} />
                         )}
                       </div>
                     );
@@ -184,3 +142,5 @@ export const CartOverlay: React.SFC = () => (
     }
   </OverlayContext.Consumer>
 );
+
+export default CartOverlay;

src/components/CartOverlay/Empty.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import { Button } from "..";
+
+const Empty: React.SFC<{ overlayHide(): void }> = ({ overlayHide }) => (
+  <div className="cart__empty">
+    <h4>Yor bag is empty</h4>
+    <p>
+      You haven’t added anything to your bag. We’re sure you’ll find something
+      in our store
+    </p>
+    <div className="cart__empty__action">
+      <Button secondary onClick={overlayHide}>
+        Continue Shopping
+      </Button>
+    </div>
+  </div>
+);
+
+export default Empty;

src/components/CartOverlay/ProductList.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+import ReactSVG from "react-svg";
+
+import { CachedThumbnail } from "..";
+import { generateProductUrl } from "../../core/utils";
+import { CartLineInterface } from "../CartProvider/context";
+
+const removeSvg = require("../../images/garbage.svg");
+
+const ProductList: React.SFC<{
+  lines: CartLineInterface[];
+  removeFromCart(variantId: string): void;
+}> = ({ lines, removeFromCart }) => (
+  <ul className="cart__list">
+    {lines.map(line => {
+      const productUrl = generateProductUrl(
+        line.variant.product.id,
+        line.variant.product.name
+      );
+      return (
+        <li key={line.variant.id} className="cart__list__item">
+          <Link to={productUrl}>
+            <CachedThumbnail source={line.variant.product} />
+          </Link>
+          <div className="cart__list__item__details">
+            <p>{line.variant.price.localized}</p>
+            <Link to={productUrl}>
+              <p>{line.variant.product.name}</p>
+            </Link>
+            <span className="cart__list__item__details__variant">
+              <span>{line.variant.name}</span>
+              <span>{`Qty: ${line.quantity}`}</span>
+            </span>
+            <ReactSVG
+              path={removeSvg}
+              className="cart__list__item__details__delete-icon"
+              onClick={() => removeFromCart(line.variant.id)}
+            />
+          </div>
+        </li>
+      );
+    })}
+  </ul>
+);
+
+export default ProductList;

src/components/CartOverlay/index.ts

@@ -0,0 +1 @@
+export { default as CartOverlay } from "./CartOverlay";