Redux workshop solution 0

package.json

@@ -3,18 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "babel-cli": "6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "body-parser": "^1.18.2",
     "bootstrap": "^4.0.0",
     "classnames": "^2.2.5",
     "express": "^4.16.2",
+    "lodash": "4.17.10",
     "mongoose": "^4.13.6",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.0.17",
     "reactstrap": "^5.0.0-beta.3",
+    "redux": "^4.0.0",
+    "redux-thunk": "^2.2.0",
     "uuid": "^3.1.0"
   },
   "devDependencies": {

src/client/components/AddToCart.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { bindActionCreators } from "redux";
+import { connect } from "react-redux";
+import { Button } from "reactstrap";
+import * as actionCreators from "../redux/actions";
+
+class AddToCart extends React.Component {
+  render() {
+    const {
+      actions: { addItemsToCart },
+      cartItems: { isLoading },
+      product
+    } = this.props;
+    return (
+      <Button
+        className="mt-4"
+        color="primary"
+        onClick={() => addItemsToCart(product)}
+      >
+        Add to cart
+      </Button>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  cartItems: state.cartItems
+});
+
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators(actionCreators, dispatch)
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddToCart);

src/client/components/App.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import Home from "./Home";
+import Products from "./Products";
+import Product from "./Product";
+import Cart from "./Cart";
+import Header from "./Header";
+import { Container } from "reactstrap";
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <Header location={this.props.location} />
+        <Container className="mt-5">
+          <Switch>
+            <Route exact path="/" component={Home} />
+            <Route exact path="/products" component={Products} />
+            <Route exact path="/products/:id(\d+)" component={Product} />
+            <Route exact path="/products/:brand(\w+)" component={Products} />
+            <Route path="/cart" component={Cart} />
+          </Switch>
+        </Container>
+      </div>
+    );
+  }
+}

