Restructured the Counter

src/__test__/Counter.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Counter from '../components/Counter';
+import Counter from '../components/Counter/Counter';
 import { mount } from 'enzyme';
 
 // state in redux app is preserved among tests

src/components/Counter/Counter.js

@@ -0,0 +1,75 @@
+import { createStore } from 'redux';
+import { Provider, connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+// action creator
+const ADD = 'ADD';
+const MINUS = 'MINUS';
+function add() {
+  return { type: ADD };
+}
+function minus() {
+  return { type: MINUS };
+}
+
+// reducer
+const app = (state = 0, action) => {
+  switch (action.type) {
+    case ADD:
+      return state + 1;
+    case MINUS:
+      if (state <= 0) {
+        alert('Gotcha. The counter has to be positive!');
+        return state;
+      }
+      return state - 1;
+    default:
+      return state;
+  }
+};
+
+// create store
+const store = createStore(app);
+
+// react component
+const StaticCounter = ({ value, handleClickAdd, handleClickMinus }) =>
+  <div>
+    <h2>{value}</h2>
+    <button onClick={handleClickAdd}>Add </button>
+    <button onClick={handleClickMinus}>Minus </button>
+  </div>;
+
+StaticCounter.propTypes = {
+  value: PropTypes.number.isRequired,
+  handleClickAdd: PropTypes.func.isRequired,
+  handleClickMinus: PropTypes.func.isRequired
+};
+// activate the container StaticCounter
+const mapStateToProps = state => {
+  return {
+    value: state
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    handleClickAdd: () => {
+      dispatch(add());
+    },
+    handleClickMinus: () => {
+      dispatch(minus());
+    }
+  };
+};
+
+const ActiveCounter = connect(mapStateToProps, mapDispatchToProps)(
+  StaticCounter
+);
+
+// passing the store
+const Counter = () =>
+  <Provider store={store}>
+    <ActiveCounter />
+  </Provider>;
+export default Counter;

src/components/Counter/index.js

@@ -1,78 +1,19 @@
-import { createStore } from 'redux';
-import { Provider, connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import React from 'react';
+import Counter from './Counter';
+import SharedTitle from '../Utils/SharedTitle.jsx';
 
-// action creator
-const ADD = 'ADD';
-const MINUS = 'MINUS';
-function add() {
-  return { type: ADD };
-}
-function minus() {
-  return { type: MINUS };
-}
+// import './style.css';
 
-// reducer
-const app = (state = 0, action) => {
-  switch (action.type) {
-    case ADD:
-      return state + 1;
-    case MINUS:
-      if (state <= 0) {
-        alert('Gotcha. The counter has to be positive!');
-        return state;
-      }
-      return state - 1;
-    default:
-      return state;
-  }
-};
-
-// create store
-const store = createStore(app);
-
-// react component
-const StaticCounter = ({ value, handleClickAdd, handleClickMinus }) =>
+const CounterDemo = () =>
   <div>
+    <SharedTitle />
     <p>
-      This state of this counter is managed by Redux instead of React. Note that the counter does not change after switching to other components because  the state in redux is not managed by the root component.
+      This state of this counter is managed by Redux instead of React. Note that
+      the counter does not change after switching to other components because
+      the state in redux is not managed by the root component.
     </p>
-    <h2>{value}</h2>
-    <button onClick={handleClickAdd}>Add </button>
-    <button onClick={handleClickMinus}>Minus </button>
+    <hr />
+    <Counter />
   </div>;
 
-StaticCounter.propTypes = {
-  value: PropTypes.number.isRequired,
-  handleClickAdd: PropTypes.func.isRequired,
-  handleClickMinus: PropTypes.func.isRequired,
-};
-// activate the container StaticCounter
-const mapStateToProps = (state) => {
-  return {
-    value: state
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    handleClickAdd: () => {
-      dispatch(add());
-    },
-    handleClickMinus: () => {
-      dispatch(minus());
-    }
-  };
-};
-
-const ActiveCounter = connect(mapStateToProps, mapDispatchToProps)(
-  StaticCounter
-);
-
-// passing the store
-const Counter = () =>
-  <Provider store={store}>
-    <ActiveCounter />
-  </Provider>;
-export default Counter;
+export default CounterDemo;

src/routes.js

@@ -9,7 +9,7 @@ import ToggleDemo from './components/Toggle';
 import TabViewDemo from './components/Tabs';
 import ModalDemo from './components/Modal';
 import SlideShowDemo from './components/SlideShow';
-import Counter from './components/Counter';
+import CounterDemo from './components/Counter';
 import FormDemo from './components/Form';
 import NotFound from './components/NotFound';
 
@@ -23,7 +23,7 @@ const Routes = props =>
           <Route path="/" exact component={Home} />
           <Route path="/toggle" component={ToggleDemo} />
           <Route path="/tabs" component={TabViewDemo} />
-          <Route path="/counter" component={Counter} />
+          <Route path="/counter" component={CounterDemo} />
           <Route path="/modal" component={ModalDemo} />
           <Route path="/slideshow" component={SlideShowDemo} />
           <Route path="/form" component={FormDemo} />