Merge pull request #1 from ScalaConsultants/devel

Devel

.eslintrc

@@ -29,6 +29,7 @@
     "no-trailing-spaces": [1, { "skipBlankLines": true }],
     "no-unreachable": 1,
     "no-alert": 0,
+    "semi": ["error", "never"],
     "react/jsx-uses-react": 1,
     "react/jsx-uses-vars": 1
   }

README.md

@@ -1,4 +1,4 @@
-# ![](https://img.shields.io/badge/version-0.0.1-blue.svg)
+# ![](https://img.shields.io/badge/version-0.0.2-blue.svg)
 
 # Example React App - Online shop
 
@@ -17,17 +17,24 @@ Project scaffold is generated by [https://github.com/react-webpack-generators/ge
 
 ## TODO
 
-* [ ] display number of same items in cart instead of list them separately
+### Features
+
 * [ ] possibility to chose how many products add to cart
-* [ ] RWD
+* [ ] visible adding to cart effect
 * [ ] number of items in cart displayed near cart icon
-* [x] highlight active sort button
-* [ ] delete unnecessary, once used styled components
-* [ ] clear code
-* [ ] divide components into presentational and container components
+* [ ] add products images
+* [ ] write 'real' products data and add more products
+
+### Code
+
 * [ ] add Redux middleware for async data loading
+* [ ] improve css code (eg rem, em instead of px)
+* [ ] delete unnecessary, once used styled components
 * [ ] add comments describing what things do
-* [ ] write 'real' products data and add more
-* [ ] add products images
-* [ ] improve app style
+* [ ] divide components into presentational and container components
+
+### Style
+
+* [ ] RWD
 * [ ] change favicon
+* [ ] improve general app style

src/components/App/App.js

@@ -1,8 +1,8 @@
-require('normalize.css/normalize.css');
-require('./App.css');
+require('normalize.css/normalize.css')
+require('./App.css')
 
-import React from 'react';
-import Navbar from '../Navbar/Navbar';
+import React from 'react'
+import Navbar from '../Navbar/Navbar'
 import { Switch, Route } from 'react-router-dom'
 import Shop from '../../screens/Shop/Shop'
 import ShoppingCart from '../../screens/ShoppingCart/ShoppingCart'
@@ -22,7 +22,7 @@ const App = () => {
       </Switch>
 
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

src/components/Filters/FiltersStyle.js

@@ -1,9 +1,9 @@
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 // language=SCSS prefix=dummy{ suffix=}
 const FiltersStyle = styled.div`
     background-color: rgb(221,221,221);
     padding: 0 40px;
-`;
+`
 
-export default FiltersStyle;
+export default FiltersStyle

src/components/Navbar/CartButton.js

@@ -1,9 +1,9 @@
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 // language=SCSS prefix=dummy{ suffix=}
 const Logo = styled.img`
     margin:8px;
     float:right;
-`;
+`
 
-export default Logo;
+export default Logo

src/components/Navbar/Logo.js

@@ -1,11 +1,11 @@
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 // language=SCSS prefix=dummy{ suffix=}
 const Logo = styled.span`
     color: rgb(255, 255, 255);
     font-size: 46px;
     float: left;
     margin: 15px 0;
-`;
+`
 
-export default Logo;
+export default Logo

src/components/Navbar/Navbar.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import NavbarStyled from './NavbarStyle';
-import Logo from './Logo';
+import NavbarStyled from './NavbarStyle'
+import Logo from './Logo'
 import CartButton from './CartButton'
 import { Link } from 'react-router-dom'
 

src/components/Navbar/NavbarStyle.js

@@ -1,10 +1,10 @@
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 // language=SCSS prefix=dummy{ suffix=}
 const NavbarStyle = styled.div`
     height: 80px;
     background-color: rgb(24,24,24);
   padding:0 180px;
-`;
+`
 
-export default NavbarStyle;
+export default NavbarStyle

src/components/ProductsList/ListElement/ListElement.js

@@ -4,7 +4,7 @@ import categories from '../../../data/categories'
 
 const ListElement = (props) => {
 
-  const category = categories.filter(category => category.id === props.product.category)[0].name
+  const category = categories.find(category => category.id === props.product.category).name
 
   return (
       <ListElementStyle>

src/components/ProductsList/ListElement/ListElementStyle.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 // language=SCSS prefix=dummy{ suffix=}
 const ListElement = styled.li`
@@ -34,6 +34,6 @@ const ListElement = styled.li`
     & p{
       color:black;
     }
-`;
+`
 
-export default ListElement;
+export default ListElement

src/components/ProductsList/ProductListStyle.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 // language=SCSS prefix=dummy{ suffix=}
 const ProductsListStyle = styled.div`
@@ -7,6 +7,6 @@ const ProductsListStyle = styled.div`
   & ul{
     padding: 0 20px;
   }
-`;
+`
 
-export default ProductsListStyle;
+export default ProductsListStyle

src/components/ProductsList/ProductsList.js

@@ -22,7 +22,7 @@ const ProductsList = (props) => {
   }
 
   const productsList = products.sort(sortProducts(props.sortProductsType)).map((product) =>
-    <Link to={`/${product.id}`}>
+    <Link key={product.id} to={`/${product.id}`}>
       <ListElement product={product}/>
     </Link>
   )

src/data/categories.js

@@ -13,4 +13,4 @@ const categories = [
   }
 ]
 
-export default categories;
+export default categories

src/data/products.js

@@ -46,4 +46,4 @@ const products = [
   }
 ]
 
-export default products;
+export default products

src/index.js

@@ -1,7 +1,7 @@
-import 'core-js/fn/object/assign';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './components/App/App';
+import 'core-js/fn/object/assign'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './components/App/App'
 import { BrowserRouter } from 'react-router-dom'
 import store from './store'
 import {Provider} from 'react-redux'

src/screens/ProductDetails/ProductDetails.js

@@ -16,8 +16,8 @@ const mapDispatchToProps = (dispatch) => {
 const ProductDetails = (props) => {
 
   const id = parseInt(props.match.params.id, 10)
-  const product = products.filter(product => product.id === id)[0]
-  const category = categories.filter(category => category.id === product.category)[0].name
+  const product = products.find(product => product.id === id)
+  const category = categories.find(category => category.id === product.category).name
 
   return (
     <Screen>
@@ -27,7 +27,7 @@ const ProductDetails = (props) => {
       <p>Category: {category}</p>
       <p>Description: {product.desc}</p>
 
-      <Button onClick={() => props.addToCart(product.id,2)}>
+      <Button onClick={() => props.addToCart(product.id)}>
         Add to cart
       </Button>
 

src/screens/Shop/Shop.js

@@ -3,7 +3,6 @@ import Screen from '../../styledComponents/Screen'
 import Filters from '../../components/Filters/Filters'
 import ProductsList from '../../components/ProductsList/ProductsList'
 
-
 const Shop = () => {
     return (
       <Screen>

src/screens/ShoppingCart/ShoppingCart.js

@@ -4,7 +4,7 @@ import Screen from '../../styledComponents/Screen'
 import Button from '../../styledComponents/Button'
 import { Link } from 'react-router-dom'
 import {removeFromCart} from './actionCreators'
-import products from '../../data/products'
+import productsData from '../../data/products'
 import ShoppingCartList from './ShoppingCartList'
 
 const mapDispatchToProps = (dispatch) => {
@@ -17,30 +17,58 @@ const mapStateTopProps = (state) => ({
   productsInCart:state.shoppingCart.productsInCart
 })
 
+
 const ShoppingCart = (props) => {
-  let sum = 0;
+
+  const products= {}
+
+  props.productsInCart.map(product => {
+    products[product] ? products[product]++ : products[product] = 1
+  })
+
+  let sum = 0
+  let productsTable = []
+
+  for(const product in products){
+
+    const name =
+      productsData.find(
+        prod => prod.id === parseInt(product)
+      ).name
+
+    const price =
+      productsData.find(
+        prod => prod.id === parseInt(product)
+      ).price
+
+    sum += price * products[product]
+
+    productsTable.push([name,price,products[product],parseInt(product)])
+  }
+
     return (
       <Screen>
         <h2>Your Shopping Cart:</h2>
 
         <ShoppingCartList>
-        {props.productsInCart.length!== 0 ? props.productsInCart.map(
+
+        {productsTable.length!== 0 ? productsTable.map(
           product =>
-            <li>
+            <li key={product[3]}>
               <span className="productName">
-                {products.filter( prod => prod.id === product).map(product => product.name)}
+                {product[0]}
+              </span>
+
+              <span>
+                quantity: {product[2]}
               </span>
 
               <div className="price">
                 <span>
-                  price: {products.filter( prod => prod.id === product).map(product => {
-                  sum+= product.price
-                  return product.price
-                  }
-                )}
+                  price: {product[1]}
                 </span>
 
-                <Button onClick={() => props.removeFromCart(product)}>
+                <Button onClick={() => props.removeFromCart(product[3])}>
                   remove
                 </Button>
               </div>

src/screens/ShoppingCart/ShoppingCartList.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 // language=SCSS prefix=dummy{ suffix=}
 const ShoppingCartList = styled.ul`
@@ -14,6 +14,6 @@ const ShoppingCartList = styled.ul`
     & .price{
       float:right;
     }
-`;
+`
 
-export default ShoppingCartList;
+export default ShoppingCartList

src/styledComponents/Button.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 // language=SCSS prefix=dummy{ suffix=}
 const Button = styled.button`
@@ -8,6 +8,14 @@ const Button = styled.button`
     background-color: transparent;
     font-size: 16px;
     box-shadow: ${props => props.active ? 'inset 0 0 4px 1px #848484' : 'none'};
-`;
+    
+    &:hover{
+      box-shadow: inset 0 0 2px 1px #9b9b9b;
+    }
+    
+    &:active{
+      box-shadow: inset 0 0 10px 1px #919191;
+    }
+`
 
-export default Button;
+export default Button

src/styledComponents/Screen.js

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 // language=SCSS prefix=dummy{ suffix=}
 const Screen = styled.section`
   padding: 30px 180px;
-`;
+`
 
-export default Screen;
+export default Screen