Skip to content
This repository has been archived by the owner on Jul 14, 2022. It is now read-only.

Collection view, categories pagination, thumbnail update #178

Merged
merged 3 commits into from
Dec 28, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/components/App/routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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/`;
Expand All @@ -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} />
Expand Down
50 changes: 36 additions & 14 deletions src/components/Breadcrumbs/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
6 changes: 4 additions & 2 deletions src/components/Carousel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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: ({
Expand All @@ -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
Expand Down
32 changes: 18 additions & 14 deletions src/components/CartOverlay/index.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>
Expand Down Expand Up @@ -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">
Expand All @@ -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"
/>
Expand All @@ -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)
Expand Down
28 changes: 17 additions & 11 deletions src/components/CartPage/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import "./scss/index.scss";

import * as React from "react";
import { ApolloConsumer, Query } from "react-apollo";
import Media from "react-media";
Expand All @@ -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;
Expand Down Expand Up @@ -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
)}
/>
)}
/>
Expand All @@ -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)}
/>
Expand Down Expand Up @@ -122,7 +128,7 @@ const CartPage: React.SFC<RouteComponentProps<{ token }>> = ({
<ApolloConsumer>
{client => (
<GoToCheckout apolloClient={client}>
Checkout
Checkout{" "}
</GoToCheckout>
)}
</ApolloConsumer>
Expand Down
4 changes: 2 additions & 2 deletions src/components/CartProvider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<
Expand Down Expand Up @@ -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) => {
Expand Down
15 changes: 9 additions & 6 deletions src/components/CartSummary/index.tsx
Original file line number Diff line number Diff line change
@@ -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 ? (
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/CheckoutApp/context.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
9 changes: 7 additions & 2 deletions src/components/CheckoutApp/queries.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
15 changes: 13 additions & 2 deletions src/components/CheckoutApp/types/Checkout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
15 changes: 13 additions & 2 deletions src/components/CheckoutApp/types/getCheckout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Loading