src/client/components/Cart.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { ListGroup, ListGroupItem, Alert } from "reactstrap";
+import DeleteCartItem from "./DeleteCartItem";
+import { connect } from "react-redux";
+
+function CartItem({ cartItem }) {
+  return (
+    <ListGroupItem>
+      <div className="row">
+        <div className="col-auto mr-auto">{cartItem.product.name}</div>
+        <div className="col-auto">
+          <DeleteCartItem id={cartItem.id} />
+        </div>
+      </div>
+    </ListGroupItem>
+  );
+}
+
+export class Cart extends React.Component {
+  render() {
+    const { cartItems } = this.props;
+    if (!cartItems.ids.length) {
+      return <Alert color="primary">Cart is empty</Alert>;
+    }
+    return (
+      <ListGroup>
+        {Object.values(cartItems.byId).map(cartItem => (
+          <CartItem key={cartItem.id} cartItem={cartItem} />
+        ))}
+      </ListGroup>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  cartItems: state.cartItems
+});
+
+export default connect(mapStateToProps)(Cart);

src/client/components/CartBadge.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { bindActionCreators } from "redux";
+import { connect } from "react-redux";
+import * as actions from "../redux/actions";
+import { Badge } from "reactstrap";
+
+class CartBadge extends React.Component {
+  componentDidMount() {
+    const { actions } = this.props;
+    actions.getCartItems();
+  }
+
+  render() {
+    const { cartItems } = this.props;
+    if (!cartItems.ids.length) {
+      return null;
+    }
+    return cartItems.ids.length ? (
+      <Badge color="dark">{cartItems.ids.length}</Badge>
+    ) : null;
+  }
+}
+
+const mapStateToProps = state => ({
+  cartItems: state.cartItems
+});
+
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators(actions, dispatch)
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(CartBadge);

src/client/components/DeleteCartItem.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+export default class DeleteCartItem extends React.Component {
+  render() {
+    return <img src="/img/trash-o.svg" alt="delete" />;
+  }
+}

src/client/components/Header.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { Navbar, NavbarBrand, Nav, NavItem } from "reactstrap";
+import { Link } from "react-router-dom";
+import classnames from "classnames";
+import CartBadge from "./CartBadge";
+
+export default class Header extends React.Component {
+  render() {
+    const { location: { pathname } } = this.props;
+    return (
+      <div>
+        <Navbar color="light" light expand="md">
+          <NavbarBrand href="/">Apollo Store</NavbarBrand>
+          <Nav className="ml-auto" navbar>
+            <NavItem>
+              <Link
+                className={classnames("nav-link", {
+                  active: pathname === "/products"
+                })}
+                to="/products"
+              >
+                Products
+              </Link>
+            </NavItem>
+            <NavItem>
+              <Link
+                className={classnames("nav-link", {
+                  active: pathname === "/products/samsung"
+                })}
+                to="/products/samsung"
+              >
+                Samsung
+              </Link>
+            </NavItem>
+            <NavItem>
+              <Link
+                className={classnames("nav-link", {
+                  active: pathname === "/products/apple"
+                })}
+                to="/products/apple"
+              >
+                Apple
+              </Link>
+            </NavItem>
+            <NavItem>
+              <Link
+                className={classnames("nav-link", {
+                  active: pathname === "/cart"
+                })}
+                to="/cart"
+              >
+                Cart <CartBadge />
+              </Link>
+            </NavItem>
+          </Nav>
+        </Navbar>
+      </div>
+    );
+  }
+}

src/client/components/Home.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+export default class Home extends React.Component {
+  render() {
+    return <div>Welcome to apollo store</div>;
+  }
+}

src/client/components/Price.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Price({ value }) {
+  return <span>&#8377; {value}</span>;
+}

src/client/components/Product.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { bindActionCreators } from "redux";
+import { connect } from "react-redux";
+import { Media } from "reactstrap";
+import * as actionCreators from "../redux/actions";
+import AddToCart from "./AddToCart";
+import Price from "./Price";
+
+class Product extends React.Component {
+  componentDidMount() {
+    const { product, actions, match } = this.props;
+    if (!product) {
+      const productId = parseInt(match.params.id, 10);
+      actions.getProducts(productId);
+    }
+  }
+
+  render() {
+    const { products, match } = this.props;
+    const productId = parseInt(match.params.id, 10);
+    const product = products.ids.length && products.byId[productId];
+    if (!product) {
+      return null;
+    }
+    return (
+      <Media>
+        <Media left>
+          <img src={product.url} alt="product" />
+        </Media>
+        <Media body>
+          <Media heading>{product.name}</Media>
+          <div>{product.description}</div>
+          <div>
+            Price: <Price value={product.price} />
+          </div>
+          <AddToCart product={product} />
+        </Media>
+      </Media>
+    );
+  }
+}
+
+const mapStateToProps = (state, props) => ({
+  products: state.products
+});
+
+const mapDisptachToProps = dispatch => ({
+  actions: bindActionCreators(actionCreators, dispatch)
+});
+
+export default connect(mapStateToProps, mapDisptachToProps)(Product);

src/client/components/ProductSelect.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+export default class ProductSelect extends React.Component {
+  render() {
+    return <input type="checkbox" className="mr-4" />;
+  }
+}

src/client/components/Products.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { bindActionCreators } from "redux";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import { ListGroup, ListGroupItem } from "reactstrap";
+import * as productActionCreators from "../redux/actions";
+import Price from "./Price";
+import ProductSelect from "./ProductSelect";
+
+function Product({ product }) {
+  return (
+    <ListGroupItem>
+      <div className="row">
+        <div className="col-auto mr-auto">
+          <ProductSelect product={product} />
+          <Link to={`/products/${product.id}`}>{product.name}</Link>
+        </div>
+        <div className="col-auto">
+          <Price value={product.price} />
+        </div>
+      </div>
+    </ListGroupItem>
+  );
+}
+
+class Products extends React.Component {
+  componentDidMount() {
+    const { productActions, match } = this.props;
+    const brand = match.params.brand;
+    productActions.getProducts(brand);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { match, productActions } = this.props;
+    if (nextProps.match.params.brand !== match.params.brand) {
+      productActions.getProducts(nextProps.match.params.brand);
+    }
+  }
+
+  render() {
+    const { products } = this.props;
+    return (
+      <div>
+        Products
+        <ListGroup>
+          {Object.values(products.byId).map(product => (
+            <Product key={product.id} product={product} />
+          ))}
+        </ListGroup>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  products: state.products
+});
+
+const mapDispatchToProps = dispatch => ({
+  productActions: bindActionCreators(productActionCreators, dispatch)
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Products);

src/client/redux/actionTypes/index.js

@@ -0,0 +1,9 @@
+export const GET_PRODUCTS_REQUEST = "GET_PRODUCTS_REQUEST";
+export const GET_PRODUCTS_SUCCESS = "GET_PRODUCTS_SUCCESS";
+export const GET_PRODUCTS_FAILURE = "GET_PRODUCTS_SUCCESS";
+export const GET_CART_ITEMS_REQUEST = "GET_CART_ITEMS_REQUEST";
+export const GET_CART_ITEMS_SUCCESS = "GET_CART_ITEMS_SUCCESS";
+export const GET_CART_ITEMS_FAILURE = "GET_CART_ITEMS_FAILURE";
+export const ADD_ITEMS_TO_CART_REQUEST = "ADD_ITEMS_TO_CART_REQUEST";
+export const ADD_ITEMS_TO_CART_SUCCESS = "ADD_ITEMS_TO_CART_SUCCESS";
+export const ADD_ITEMS_TO_CART_FAILURE = "ADD_ITEMS_TO_CART_FAILURE";