Bump hosted-git-info from 2.8.8 to 2.8.9

.env

@@ -0,0 +1,9 @@
+REACT_APP_API_KEY=AIzaSyB4Uu7LcQeFikYHn3KD8tGYO9NUZFlfcIk
+REACT_APP_AUTH_DOMAIN=my-glam-shop.firebaseapp.com
+REACT_APP_DATABASE_URL=https://my-glam-shop.firebaseio.com
+REACT_APP_PROJECT_ID=my-glam-shop
+REACT_APP_STORAGE_BUCKET=my-glam-shop.appspot.com
+REACT_APP_MESSAGING_SENDER_ID=202382612290
+REACT_APP_APP_ID=1:202382612290:web:9f10c9532b88c2c2025adb
+REACT_APP_MEASUREMENT_ID=G-9MCE965PEE
+

.gitignore

@@ -17,7 +17,9 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
+debug.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

.prettierrc

@@ -0,0 +1,3 @@
+{
+    "semi": true
+}

README.md

@@ -7,6 +7,8 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
   Redux
   Redux-logger
   React-redux
+  Reselect
+  Redux-persist
 
 ## Available Scripts
 

package.json

@@ -7,14 +7,18 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "firebase": "^7.12.0",
+    "lodash.memoize": "^4.1.2",
     "node-sass": "^4.13.1",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0",
+    "react-scripts": "4.0.0",
+    "react-stripe-checkout": "^2.6.3",
     "redux": "^4.0.5",
-    "redux-logger": "^3.0.6"
+    "redux-logger": "^3.0.6",
+    "redux-persist": "^6.0.0",
+    "reselect": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

public/_redirects

