From 2f8ce1589c1ded92f1da90abacca188d8d840cd4 Mon Sep 17 00:00:00 2001 From: Pierre Poupin Date: Tue, 28 Nov 2017 17:20:46 +0100 Subject: [PATCH 1/6] Fix gabriel stupidity --- client/source/containers/refacto-target/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/source/containers/refacto-target/index.jsx b/client/source/containers/refacto-target/index.jsx index 3ff5ba1..4f7f9ce 100644 --- a/client/source/containers/refacto-target/index.jsx +++ b/client/source/containers/refacto-target/index.jsx @@ -44,8 +44,8 @@ const inlineStyles = { class RefactoTarget extends Component { state = { - buttonMarginLeft: 'Opx', - buttonMarginTop: 'Opx', + buttonMarginLeft: '0px', + buttonMarginTop: '0px', displayTextBubble: false, } From a8afc640652cc3a98eb658f3b9cb785be67fd902 Mon Sep 17 00:00:00 2001 From: Pierre Poupin Date: Tue, 28 Nov 2017 17:20:53 +0100 Subject: [PATCH 2/6] Fix dockerfile --- Dockerfile | 4 ---- 1 file changed, 4 deletions(-) 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 . From 468c2433deceea8fcc1ec0b36444659059a883d3 Mon Sep 17 00:00:00 2001 From: Pierre Poupin Date: Tue, 28 Nov 2017 17:25:18 +0100 Subject: [PATCH 3/6] Export style in new file --- .../containers/refacto-target/index.jsx | 50 +++---------------- .../containers/refacto-target/toto.style.js | 36 +++++++++++++ 2 files changed, 43 insertions(+), 43 deletions(-) create mode 100644 client/source/containers/refacto-target/toto.style.js diff --git a/client/source/containers/refacto-target/index.jsx b/client/source/containers/refacto-target/index.jsx index 4f7f9ce..a5d9398 100644 --- a/client/source/containers/refacto-target/index.jsx +++ b/client/source/containers/refacto-target/index.jsx @@ -1,46 +1,10 @@ import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; +import styles from './toto.style'; 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 = { @@ -71,13 +35,13 @@ class RefactoTarget extends Component { }; 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..54bcc5d --- /dev/null +++ b/client/source/containers/refacto-target/toto.component.js @@ -0,0 +1,77 @@ +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) + ) + + 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, +}; + 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); From 53b865831ce7d47a8753ea5f155c01da58efa426 Mon Sep 17 00:00:00 2001 From: Pierre Poupin Date: Tue, 28 Nov 2017 17:37:48 +0100 Subject: [PATCH 5/6] Export methods out of render --- .../refacto-target/toto.component.js | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/client/source/containers/refacto-target/toto.component.js b/client/source/containers/refacto-target/toto.component.js index 54bcc5d..4f825d6 100644 --- a/client/source/containers/refacto-target/toto.component.js +++ b/client/source/containers/refacto-target/toto.component.js @@ -13,23 +13,23 @@ export default class RefactoTarget extends Component { Math.floor((Math.random() * 400) + 1) ) - render() { - const blink = () => { - this.setState({ - buttonMarginLeft: `${this.getRandomMargin()}px`, - buttonMarginTop: `${this.getRandomMargin()}px`, - }); - }; + 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); - }; + 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} @@ -43,10 +43,10 @@ export default class RefactoTarget extends Component { marginTop: this.state.buttonMarginTop, }, )} - onMouseOver={blink} + onMouseOver={this.blink} >