Merge pull request #5 from fsih/addButtons

Add button components for the modes

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, [
@@ -34,7 +33,7 @@ class BrushMode extends React.Component {
         }
     }
     shouldComponentUpdate () {
-        return false; // Logic only component
+        return false; // Static component, for now
     }
     activateTool () {
         // TODO: Instead of clearing selection, consider a kind of "draw inside"
@@ -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, [
@@ -34,7 +33,7 @@ class EraserMode extends React.Component {
         }
     }
     shouldComponentUpdate () {
-        return false; // Logic only component
+        return false; // Static component, for now
     }
     activateTool () {
         this.props.canvas.addEventListener('mousewheel', this.onScroll);
@@ -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));
     }
 });
 

test/unit/components/brush-mode.test.jsx

@@ -0,0 +1,15 @@
+/* eslint-env jest */
+import React from 'react'; // eslint-disable-line no-unused-vars
+import {shallow} from 'enzyme';
+import BrushModeComponent from '../../../src/components/brush-mode.jsx'; // eslint-disable-line no-unused-vars
+
+describe('BrushModeComponent', () => {
+    test('triggers callback when clicked', () => {
+        const onClick = jest.fn();
+        const componentShallowWrapper = shallow(
+            <BrushModeComponent onMouseDown={onClick}/>
+        );
+        componentShallowWrapper.simulate('click');
+        expect(onClick).toHaveBeenCalled();
+    });
+});

test/unit/components/eraser-mode.test.jsx

@@ -0,0 +1,15 @@
+/* eslint-env jest */
+import React from 'react'; // eslint-disable-line no-unused-vars
+import {shallow} from 'enzyme';
+import EraserModeComponent from '../../../src/components/eraser-mode.jsx'; // eslint-disable-line no-unused-vars
+
+describe('EraserModeComponent', () => {
+    test('triggers callback when clicked', () => {
+        const onClick = jest.fn();
+        const componentShallowWrapper = shallow(
+            <EraserModeComponent onMouseDown={onClick}/>
+        );
+        componentShallowWrapper.simulate('click');
+        expect(onClick).toHaveBeenCalled();
+    });
+});