add rendered components for brush and eraser

src/components/brush-mode.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const BrushModeComponent = props => (
+    <button onClick={props.onMouseDown}>Brush</button>
+);
+
+BrushModeComponent.propTypes = {
+    onMouseDown: PropTypes.func.isRequired
+};
+
+export default BrushModeComponent;

src/components/eraser-mode.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const EraserModeComponent = props => (
+    <button onClick={props.onMouseDown}>Eraser</button>
+);
+
+EraserModeComponent.propTypes = {
+    onMouseDown: PropTypes.func.isRequired
+};
+
+export default EraserModeComponent;

src/containers/brush-mode.jsx

@@ -5,11 +5,10 @@ import bindAll from 'lodash.bindall';
 import Modes from '../modes/modes';
 import Blobbiness from './blob/blob';
 import {changeBrushSize} from '../reducers/brush-mode';
+import {changeMode} from '../reducers/modes';
+import BrushModeComponent from '../components/brush-mode.jsx';
 
 class BrushMode extends React.Component {
-    static get MODE () {
-        return Modes.BRUSH;
-    }
     constructor (props) {
         super(props);
         bindAll(this, [
@@ -59,7 +58,7 @@ class BrushMode extends React.Component {
     }
     render () {
         return (
-            <div>Brush Mode</div>
+            <BrushModeComponent onMouseDown={this.props.handleMouseDown} />
         );
     }
 }
@@ -70,16 +69,20 @@ BrushMode.propTypes = {
     }),
     canvas: PropTypes.instanceOf(Element).isRequired,
     changeBrushSize: PropTypes.func.isRequired,
+    handleMouseDown: PropTypes.func.isRequired,
     isBrushModeActive: PropTypes.bool.isRequired
 };
 
 const mapStateToProps = state => ({
     brushModeState: state.brushMode,
-    isBrushModeActive: state.mode === BrushMode.MODE
+    isBrushModeActive: state.mode === Modes.BRUSH
 });
 const mapDispatchToProps = dispatch => ({
     changeBrushSize: brushSize => {
         dispatch(changeBrushSize(brushSize));
+    },
+    handleMouseDown: () => {
+        dispatch(changeMode(Modes.BRUSH));
     }
 });
 

src/containers/eraser-mode.jsx

@@ -5,11 +5,10 @@ import bindAll from 'lodash.bindall';
 import Modes from '../modes/modes';
 import Blobbiness from './blob/blob';
 import {changeBrushSize} from '../reducers/eraser-mode';
+import EraserModeComponent from '../components/eraser-mode.jsx';
+import {changeMode} from '../reducers/modes';
 
 class EraserMode extends React.Component {
-    static get MODE () {
-        return Modes.ERASER;
-    }
     constructor (props) {
         super(props);
         bindAll(this, [
@@ -55,7 +54,7 @@ class EraserMode extends React.Component {
     }
     render () {
         return (
-            <div>Eraser Mode</div>
+            <EraserModeComponent onMouseDown={this.props.handleMouseDown} />
         );
     }
 }
@@ -66,16 +65,20 @@ EraserMode.propTypes = {
     eraserModeState: PropTypes.shape({
         brushSize: PropTypes.number.isRequired
     }),
+    handleMouseDown: PropTypes.func.isRequired,
     isEraserModeActive: PropTypes.bool.isRequired
 };
 
 const mapStateToProps = state => ({
     eraserModeState: state.eraserMode,
-    isEraserModeActive: state.mode === EraserMode.MODE
+    isEraserModeActive: state.mode === Modes.ERASER
 });
 const mapDispatchToProps = dispatch => ({
     changeBrushSize: brushSize => {
         dispatch(changeBrushSize(brushSize));
+    },
+    handleMouseDown: () => {
+        dispatch(changeMode(Modes.ERASER));
     }
 });