diff --git a/Dockerfile b/Dockerfile
index 78712e2..f14de2d 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,6 +3,4 @@ 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-old.jsx
similarity index 98%
rename from client/source/containers/refacto-target/index.jsx
rename to client/source/containers/refacto-target/index-old.jsx
index 3ff5ba1..f716efb 100644
--- a/client/source/containers/refacto-target/index.jsx
+++ b/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',
diff --git a/client/source/containers/refacto-target/index.js b/client/source/containers/refacto-target/index.js
new file mode 100644
index 0000000..d6078d0
--- /dev/null
+++ b/client/source/containers/refacto-target/index.js
@@ -0,0 +1 @@
+export { default } from './refacto-target.container';
diff --git a/client/source/containers/refacto-target/index.test.js b/client/source/containers/refacto-target/index.test.js
new file mode 100644
index 0000000..f855247
--- /dev/null
+++ b/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] ', () => {
+ const props = {
+ mainActions: {
+ doStuff: () => {},
+ doSomething: () => {},
+ },
+ main: 'BONJOUR',
+ };
+ const refactoTarget = renderer.create();
+ expect(refactoTarget.toJSON()).toMatchSnapshot();
+});
diff --git a/client/source/containers/refacto-target/refacto-target.component.js b/client/source/containers/refacto-target/refacto-target.component.js
new file mode 100644
index 0000000..14e34c6
--- /dev/null
+++ b/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 (
+
+ {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/refacto-target.container.js b/client/source/containers/refacto-target/refacto-target.container.js
new file mode 100644
index 0000000..f39a5f7
--- /dev/null
+++ b/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);
diff --git a/client/source/containers/refacto-target/refacto-target.style.css b/client/source/containers/refacto-target/refacto-target.style.css
new file mode 100644
index 0000000..57f5147
--- /dev/null
+++ b/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;
+}
diff --git a/client/source/containers/refacto-target/refacto-target.test.js b/client/source/containers/refacto-target/refacto-target.test.js
new file mode 100644
index 0000000..f855247
--- /dev/null
+++ b/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] ', () => {
+ const props = {
+ mainActions: {
+ doStuff: () => {},
+ doSomething: () => {},
+ },
+ main: 'BONJOUR',
+ };
+ const refactoTarget = renderer.create();
+ expect(refactoTarget.toJSON()).toMatchSnapshot();
+});