diff --git a/Dockerfile b/Dockerfile
index 78712e2..fdd1a79 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,7 +2,3 @@ FROM node:6
COPY . /code
WORKDIR /code
-
-RUN yarn install
-
-CMD node .
diff --git a/client/source/containers/refacto-target/index.jsx b/client/source/containers/refacto-target/index.jsx
index 3ff5ba1..168ea93 100644
--- a/client/source/containers/refacto-target/index.jsx
+++ b/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 (
-
- {this.props.main}
-
-
-
-
-
-
- );
- }
-}
-
-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';
diff --git a/client/source/containers/refacto-target/toto.component.js b/client/source/containers/refacto-target/toto.component.js
new file mode 100644
index 0000000..c804382
--- /dev/null
+++ b/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 (
+
+ {this.props.main}
+
+
+
+
+
+
+ );
+ }
+}
+
+RefactoTarget.propTypes = {
+ mainActions: PropTypes.shape({
+ doStuff: PropTypes.func.isRequired,
+ doSomething: PropTypes.func.isRequired,
+ }),
+ main: PropTypes.string.isRequired,
+};
+
diff --git a/client/source/containers/refacto-target/toto.container.js b/client/source/containers/refacto-target/toto.container.js
new file mode 100644
index 0000000..eaeef26
--- /dev/null
+++ b/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);
diff --git a/client/source/containers/refacto-target/toto.style.js b/client/source/containers/refacto-target/toto.style.js
new file mode 100644
index 0000000..195fcfc
--- /dev/null
+++ b/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',
+ },
+};
+