From a942a14ec9c0d17c7396fc0b5dfdda1a2f70ce97 Mon Sep 17 00:00:00 2001 From: James Grant Date: Fri, 11 Aug 2017 00:59:03 +0100 Subject: [PATCH 1/2] Added url auto linking in questions and answers --- .../client/src/routes/Answer/Answer.js | 5 ++-- .../routes/Answer/components/Answer/Answer.js | 27 +++++++++++++++---- package-lock.json | 20 ++++++++++++++ package.json | 1 + 4 files changed, 46 insertions(+), 7 deletions(-) diff --git a/app/Resources/client/src/routes/Answer/Answer.js b/app/Resources/client/src/routes/Answer/Answer.js index 88232966..13482db5 100644 --- a/app/Resources/client/src/routes/Answer/Answer.js +++ b/app/Resources/client/src/routes/Answer/Answer.js @@ -1,8 +1,9 @@ import React from 'react' -import { Helmet } from 'react-helmet' import { connect } from 'react-redux' import PropTypes from 'prop-types' import { mergeAll } from 'ramda' +import Helmet from 'react-helmet' +import Linkify from 'react-linkify' import { browserHistory } from 'react-router' import { pollSelector, hasQuestionSelector } from 'store/poll' import { fetchPoll, APIError } from 'store/api' @@ -45,7 +46,7 @@ class Answer extends React.Component {
-

{ this.props.poll.question }

+

{ this.props.poll.question }

diff --git a/app/Resources/client/src/routes/Answer/components/Answer/Answer.js b/app/Resources/client/src/routes/Answer/components/Answer/Answer.js index 4034dcd0..a0448a10 100644 --- a/app/Resources/client/src/routes/Answer/components/Answer/Answer.js +++ b/app/Resources/client/src/routes/Answer/components/Answer/Answer.js @@ -1,7 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' +import { merge } from 'ramda' import { connect } from 'react-redux' import { withRouter } from 'react-router' +import Linkify from 'react-linkify' import { postResponse } from 'store/api' import { userRespondedAnswerSelector } from 'store/poll' import './Answer.scss' @@ -9,13 +11,28 @@ import './Answer.scss' export class Answer extends React.Component { constructor (props) { super(props) - this.state = { animating: false } + this.state = { animating: false, linkClicked: false } + this.linkClicked = false } handleClick = () => { - this.setState({ animating: true }) - setTimeout(() => { this.setState({ animating: false }) }, 550) - this.props.postResponse() + if (!this.linkClicked) { + this.setState((prevState) => + merge(prevState, { animating : true }) + ) + setTimeout(() => { + this.setState((prevState) => + merge(prevState, { animating : false }) + ) + }, 550) + this.props.postResponse() + } else { + this.linkClicked = false + } + } + + linkClick = () => { + this.linkClicked = true } calculateWidth = () => { @@ -41,7 +58,7 @@ export class Answer extends React.Component { htmlFor={'answer-' + this.props.index} className={'input-label input-label-options' + (this.state.animating ? ' input-label-options--click' : '')} onClick={this.handleClick}> - { this.props.answer.answer } + { this.props.answer.answer } {this.props.answer.responsesCount} votes diff --git a/package-lock.json b/package-lock.json index 5e2cda97..042739cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3550,6 +3550,11 @@ "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=" }, + "linkify-it": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-1.2.4.tgz", + "integrity": "sha1-B3NSbDF8j9E71TTuHRgP+Iq/iBo=" + }, "load-json-file": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", @@ -5372,6 +5377,11 @@ } } }, + "react-linkify": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/react-linkify/-/react-linkify-0.2.1.tgz", + "integrity": "sha1-so0/lURTmmIv7I1CtIAOudI7+YE=" + }, "react-modal": { "version": "1.9.7", "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-1.9.7.tgz", @@ -6243,6 +6253,11 @@ "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.2.tgz", "integrity": "sha1-q0iDz1l9zVCvIRNJoA+8pWrIa4Y=" }, + "tlds": { + "version": "1.192.0", + "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.192.0.tgz", + "integrity": "sha512-VvtzSaTc3rQReCTwftsx+nCSUWgutbJcSZgpcuGar2JuWHD0Pw5tylb9mTnTTOlsPLMYZnqjIHUZ+QbwORQa8g==" + }, "tmp": { "version": "0.0.31", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.31.tgz", @@ -6344,6 +6359,11 @@ "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.13.tgz", "integrity": "sha1-zZ3S+GSTs/RNvu7zeA/adMXuFL4=" }, + "uc.micro": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.3.tgz", + "integrity": "sha1-ftUNXg+an7ClczeSWfKndFjVAZI=" + }, "uglify-js": { "version": "3.0.23", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.0.23.tgz", diff --git a/package.json b/package.json index a90f8699..ecfa11d4 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "react": "^15.5.4", "react-dom": "^15.5.4", "react-helmet": "^5.1.3", + "react-linkify": "^0.2.1", "react-redux": "^5.0.4", "react-router": "^3.0.0", "redbox-react": "^1.3.6", From 72a9d9fa162e897e107f2ffb497a632f32e001f0 Mon Sep 17 00:00:00 2001 From: James Grant Date: Fri, 11 Aug 2017 01:00:59 +0100 Subject: [PATCH 2/2] Removed linkClicked from component state --- .../client/src/routes/Answer/components/Answer/Answer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/Resources/client/src/routes/Answer/components/Answer/Answer.js b/app/Resources/client/src/routes/Answer/components/Answer/Answer.js index a0448a10..a54c31f9 100644 --- a/app/Resources/client/src/routes/Answer/components/Answer/Answer.js +++ b/app/Resources/client/src/routes/Answer/components/Answer/Answer.js @@ -11,7 +11,7 @@ import './Answer.scss' export class Answer extends React.Component { constructor (props) { super(props) - this.state = { animating: false, linkClicked: false } + this.state = { animating : false } this.linkClicked = false }