diff --git a/common/app/flux/Store.js b/common/app/flux/Store.js index 2914bc268c..49f7cb342d 100644 --- a/common/app/flux/Store.js +++ b/common/app/flux/Store.js @@ -49,7 +49,6 @@ export default Store({ const { toggleQuestions, fetchHikes, - hideInfo, resetHike, grabQuestion, releaseQuestion, @@ -61,7 +60,6 @@ export default Store({ fromMany( toggleQuestions, fetchHikes, - hideInfo, resetHike, grabQuestion, releaseQuestion, diff --git a/common/app/routes/Hikes/components/Questions.jsx b/common/app/routes/Hikes/components/Questions.jsx index bedb202a57..0ac01fb9ee 100644 --- a/common/app/routes/Hikes/components/Questions.jsx +++ b/common/app/routes/Hikes/components/Questions.jsx @@ -1,13 +1,7 @@ import React, { PropTypes } from 'react'; import { spring, Motion } from 'react-motion'; import { contain } from 'thundercats-react'; -import { - Button, - Col, - Modal, - Panel, - Row -} from 'react-bootstrap'; +import { Button, Col, Panel, Row } from 'react-bootstrap'; const answerThreshold = 100; @@ -23,7 +17,6 @@ export default contain( isCorrect = false, delta = [0, 0], isPressed = false, - showInfo = false, shake = false } = hikesApp; return { @@ -33,7 +26,6 @@ export default contain( isCorrect, delta, isPressed, - showInfo, shake, isSignedIn: !!username }; @@ -49,13 +41,12 @@ export default contain( isCorrect: PropTypes.bool, delta: PropTypes.array, isPressed: PropTypes.bool, - showInfo: PropTypes.bool, shake: PropTypes.bool, isSignedIn: PropTypes.bool, hikesActions: PropTypes.object }, - handleMouseUp(e, answer) { + handleMouseUp(e, answer, info) { e.stopPropagation(); if (!this.props.isPressed) { return null; @@ -76,6 +67,7 @@ export default contain( delta, currentQuestion, isSignedIn, + info, threshold: answerThreshold }); }, @@ -89,7 +81,7 @@ export default contain( hikesActions.moveQuestion({ e, delta }); }, - onAnswer(answer, userAnswer) { + onAnswer(answer, userAnswer, info) { const { isSignedIn, hike, currentQuestion, hikesActions } = this.props; return (e) => { if (e && e.preventDefault) { @@ -101,40 +93,15 @@ export default contain( userAnswer, currentQuestion, hike, + info, isSignedIn }); }; }, - renderInfo(showInfo, info, hideInfo) { - if (!info) { - return null; - } - return ( - - -

- { info } -

-
- - - -
- ); - }, - - renderQuestion(number, question, answer, shake) { + renderQuestion(number, question, answer, shake, info) { const { hikesActions } = this.props; - const mouseUp = e => this.handleMouseUp(e, answer); + const mouseUp = e => this.handleMouseUp(e, answer, info); return ({ x }) => { const style = { WebkitTransform: `translate3d(${ x }px, 0, 0)`, @@ -164,34 +131,38 @@ export default contain( hike: { tests = [] } = {}, mouse: [x], currentQuestion, - hikesActions, - showInfo, shake } = this.props; const [ question, answer, info ] = tests[currentQuestion - 1] || []; + const questionElement = this.renderQuestion( + currentQuestion, + question, + answer, + shake, + info + ); return ( this.handleMouseUp(e, answer) } + onMouseUp={ e => this.handleMouseUp(e, answer, info) } xs={ 8 } xsOffset={ 2 }> - { this.renderQuestion(currentQuestion, question, answer, shake) } + { questionElement } - { this.renderInfo(showInfo, info, hikesActions.hideInfo) } diff --git a/common/app/routes/Hikes/flux/Actions.js b/common/app/routes/Hikes/flux/Actions.js index 955afb566c..2ca539c731 100644 --- a/common/app/routes/Hikes/flux/Actions.js +++ b/common/app/routes/Hikes/flux/Actions.js @@ -99,15 +99,6 @@ export default Actions({ }; }, - hideInfo() { - return { - transform(state) { - const hikesApp = { ...state.hikesApp, showInfo: false }; - return { ...state, hikesApp }; - } - }; - }, - grabQuestion(e) { let { pageX, pageY, touches } = e; if (touches) { @@ -172,6 +163,7 @@ export default Actions({ currentQuestion, isSignedIn, delta, + info, threshold }) { if (typeof userAnswer === 'undefined') { @@ -195,11 +187,20 @@ export default Actions({ if (answer !== userAnswer) { const startShake = { transform(state) { + const toast = !info ? + state.toast : + { + id: state.toast && state.toast.id ? state.toast.id + 1 : 1, + title: 'Hint', + message: info, + type: 'info' + }; + return { ...state, + toast, hikesApp: { ...state.hikesApp, - showInfo: true, shake: true } }; @@ -232,8 +233,7 @@ export default Actions({ transform(state) { const hikesApp = { ...state.hikesApp, - mouse: [0, 0], - showInfo: false + mouse: [0, 0] }; return { ...state, hikesApp }; } @@ -351,7 +351,6 @@ export default Actions({ ...state.hikesApp, currentQuestion: 1, showQuestions: false, - showInfo: false, mouse: [0, 0], delta: [0, 0] }