Coding dojo pm

Dockerfile

@@ -3,6 +3,4 @@ FROM node:6
 COPY . /code
 WORKDIR /code
 
-RUN yarn install
-
 CMD node .

client/source/containers/refacto-target/index.jsx → client/source/containers/refacto-target/index-old.jsx

@@ -41,7 +41,7 @@ const inlineStyles = {
   },
 };
 
-class RefactoTarget extends Component {
+export class RefactoTarget extends Component {
 
   state = {
     buttonMarginLeft: 'Opx',

client/source/containers/refacto-target/index.js

@@ -0,0 +1 @@
+export { default } from './refacto-target.container';

client/source/containers/refacto-target/index.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import RefactoTarget from './refacto-target.component';
+
+describe('[Containers] <RefactoTarget />', () => {
+  const props = {
+    mainActions: {
+      doStuff: () => {},
+      doSomething: () => {},
+    },
+    main: 'BONJOUR',
+  };
+  const refactoTarget = renderer.create(<RefactoTarget {...props} />);
+  expect(refactoTarget.toJSON()).toMatchSnapshot();
+});

client/source/containers/refacto-target/refacto-target.component.js

@@ -0,0 +1,73 @@
+import React, { Component, PropTypes } from 'react';
+import style from 'refacto-target.style.css';
+
+export default class RefactoTarget extends Component {
+
+  state = {
+    buttonMarginLeft: 'Opx',
+    buttonMarginTop: 'Opx',
+    displayTextBubble: false,
+  }
+
+  getRandomMargin = () => (
+    Math.floor((Math.random() * 400) + 1)
+  )
+
+  blink = () => {
+    this.setState({
+      buttonMarginLeft: `${this.getRandomMargin()}px`,
+      buttonMarginTop: `${this.getRandomMargin()}px`,
+    });
+  };
+
+  stopIt = () => {
+    this.setState({ displayTextBubble: true });
+    this.props.mainActions.doStuff('Nice catch!');
+    setTimeout(() => {
+      this.props.mainActions.doSomething();
+      this.setState({ displayTextBubble: false });
+    }, 2000);
+  };
+
+  render() {
+    return (
+      <div className={style.container}>
+        {this.props.main}
+        <div className={style.button_container}>
+          <div
+            className={style.button_wrapper}
+            style={{
+              marginLeft: this.state.buttonMarginLeft,
+              marginTop: this.state.buttonMarginTop,
+            }}
+            onMouseOver={this.blink}
+          >
+            <button
+              onClick={this.stopIt}
+              className={style.main_button}
+            >
+              Main Button
+              { this.state.displayTextBubble ?
+                (<div className={style.text_bubble}>
+                  Stop It !
+                  <div className={style.bubble_binder}>
+                    { }
+                  </div>
+                </div>)
+                : (null)
+              }
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+RefactoTarget.propTypes = {
+  mainActions: PropTypes.shape({
+    doStuff: PropTypes.func.isRequired,
+    doSomething: PropTypes.func.isRequired,
+  }),
+  main: PropTypes.string.isRequired,
+};

client/source/containers/refacto-target/refacto-target.container.js

@@ -0,0 +1,22 @@
+import RefactoTarget from 'refacto-target.component';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import * as MainActions from '../../actions/main';
+
+function mapStateToProps(state) {
+  return {
+    main: state.main,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    mainActions: bindActionCreators(MainActions, dispatch),
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(RefactoTarget);

client/source/containers/refacto-target/refacto-target.style.css

@@ -0,0 +1,33 @@
+.container {
+  margin: 10px;
+  position: relative;
+  text-align: center;
+}
+.button_container {
+  height: 100vh;
+}
+.button_wrapper {
+  padding: 40px;
+  transition: margin 800ms cubic-bezier(0.23, 13, 0.323, 1) 100ms;
+}
+.text_bubble {
+  position: absolute;
+  top: -30px;
+  left: 10px;
+  font-size: 15px;
+  width: 60px;
+  border-radius: 3px;
+  background-color: #EEE;
+}
+.bubble_binder {
+  border-width: 0 0 12px 13px;
+  border-style: solid;
+  border-color: transparent #EEE;
+  top: 17px;
+  left: 10px;
+  position: absolute;
+}
+.main_button {
+  padding: 5px;
+  position: relative;
+}

client/source/containers/refacto-target/refacto-target.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import RefactoTarget from './refacto-target.component';
+
+describe('[Containers] <RefactoTarget />', () => {
+  const props = {
+    mainActions: {
+      doStuff: () => {},
+      doSomething: () => {},
+    },
+    main: 'BONJOUR',
+  };
+  const refactoTarget = renderer.create(<RefactoTarget {...props} />);
+  expect(refactoTarget.toJSON()).toMatchSnapshot();
+});