Merge pull request #1 from Rhymond/responsiveFixes

Responsive fixes

src/actions/index.js

@@ -0,0 +1 @@
+export * from './product';

src/actions/product.js

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

src/containers/App/index.js

@@ -1,12 +1,12 @@
-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 '../';
 
-class App extends Component {
+export default class App extends Component {
   render() {
     return (
-      <div className="app">
+      <div className="App">
         <div className="container mt-4">
           <Switch>
             <Route exact path="/" component={Home}/>
@@ -14,8 +14,6 @@ class App extends Component {
           </Switch>
         </div>
       </div>
-    )
+    );
   }
 }
-
-export default App

src/containers/Home/index.js

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

src/containers/NotFound/index.js

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

src/index.js

@@ -1,6 +1,6 @@
-import registerServiceWorker from './registerServiceWorker'
+import registerServiceWorker from './registerServiceWorker';
-import React from 'react'
+import React from 'react';
-import ReactDOM from 'react-dom'
+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,
+    thunkMiddleware, // lets us dispatch() functions
-    loggerMiddleware
+    loggerMiddleware // neat middleware that logs actions
   )
 )
 
@@ -27,8 +27,5 @@ ReactDOM.render(
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </Provider>,
+  </Provider>, document.getElementById('root'));
-  document.getElementById('root')
+registerServiceWorker();
-)
-
-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,7 +11,7 @@ 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 =>
@@ -19,8 +19,8 @@ export default function (state = INITIAL_STATE, action) {
             ({...product, compare: !product.compare}) :
             product
         )
-      }
+      };
     default:
-      return state
+      return state;
   }
 }