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(); +});