@@ -0,0 +1,2 @@
+
+/* /index.html  200

renovate.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "config:base"
+  ]
+}

src/App.css

@@ -10,4 +10,8 @@ a {
 
 * {
   box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  display: none;
 }

src/App.js

@@ -1,14 +1,20 @@
 import React, { Component } from "react";
 import "./App.css";
+
+import Header from "./components/header/Header";
+
 import HomePage from "./pages/homepage/HomePage";
 import ShopPage from "./pages/shop/Shop";
 import { Switch, Route, Redirect } from "react-router-dom";
-import Header from "./components/header/Header";
 import SignInSignUp from "./pages/signin&signup/SignIn-SignUp";
+import CheckoutPage from './pages/checkout/CheckoutPage';
+
 // used to store the state of the user in the app
 import { auth, createUserProfileDocument } from "./firebase/firebase.utils";
 import { connect } from "react-redux";
 import { setCurrentUser } from "./redux/user/user.actions";
+import { selectCurrentUser } from './redux/user/user.selectors';
+import { createStructuredSelector } from 'reselect';
 
 class App extends Component {
   // closing subscription once the app unmounts
@@ -46,18 +52,20 @@ class App extends Component {
         <Switch>
           <Route exact path="/" component={HomePage} />
           <Route exact path="/signup" render={() => this.props.currentUser ? (<Redirect to='/'/>) : (<SignInSignUp />)} />
-          <Route path="/shop/:id" component={ShopPage} />
+          <Route path="/shop" component={ShopPage} />
           <Route exact path="/signin" render={() => this.props.currentUser ? (<Redirect to='/'/>) : (<SignInSignUp />)} />
+          <Route exact path="/checkout" component={CheckoutPage} />
         </Switch>
       </div>
     );
   }
 }
 
 //getting the userReducer off of state
-const mapStateToProps = ({ user }) => ({
-  currentUser: user.currentUser
+const mapStateToProps = createStructuredSelector ({
+  currentUser: selectCurrentUser
 });
+
 const mapDispatchToProps = dispatch => ({
   setCurrentUser: user => dispatch(setCurrentUser(user))
 });

src/components/cart-dropdown/Cart-Dropdown.jsx

@@ -1,14 +1,44 @@
-import React from 'react';
+import React from "react";
+import { connect } from "react-redux";
+import CartItem from "../cart-item/CartItem";
+import { selectCartItems } from "../../redux/cart/cart.selectors";
+import { toggleCartHidden } from "../../redux/cart/cart.actions";
+import { createStructuredSelector } from "reselect";
+import { withRouter } from "react-router-dom";
+import CustomButton from "../custom-button/CustomButton";
 
-import CustomButton from '../custom-button/CustomButton';
+import "./Cart-Dropdown.styles.scss";
 
-import './Cart-Dropdown.styles.scss';
+const CartDropdown = ({ cartItems, history, dispatch }) => {
+  return (
+    <div className="cart-dropdown">
 
-const CartDropdown = () => (
-  <div className="cart-dropdown">
-    <div className='cart-items' />
-    <CustomButton>GO TO CHECKOUT</CustomButton>
-  </div>
-)
+      <div className="cart-items">
+        {cartItems.length ? (
+          cartItems.map((cartItem) => (
+            <CartItem key={cartItem.id} item={cartItem} />
+          ))
+        ) : (
+          <span className="empty-message">Your cart is empty</span>
+        )}
+      </div>
 
-export default CartDropdown;
+      <CustomButton
+        onClick={() => {
+          history.push("/checkout");
+          dispatch(toggleCartHidden());
+        }}
+      >
+        GO TO CHECKOUT
+      </CustomButton>
+
+    </div>
+  );
+};
+
+const mapStateToProps = createStructuredSelector({
+  cartItems: selectCartItems,
+});
+
+//Connect passes dispatch to component as prop if we do not supply a 2nd argument to connect
+export default withRouter(connect(mapStateToProps)(CartDropdown));

src/components/cart-dropdown/Cart-Dropdown.styles.scss

@@ -10,13 +10,18 @@
   top: 90px;
   right: 40px;
   z-index: 5;
-  // overflow: hidden;
+
+  .empty-message {
+    font-size: 18px;
+    margin: 50px auto;
+  }
 
   .cart-items {
     height: 240px;
     display: flex;
     flex-direction: column;
-    // overflow: scroll;
+    overflow-y: scroll;
+    overflow-x: hidden;
   }
 
   button {

src/components/cart-icon/CartIcon.jsx

@@ -3,22 +3,26 @@ import React from "react";
 import { connect } from "react-redux";
 
 import { toggleCartHidden } from "../../redux/cart/cart.actions";
+import { selectCartItemsCount } from '../../redux/cart/cart.selectors';
+import { createStructuredSelector } from 'reselect';
 
 import { ReactComponent as ShoppingIcon } from "../../assets/shopping-bag.svg";
 
 import "./CartIcon.styles.scss";
 
-const CartIcon = ({ toggleCartHidden }) => (
+const CartIcon = ({ toggleCartHidden, itemsCount }) => (
   <div className="cart-icon" onClick={toggleCartHidden}>
     <ShoppingIcon className="shopping-icon" />
-    <span className="item-count"> 0 </span>
+    <span className="item-count"> {itemsCount} </span>
   </div>
 );
 
 const mapDispatchToProps = (dispatch) => ({
   toggleCartHidden: () => dispatch(toggleCartHidden()),
 });
-export default connect(
-  null,
-  mapDispatchToProps
-  )(CartIcon);
+
+const mapStateToProps = createStructuredSelector({
+  itemsCount: selectCartItemsCount
+})
+
+export default connect(mapStateToProps,mapDispatchToProps)(CartIcon);

src/components/cart-item/CartItem.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import './CartItem.styles.scss';
+
+const CartItem = ({ item: { imageUrl, name, price, quantity }}) => {
+  return (
+    <div className="cart-item">
+      <img src={imageUrl}  alt='item'/>
+      <div className="item-details">
+        <span className="name">{name}</span>
+  <span className="price">{quantity} x ${price}</span>
+      </div>
+    </div>
+  )
+}
+
+export default CartItem;

src/components/cart-item/CartItem.styles.scss

@@ -0,0 +1,23 @@
+.cart-item {
+  width: 100%;
+  display: flex;
+  height: 80px;
+  margin-bottom: 15px;
+
+  img {
+    width: 30%;
+  }
+
+  .item-details {
+    width: 70%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 10px 20px;
+
+    .name {
+      font-size: 16px;
+    }
+  }
+}

src/components/checkout-item/CheckoutItem.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { connect } from 'react-redux';
+import { clearItem, removeItem, addItem } from '../../redux/cart/cart.actions'
+
+import "./CheckoutItem.styles.scss";
+
+const CheckoutItem = ({cartItem, clearItem, removeItem, addItem}) => {
+  const { name, imageUrl, price, quantity } = cartItem;
+  return (
+    <div className="checkout-item">
+      <div className="image-container">
+        <img alt="product" src={imageUrl} />
+      </div>
+
+      <span className="name">{name}</span>
+      <span className="quantity">
+
+        <div className="arrow" onClick={() => removeItem(cartItem)}>&#10094;</div>
+        <span className="value"> {quantity} </span>
+        <div className="arrow" onClick={() => addItem(cartItem)}>&#10095;</div>
+
+        </span>
+
+      <span className="price">{price}</span>
+      <div className="remove-button" onClick={() => clearItem(cartItem)}>&#10005;</div>
+    </div>
+  );
+};
+
+const mapDispatchToProps = dispatch => ({
+  clearItem: cartItem => dispatch(clearItem(cartItem)),
+  addItem: cartItem => dispatch(addItem(cartItem)),
+  removeItem: cartItem => dispatch(removeItem(cartItem))
+})
+
+export default connect(null, mapDispatchToProps)(CheckoutItem);

src/components/checkout-item/CheckoutItem.styles.scss

@@ -0,0 +1,40 @@
+.checkout-item {
+  width: 100%;
+  display: flex;
+  min-height: 100px;
+  border-bottom: 1px solid darkgrey;
+  padding: 15px 0;
+  font-size: 20px;
+  align-items: center;
+
+  .image-container {
+    width: 23%;
+    padding-right: 15px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .name,
+  .quantity,
+  .price {
+    width: 23%;
+  }
+
+  .quantity {
+    display: flex;
+
+    .arrow {
+      cursor: pointer;
+    }
+    .value {
+      margin: 0 10px;
+    }
+  }
+
+  .remove-button {
+    padding-left: 12px;
+    cursor: pointer;
+  }
+}

src/components/collection-item/CollectionItem.jsx

@@ -1,8 +1,12 @@
 import React from "react";
+import { connect } from 'react-redux';
+import { addItem } from '../../redux/cart/cart.actions';
 import CustomButton from '../custom-button/CustomButton';
 import "./CollectionItem.styles.scss";
 
-const CollectionItem = ({ id, name, imageUrl, price }) => (
+const CollectionItem = ({ item, addItem }) => {
+  const { name, imageUrl, price } = item;
+  return (
   <div className="collection-item" >
     <div
       className="image"
@@ -14,8 +18,12 @@ const CollectionItem = ({ id, name, imageUrl, price }) => (
         <span className="name">{name}</span>
         <span className="price">{price}</span>
       </div>
-      <CustomButton className="custom-button" inverted>Add to cart</CustomButton>
+      <CustomButton onClick={() => addItem(item)} className="custom-button" inverted>Add to cart</CustomButton>
   </div>
-);
+  )}
 
-export default CollectionItem;
+const mapDispatchToProps = (dispatch) => ({
+  addItem: item => dispatch(addItem(item))
+})
+
+export default connect(null, mapDispatchToProps)(CollectionItem);