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', + }, +}; +