Merge pull request #104 from sproogen/f/#99-autolink-urls

Added url auto linking in questions and answers

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 {
           <Back />
           <div className='container header-container answer-header-container'>
             <div className='header center-text'>
-              <h2>{ this.props.poll.question }</h2>
+              <h2><Linkify properties={{ target: '_blank' }}>{ this.props.poll.question }</Linkify></h2>
               <Sharing poll={this.props.poll} />
             </div>
           </div>

app/Resources/client/src/routes/Answer/components/Answer/Answer.js

@@ -1,21 +1,38 @@
 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'
 
 export class Answer extends React.Component {
   constructor (props) {
     super(props)
-    this.state = { animating: false }
+    this.state = { animating : 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 }
+        <Linkify properties={{ target: '_blank', onClick: this.linkClick }}>{ this.props.answer.answer }</Linkify>
       </label>
       <span htmlFor={'answer-' + this.props.index} className='input-label-votes'>
         {this.props.answer.responsesCount} votes

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",