Merge pull request #178 from mirumee/128/collections_view

Collection view, categories pagination, thumbnail update

src/components/App/routes.tsx

@@ -4,12 +4,14 @@ import { Route, Switch } from "react-router-dom";
 import { CartPage, CheckoutLogin, HomePage, ProductPage } from "..";
 import ArticlePage from "../../views/Article";
 import CategoryPage from "../../views/Category";
+import { CollectionPage } from "../../views/Collection";
 import SearchPage from "../../views/Search";
 import { NotFound } from "../NotFound";
 
 export const baseUrl = "/";
 export const searchUrl = `${baseUrl}search/`;
 export const categoryUrl = `${baseUrl}category/:slug([a-z-]+)/:id([0-9]+)/`;
+export const collectionUrl = `${baseUrl}collection/:slug([a-z-]+)/:id([0-9]+)/`;
 export const productUrl = `${baseUrl}product/:slug([a-z-]+)/:id([0-9]+)/`;
 export const cartUrl = `${baseUrl}cart/:token/`;
 export const checkoutLoginUrl = `${baseUrl}login/`;
@@ -20,6 +22,7 @@ export const Routes: React.SFC = () => (
     <Route exact path={baseUrl} component={HomePage} />
     <Route path={searchUrl} component={SearchPage} />
     <Route path={categoryUrl} component={CategoryPage} />
+    <Route path={collectionUrl} component={CollectionPage} />
     <Route path={productUrl} component={ProductPage} />
     <Route path={cartUrl} component={CartPage} />
     <Route path={checkoutLoginUrl} component={CheckoutLogin} />

src/components/Breadcrumbs/index.tsx

@@ -1,28 +1,50 @@
+import "./scss/index.scss";
+
 import * as React from "react";
 import { Link } from "react-router-dom";
 
+import { getDBIdFromGraphqlId, slugify } from "../../core/utils";
+import { Category_category } from "../../views/Category/types/Category";
 import { baseUrl } from "../App/routes";
 
-import "./scss/index.scss";
-
 export interface Breadcrumb {
   value: string;
   link: string;
 }
 
+export const extractBreadcrumbs = (category: Category_category) => {
+  const constructLink = item => ({
+    link: [
+      `/category`,
+      `/${slugify(item.name)}`,
+      `/${getDBIdFromGraphqlId(item.id, "Category")}/`
+    ].join(""),
+    value: item.name
+  });
+
+  let breadcrumbs = [constructLink(category)];
+
+  if (category.ancestors.edges.length) {
+    const ancestorsList = category.ancestors.edges.map(constructLink);
+    breadcrumbs = ancestorsList.concat(breadcrumbs);
+  }
+  return breadcrumbs;
+};
+
 const Breadcrumbs: React.SFC<{
   breadcrumbs: Breadcrumb[];
-}> = ({ breadcrumbs }) => (
-  <ul className="breadcrumbs">
-    <li>
-      <Link to={baseUrl}>Home</Link>
-    </li>
-    {breadcrumbs.map(breadcrumb => (
-      <li key={breadcrumb.value}>
-        <Link to={breadcrumb.link}>{breadcrumb.value}</Link>
+}> = ({ breadcrumbs }) => {
+  return (
+    <ul className="breadcrumbs">
+      <li>
+        <Link to={baseUrl}>Home</Link>
       </li>
-    ))}
-  </ul>
-);
-
+      {breadcrumbs.map(breadcrumb => (
+        <li key={breadcrumb.value}>
+          <Link to={breadcrumb.link}>{breadcrumb.value}</Link>
+        </li>
+      ))}
+    </ul>
+  );
+};
 export default Breadcrumbs;

src/components/Carousel/index.tsx

@@ -6,6 +6,8 @@ import ReactSVG from "react-svg";
 import { mediumScreen, smallScreen } from "../App/scss/variables.scss";
 import "./scss/index.scss";
 
+const arrowSvg = require("../../images/carousel-arrow.svg");
+
 interface CarouselType extends CarouselProps {
   children: React.ReactNode;
 }
