Jeanfred et jeanpierre

Dockerfile

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

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

@@ -1,133 +1 @@
-import React, { Component, PropTypes } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-
-import * as MainActions from '../../actions/main';
-
-
-const inlineStyles = {
-  container: {
-    margin: '10px',
-    position: 'relative',
-    textAlign: 'center',
-  },
-  buttonContainer: {
-    height: '100vh',
-  },
-  buttonWrapper: {
-    padding: '40px',
-    transition: 'margin 800ms cubic-bezier(0.23, 1, 0.32, 1) 100ms',
-  },
-  textBubble: {
-    position: 'absolute',
-    top: '-30px',
-    left: '10px',
-    fontSize: '15px',
-    width: '60px',
-    borderRadius: '3px',
-    backgroundColor: '#EEE',
-  },
-  bubbleBinder: {
-    borderWidth: '0 0 12px 13px',
-    borderStyle: 'solid',
-    borderColor: 'transparent #EEE',
-    top: '17px',
-    left: '10px',
-    position: 'absolute',
-  },
-  mainButton: {
-    padding: '5px',
-    position: 'relative',
-  },
-};
-
-class RefactoTarget extends Component {
-
-  state = {
-    buttonMarginLeft: 'Opx',
-    buttonMarginTop: 'Opx',
-    displayTextBubble: false,
-  }
-
-  getRandomMargin = () => (
-    Math.floor((Math.random() * 400) + 1)
-  )
-
-  render() {
-    const blink = () => {
-      this.setState({
-        buttonMarginLeft: `${this.getRandomMargin()}px`,
-        buttonMarginTop: `${this.getRandomMargin()}px`,
-      });
-    };
-
-    const StopIt = () => {
-      this.setState({ displayTextBubble: true });
-      this.props.mainActions.doStuff('Nice catch!');
-      setTimeout(() => {
-        this.props.mainActions.doSomething();
-        this.setState({ displayTextBubble: false });
-      }, 2000);
-    };
-
-    return (
-      <div style={inlineStyles.container}>
-        {this.props.main}
-        <div style={inlineStyles.buttonContainer}>
-          <div
-            style={Object.assign(
-              {},
-              inlineStyles.buttonWrapper,
-              {
-                marginLeft: this.state.buttonMarginLeft,
-                marginTop: this.state.buttonMarginTop,
-              },
-            )}
-            onMouseOver={blink}
-          >
-            <button
-              onClick={StopIt}
-              style={inlineStyles.mainButton}
-            >
-              Main Button
-              { this.state.displayTextBubble ?
-                (<div style={inlineStyles.textBubble}>
-                  Stop It !
-                  <div style={inlineStyles.bubbleBinder}>
-                    { }
-                  </div>
-                </div>)
-                : (null)
-              }
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-RefactoTarget.propTypes = {
-  mainActions: PropTypes.shape({
-    doStuff: PropTypes.func.isRequired,
-    doSomething: PropTypes.func.isRequired,
-  }),
-  main: PropTypes.string.isRequired,
-};
-
-function mapStateToProps(state) {
-  return {
-    main: state.main,
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    mainActions: bindActionCreators(MainActions, dispatch),
-  };
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(RefactoTarget);
+export { default } from './toto.container';

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

@@ -0,0 +1,76 @@
+import React, { Component, PropTypes } from 'react';
+import styles from './toto.style';
+
+export default class RefactoTarget extends Component {
+
+  state = {
+    buttonMarginLeft: '0px',
+    buttonMarginTop: '0px',
+    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);
+  };
+
+  buttonWrapperStyle = (marginLeft, marginTop) =>
+    Object.assign({}, styles.buttonWrapper, {
+      marginLeft,
+      marginTop,
+    });
+
+  render() {
+    return (
+      <div style={styles.container}>
+        {this.props.main}
+        <div style={styles.buttonContainer}>
+          <div
+            style={this.buttonWrapperStyle(this.state.buttonMarginLeft, this.state.buttonMarginTop)}
+            onMouseOver={this.blink}
+          >
+            <button
+              onClick={this.StopIt}
+              style={styles.mainButton}
+            >
+              Main Button
+              { this.state.displayTextBubble ?
+                (<div style={styles.textBubble}>
+                  Stop It !
+                  <div style={styles.bubbleBinder}>
+                    { }
+                  </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/toto.container.js

@@ -0,0 +1,21 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as MainActions from '../../actions/main';
+import RefactoTarget from './toto.component';
+
+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/toto.style.js

@@ -0,0 +1,36 @@
+export default {
+  container: {
+    margin: '10px',
+    position: 'relative',
+    textAlign: 'center',
+  },
+  buttonContainer: {
+    height: '100vh',
+  },
+  buttonWrapper: {
+    padding: '40px',
+    transition: 'margin 800ms cubic-bezier(0.23, 1, 0.32, 1) 100ms',
+  },
+  textBubble: {
+    position: 'absolute',
+    top: '-30px',
+    left: '10px',
+    fontSize: '15px',
+    width: '60px',
+    borderRadius: '3px',
+    backgroundColor: '#EEE',
+  },
+  bubbleBinder: {
+    borderWidth: '0 0 12px 13px',
+    borderStyle: 'solid',
+    borderColor: 'transparent #EEE',
+    top: '17px',
+    left: '10px',
+    position: 'absolute',
+  },
+  mainButton: {
+    padding: '5px',
+    position: 'relative',
+  },
+};
+