Merge pull request #2 from Rhymond/responsiveFixes

Pretify code

src/actions/product.js

@@ -1,18 +1,17 @@
-import * as types from '../constants/types';
+import * as types from '../constants/types'
 
-export function getProducts() {
-  return dispatch => {
+export const getProducts = () =>
+  dispatch =>
     fetch(`products.json`)
       .then(response => response.json())
       .then(response => {
         dispatch({
           type: types.FETCH_PRODUCTS,
           payload: response.products
-        });
+        })
       })
-  }
-}
 
-export function compare(product) {
-  return {type: types.COMPARE_PRODUCT, product};
-}
+export const compare = product => ({
+    type: types.COMPARE_PRODUCT,
+    product
+  })

src/components/Compare/index.js

@@ -43,6 +43,6 @@ const Compare = ({products}) =>
         </tbody>
       </table>
     </div>
-  </div>;
+  </div>
 
-export default Compare;
+export default Compare

src/components/Product/index.js

@@ -17,6 +17,6 @@ const Product = ({product, compare}) =>
                 </div>
             </div>
         </div>
-    </div>;
+    </div>
 
-export default Product;
+export default Product

src/components/ProductList/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Product} from '../';
+import {Product} from '../'
 
 const ProductList = ({products, compare}) =>
   <div>
@@ -8,6 +8,6 @@ const ProductList = ({products, compare}) =>
           <Product key={product.id} product={product} compare={compare} />
         )}
     </div>
-  </div>;
+  </div>
 
-export default ProductList;
+export default ProductList

src/constants/types.js

@@ -1,2 +1,2 @@
-export const FETCH_PRODUCTS = 'FETCH_PRODUCTS';
-export const COMPARE_PRODUCT = 'COMPARE_PRODUCT';
+export const FETCH_PRODUCTS = 'FETCH_PRODUCTS'
+export const COMPARE_PRODUCT = 'COMPARE_PRODUCT'

src/containers/App/index.js

@@ -1,19 +1,21 @@
-import React, {Component} from 'react';
+import React, {Component} from 'react'
 import {Route, Switch} from 'react-router-dom'
 
-import {Home, NotFound} from '../';
+import {Home, NotFound} from '../'
 
-export default class App extends Component {
+class App extends Component {
   render() {
     return (
-      <div className="App">
+      <div className="app">
         <div className="container mt-4">
           <Switch>
             <Route exact path="/" component={Home}/>
             <Route component={NotFound}/>
           </Switch>
         </div>
       </div>
-    );
+    )
   }
 }
+
+export default App

src/containers/Home/index.js

@@ -1,40 +1,34 @@
-import React from 'react';
-import {bindActionCreators} from 'redux';
-import {Compare, ProductList} from '../../components';
-import * as productActions from '../../actions';
-import {connect} from 'react-redux';
+import React, {Component} from 'react'
+import {bindActionCreators} from 'redux'
+import {Compare, ProductList} from '../../components'
+import * as productActions from '../../actions/product'
+import {connect} from 'react-redux'
 
-class Home extends React.Component {
+class Home extends Component {
   componentWillMount() {
-    this.props.actions.getProducts();
+    this.props.actions.getProducts()
   }
 
   render() {
-    const {products, actions} = this.props;
-    const compareProducts = products.filter(product => product.compare);
+    const {products, actions} = this.props
+    const compareProducts = products.filter(product => product.compare)
 
     return (
-      <div className="Home mt-5">
+      <div className="home mt-5">
         <ProductList products={products} compare={actions.compare}/>
-        {compareProducts.length >= 2 ? <Compare products={compareProducts}/> : null}
+        {compareProducts.length >= 2 &&
+          <Compare products={compareProducts}/>
+        }
       </div>
-    );
+    )
   }
 }
 
-function mapStateToProps(state) {
-  return {
+export default connect(
+  state => ({
     products: state.product.products
-  }
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
+  }),
+  dispatch => ({
     actions: bindActionCreators(productActions, dispatch)
-  };
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Home);
+  })
+)(Home)

src/containers/NotFound/index.js

@@ -1,12 +1,14 @@
-import React from 'react'
+import React, {Component} from 'react'
 
-export default class NotFound extends React.Component {
+class NotFound extends Component {
   render() {
     return (
-      <div>
+      <div className="not-found">
         <h1>404</h1>
         <h3>Page not found</h3>
       </div>
-    );
+    )
   }
 }
+
+export default NotFound

src/index.js

@@ -1,6 +1,6 @@
-import registerServiceWorker from './registerServiceWorker';
-import React from 'react';
-import ReactDOM from 'react-dom';
+import registerServiceWorker from './registerServiceWorker'
+import React from 'react'
+import ReactDOM from 'react-dom'
 import {BrowserRouter} from 'react-router-dom'
 import {createStore, applyMiddleware} from 'redux'
 import {Provider} from 'react-redux'
@@ -17,8 +17,8 @@ const loggerMiddleware = createLogger()
 const store = createStore(
   reducer,
   applyMiddleware(
-    thunkMiddleware, // lets us dispatch() functions
-    loggerMiddleware // neat middleware that logs actions
+    thunkMiddleware,
+    loggerMiddleware
   )
 )
 
@@ -27,5 +27,8 @@ ReactDOM.render(
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </Provider>, document.getElementById('root'));
-registerServiceWorker();
+  </Provider>,
+  document.getElementById('root')
+)
+
+registerServiceWorker()

src/reducers/product_reducer.js

@@ -1,8 +1,8 @@
-import * as types from '../constants/types';
+import * as types from '../constants/types'
 
 const INITIAL_STATE = {
   products: []
-};
+}
 
 export default function (state = INITIAL_STATE, action) {
   switch (action.type) {
@@ -11,16 +11,16 @@ export default function (state = INITIAL_STATE, action) {
         ...state, products: action.payload.map(product =>
           ({...product, compare: false})
         )
-      };
+      }
     case types.COMPARE_PRODUCT:
       return {
         ...state, products: state.products.map(product =>
           product.id === action.product.id ?
             ({...product, compare: !product.compare}) :
             product
         )
-      };
+      }
     default:
-      return state;
+      return state
   }
-}
+}