First whack at the assignment

src/containers/about/index.js

@@ -1,10 +1,10 @@
 import React from 'react'
 
 const About = () => (
-  <div>
-    <h1>About Page</h1>
-    <p>Did you get here via Redux?</p>
-  </div>
-)
+    <div>
+        <h1>About Page</h1>
+        <p>Did you get here via Redux?</p>
+    </div>
+);
 
 export default About

src/containers/app/index.js

@@ -1,20 +1,27 @@
 import React from 'react';
-import { Route, Link } from 'react-router-dom'
+import {Link, Route} from 'react-router-dom'
 import Home from '../home'
 import About from '../about'
+import History from '../history'
+
+export const HOME_PATH = '/';
+export const ABOUT_PATH = '/about';
+export const HISTORY_PATH = '/history';
 
 const App = () => (
-  <div>
-    <header>
-      <Link to="/">Home</Link>
-      <Link to="/about-us">About</Link>
-    </header>
+    <div>
+        <header>
+            <Link to={HOME_PATH}>Home</Link>
+            <Link to={ABOUT_PATH}>About</Link>
+            <Link to={HISTORY_PATH}>History</Link>
+        </header>
 
-    <main>
-      <Route exact path="/" component={Home} />
-      <Route exact path="/about-us" component={About} />
-    </main>
-  </div>
-)
+        <main>
+            <Route exact path={HOME_PATH} component={Home}/>
+            <Route exact path={ABOUT_PATH} component={About}/>
+            <Route exact path={HISTORY_PATH} component={History}/>
+        </main>
+    </div>
+);
 
 export default App

src/containers/history/index.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import {connect} from "react-redux";
+
+const History = props => (
+    <div><h1>History</h1>
+        {props.clickHistory.length > 0 && (
+            <table>
+                <tr>
+                    <th>Click on</th>
+                    <th>Date time</th>
+                </tr>
+                {props.clickHistory.map((entry, index) =>
+                    (<tr key={index}>
+                        <td>{entry.name}</td>
+                        <td>{entry.dateTime}</td>
+                    </tr>))}
+            </table>
+        )}
+    </div>
+);
+
+const mapStateToProps = state => ({
+    clickHistory: state.counter.clickHistory
+});
+
+export default connect(mapStateToProps)(History)

src/containers/home/index.js

@@ -1,48 +1,56 @@
-import React from 'react'
-import { push } from 'react-router-redux'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
+import React from 'react';
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
 import {
-  increment,
-  incrementAsync,
-  decrement,
-  decrementAsync
-} from '../../modules/counter'
+    boundAbout,
+    boundDecrement,
+    boundDecrementAsync,
+    boundIncrement,
+    boundIncrementAsync,
+    boundReset
+} from '../../modules/counter';
+import {withRouter} from 'react-router';
 
 const Home = props => (
-  <div>
-    <h1>Home</h1>
-    <p>Count: {props.count}</p>
+    <div>
+        <h1>Home</h1>
+        <p>Count: {props.count}</p>
 
-    <p>
-      <button onClick={props.increment} disabled={props.isIncrementing}>Increment</button>
-      <button onClick={props.incrementAsync} disabled={props.isIncrementing}>Increment Async</button>
-    </p>
+        <p>
+            <button onClick={props.increment} disabled={props.isIncrementing}>Increment</button>
+            <button onClick={props.incrementAsync} disabled={props.isIncrementing}>Increment Async</button>
+        </p>
 
-    <p>
-      <button onClick={props.decrement} disabled={props.isDecrementing}>Decrement</button>
-      <button onClick={props.decrementAsync} disabled={props.isDecrementing}>Decrement Async</button>
-    </p>
+        <p>
+            <button onClick={props.decrement} disabled={props.isDecrementing}>Decrement</button>
+            <button onClick={props.decrementAsync} disabled={props.isDecrementing}>Decrement Async</button>
+        </p>
 
-    <p><button onClick={() => props.changePage()}>Go to about page via redux</button></p>
-  </div>
-)
+        <p>
+            <button onClick={props.about}>Go to about page via redux</button>
+        </p>
+
+        <p>
+            <button onClick={props.reset}>Reset</button>
+        </p>
+    </div>
+);
 
 const mapStateToProps = state => ({
-  count: state.counter.count,
-  isIncrementing: state.counter.isIncrementing,
-  isDecrementing: state.counter.isDecrementing
-})
+    count: state.counter.count,
+    isIncrementing: state.counter.isIncrementing,
+    isDecrementing: state.counter.isDecrementing
+});
 
 const mapDispatchToProps = dispatch => bindActionCreators({
-  increment,
-  incrementAsync,
-  decrement,
-  decrementAsync,
-  changePage: () => push('/about-us')
-}, dispatch)
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Home)
+    increment: boundIncrement,
+    incrementAsync: boundIncrementAsync,
+    decrement: boundDecrement,
+    decrementAsync: boundDecrementAsync,
+    about: boundAbout,
+    reset: boundReset
+}, dispatch);
+
+export default withRouter(
+    connect(mapStateToProps, mapDispatchToProps)(Home)
+);

src/index.css

@@ -1,15 +1,33 @@
 html {
-  font-size: 100%;
+    font-size: 100%;
 }
 
 body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-  font-size: 1rem;
-  line-height: 1.5;
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+    font-size: 1rem;
+    line-height: 1.5;
 }
 
 button:disabled {
-  opacity: 0.5;
+    opacity: 0.5;
+}
+
+a {
+    margin-right: 15px;
+}
+
+table {
+    margin-left: 10px;
+}
+
+td, th {
+    border: 1px solid black;
+    text-align: left;
+    padding: 8px;
+}
+
+tr:nth-child(even) {
+    background-color: #dddddd;
 }

src/index.js

@@ -1,22 +1,19 @@
-import React from 'react'
-import { render } from 'react-dom'
-import { Provider } from 'react-redux'
-import { ConnectedRouter } from 'react-router-redux'
-import store, { history } from './store'
-import App from './containers/app'
-
+import React from 'react';
+import {render} from 'react-dom';
+import {Provider} from 'react-redux';
+import {ConnectedRouter} from 'react-router-redux';
+import store, {history} from './store';
+import App from './containers/app';
 import 'sanitize.css/sanitize.css'
 import './index.css'
 
-const target = document.querySelector('#root')
+const target = document.getElementById('root');
 
 render(
-  <Provider store={store}>
-    <ConnectedRouter history={history}>
-      <div>
-        <App />
-      </div>
-    </ConnectedRouter>
-  </Provider>,
-  target
-)
+    <Provider store={store}>
+        <ConnectedRouter history={history}>
+            <App/>
+        </ConnectedRouter>
+    </Provider>,
+    target
+);