@@ -20,7 +22,7 @@ const Carousel: React.SFC<CarouselType> = ({ children, ...rest }) => {
           onClick={previousSlide}
           className="carousel__control carousel__control--left"
         >
-          <ReactSVG path={require("../../images/carousel-arrow.svg")} />
+          <ReactSVG path={arrowSvg} />
         </div>
       ) : null,
     renderCenterRightControls: ({
@@ -34,7 +36,7 @@ const Carousel: React.SFC<CarouselType> = ({ children, ...rest }) => {
           onClick={nextSlide}
           className="carousel__control carousel__control--right"
         >
-          <ReactSVG path={require("../../images/carousel-arrow.svg")} />
+          <ReactSVG path={arrowSvg} />
         </div>
       ) : null,
     ...rest

src/components/CartOverlay/index.tsx

@@ -1,10 +1,12 @@
+import "./scss/index.scss";
+
 import * as React from "react";
 import { ApolloConsumer } from "react-apollo";
 import { Link } from "react-router-dom";
 import ReactSVG from "react-svg";
 
 import { Button } from "..";
-import { priceToString } from "../../core/utils";
+import { maybe, priceToString } from "../../core/utils";
 import { checkoutLoginUrl } from "../App/routes";
 import { CartContext } from "../CartProvider/context";
 import { Error } from "../Error";
@@ -21,7 +23,10 @@ import Offline from "../Offline";
 import OfflinePlaceholder from "../OfflinePlaceholder";
 import Online from "../Online";
 
-import "./scss/index.scss";
+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 = () => (
   <OverlayContext.Consumer>
@@ -50,7 +55,7 @@ export const CartOverlay: React.SFC = () => (
                       <div className="cart">
                         <div className="overlay__header">
                           <ReactSVG
-                            path={require("../../images/cart.svg")}
+                            path={cartSvg}
                             className="overlay__header__cart-icon"
                           />
                           <div className="overlay__header-text">
@@ -60,7 +65,7 @@ export const CartOverlay: React.SFC = () => (
                             </span>
                           </div>
                           <ReactSVG
-                            path={require("../../images/x.svg")}
+                            path={closeSvg}
                             onClick={() => overlay.hide()}
                             className="overlay__header__close-icon"
                           />
@@ -74,24 +79,23 @@ export const CartOverlay: React.SFC = () => (
                                   className="cart__list__item"
                                 >
                                   <CachedImage
-                                    url={
-                                      line.variant.product.thumbnailUrl ||
-                                      require("../../images/nophoto.png")
-                                    }
-                                    url2x={line.variant.product.thumbnailUrl2x}
+                                    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>{"Qty: " + line.quantity}</span>
                                     </span>
                                     <ReactSVG
-                                      path={require("../../images/garbage.svg")}
+                                      path={removeSvg}
                                       className="cart__list__item__details__delete-icon"
                                       onClick={() =>
                                         cart.remove(line.variant.id)

src/components/CartPage/index.tsx

@@ -1,3 +1,5 @@
+import "./scss/index.scss";
+
 import * as React from "react";
 import { ApolloConsumer, Query } from "react-apollo";
 import Media from "react-media";
@@ -6,18 +8,20 @@ import { Link } from "react-router-dom";
 import ReactSVG from "react-svg";
 
 import { Button, Loader } from "..";
-import { getCheckout } from "../../core/types/saleor";
+import { maybe } from "../../core/utils";
 import { checkoutLoginUrl } from "../App/routes";
+import { smallScreen } from "../App/scss/variables.scss";
+import CachedImage from "../CachedImage";
 import { CartContext } from "../CartProvider/context";
 import { GET_CHECKOUT } from "../CheckoutApp/queries";
+import { getCheckout } from "../CheckoutApp/types/getCheckout";
 import { Error } from "../Error";
 import { GoToCheckout } from "../GoToCheckout";
 import { UserContext } from "../User/context";
 import { EmptyCart } from "./EmptyCart";
 
-import { smallScreen } from "../App/scss/variables.scss";
-import CachedImage from "../CachedImage";
-import "./scss/index.scss";
+const noPhotoPng = require("../../images/nophoto.png");
+const removeSvg = require("../../images/garbage.svg");
 
 const canDisplay = (data: getCheckout) =>
   data && data.checkout && data.checkout.lines && data.checkout.subtotalPrice;
@@ -67,11 +71,13 @@ const CartPage: React.SFC<RouteComponentProps<{ token }>> = ({
                               query={{ minWidth: smallScreen }}
                               render={() => (
                                 <CachedImage
-                                  url={
-                                    line.variant.product.thumbnailUrl ||
-                                    require("../../images/nophoto.png")
-                                  }
-                                  url2x={line.variant.product.thumbnailUrl2x}
+                                  url={maybe(
+                                    () => line.variant.product.thumbnail.url,
+                                    noPhotoPng
+                                  )}
+                                  url2x={maybe(
+                                    () => line.variant.product.thumbnail2x.url
+                                  )}
                                 />
                               )}
                             />
@@ -93,7 +99,7 @@ const CartPage: React.SFC<RouteComponentProps<{ token }>> = ({
                             <CartContext.Consumer>
                               {({ remove }) => (
                                 <ReactSVG
-                                  path={require("../../images/garbage.svg")}
+                                  path={removeSvg}
                                   className="cart__list__item__details__delete-icon"
                                   onClick={() => remove(line.variant.id)}
                                 />
@@ -122,7 +128,7 @@ const CartPage: React.SFC<RouteComponentProps<{ token }>> = ({
                           <ApolloConsumer>
                             {client => (
                               <GoToCheckout apolloClient={client}>
-                                Checkout
+                                Checkout{" "}
                               </GoToCheckout>
                             )}
                           </ApolloConsumer>

src/components/CartProvider/index.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { ApolloClient } from "apollo-client";
 import { GET_CHECKOUT, UPDATE_CHECKOUT_LINE } from "../CheckoutApp/queries";
-import { GET_PRODUCTS_VARIANTS } from "../ProductPage/queries";
+import { productVariatnsQuery } from "../ProductPage/queries";
 import { CartContext, CartInterface, CartLineInterface } from "./context";
 
 export default class CartProvider extends React.Component<
@@ -93,7 +93,7 @@ export default class CartProvider extends React.Component<
       let data: { [key: string]: any };
       let lines;
       const response = await apolloClient.query({
-        query: GET_PRODUCTS_VARIANTS,
+        query: productVariatnsQuery,
         variables: { ids: cart.map(line => line.variantId) }
       });
       const quantityMapping = cart.reduce((obj, line) => {

src/components/CartSummary/index.tsx

@@ -1,10 +1,13 @@
+import "./scss/index.scss";
+
 import * as React from "react";
 
+import { maybe } from "../../core/utils";
 import { CheckoutContext } from "../CheckoutApp/context";
 
-import "./scss/index.scss";
+const noPhotoPng = require("../../images/nophoto.png");
 
-const CartSummary: React.SFC<{}> = () => (
+const CartSummary: React.SFC = () => (
   <CheckoutContext.Consumer>
     {({ checkout }) =>
       checkout ? (
@@ -13,10 +16,10 @@ const CartSummary: React.SFC<{}> = () => (
           {checkout.lines.map(product => (
             <div key={product.id} className="cart-summary__product-item">
               <img
-                src={
-                  product.variant.product.thumbnailUrl ||
-                  require("../../images/nophoto.png")
-                }
+                src={maybe(
+                  () => product.variant.product.thumbnail.url,
+                  noPhotoPng
+                )}
               />
               <div>
                 <p>{product.variant.price.localized}</p>

src/components/CheckoutApp/context.ts

@@ -1,14 +1,14 @@
 import { createContext } from "react";
 
-import { CheckoutInterface } from "../../core/types";
+import { Checkout } from "./types/Checkout";
 
 export interface CheckoutContextInterface {
   cardData?: {
     lastDigits: string;
     ccType: string;
     token: string;
   };
-  checkout?: CheckoutInterface;
+  checkout?: Checkout;
   loading?: boolean;
   shippingAsBilling?: boolean;
   updateCheckout?(chekcoutData: CheckoutContextInterface): void;

src/components/CheckoutApp/queries.ts

@@ -107,8 +107,13 @@ export const CHECKOUT_FRAGMENT = gql`
         product {
           id
           name
-          thumbnailUrl
-          thumbnailUrl2x: thumbnailUrl(size: 510)
+          thumbnail {
+            url
+            alt
+          }
+          thumbnail2x: thumbnail(size: 510){
+            url
+          }
         }
       }
       quantity

src/components/CheckoutApp/types/Checkout.ts

@@ -152,12 +152,23 @@ export interface Checkout_lines_variant_price {
   localized: string;
 }
 
+export interface Checkout_lines_variant_product_thumbnail {
+  __typename: "Image";
+  url: string;
+  alt: string | null;
+}
+
+export interface Checkout_lines_variant_product_thumbnail2x {
+  __typename: "Image";
+  url: string;
+}
+
 export interface Checkout_lines_variant_product {
   __typename: "Product";
   id: string;
   name: string;
-  thumbnailUrl: string | null;
-  thumbnailUrl2x: string | null;
+  thumbnail: Checkout_lines_variant_product_thumbnail | null;
+  thumbnail2x: Checkout_lines_variant_product_thumbnail2x | null;
 }
 
 export interface Checkout_lines_variant {

src/components/CheckoutApp/types/getCheckout.ts

@@ -152,12 +152,23 @@ export interface getCheckout_checkout_lines_variant_price {
   localized: string;
 }
 
+export interface getCheckout_checkout_lines_variant_product_thumbnail {
+  __typename: "Image";
+  url: string;
+  alt: string | null;
+}
+
+export interface getCheckout_checkout_lines_variant_product_thumbnail2x {
+  __typename: "Image";
+  url: string;
+}
+
 export interface getCheckout_checkout_lines_variant_product {
   __typename: "Product";
   id: string;
   name: string;
-  thumbnailUrl: string | null;
-  thumbnailUrl2x: string | null;
+  thumbnail: getCheckout_checkout_lines_variant_product_thumbnail | null;
+  thumbnail2x: getCheckout_checkout_lines_variant_product_thumbnail2x | null;
 }
 
 export interface getCheckout_checkout_lines_variant {