Merge pull request #113 from isaacblinder/hashtags-for-comments

added hashtags for comments

package-lock.json

@@ -5392,8 +5392,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5411,13 +5410,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5430,18 +5427,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5544,8 +5538,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5555,7 +5548,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5568,20 +5560,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5598,7 +5587,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5671,8 +5659,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5682,7 +5669,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5758,8 +5744,7 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5789,7 +5774,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5807,7 +5791,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5846,13 +5829,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         }
       }
     },

src/components/comment/CommentComponent.tsx

@@ -9,6 +9,7 @@ import Linkify from 'react-linkify'
 import Popover from '@material-ui/core/Popover'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import {Map} from 'immutable'
+import { push } from 'connected-react-router'
 
 import { Comment } from 'core/domain/comments'
 
@@ -32,6 +33,7 @@ import { Card, CardActions, CardHeader, CardMedia, CardContent } from '@material
 import Grow from '@material-ui/core/Grow'
 import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import classNames from 'classnames'
+import reactStringReplace from 'react-string-replace'
 
 // - Import app components
 import UserAvatar from 'components/userAvatar'
@@ -41,6 +43,7 @@ import UserAvatar from 'components/userAvatar'
 // - Import actions
 import * as commentActions from 'store/actions/commentActions'
 import * as userActions from 'store/actions/userActions'
+import * as globalActions from 'store/actions/globalActions'
 
 import { ICommentComponentProps } from './ICommentComponentProps'
 import { ICommentComponentState } from './ICommentComponentState'
@@ -305,7 +308,7 @@ export class CommentComponent extends Component<ICommentComponentProps, IComment
     /**
      * Comment object from props
      */
-    const { comment, classes, fullName, avatar, translate , editorStatus} = this.props
+    const { comment, classes, fullName, avatar, translate , editorStatus, goTo, setHomeTitle} = this.props
 
     const { openMenu, anchorEl } = this.state
 
@@ -373,7 +376,27 @@ export class CommentComponent extends Component<ICommentComponentProps, IComment
                 onChange={this.handleOnChange}
                 className={classes.textField}
                 fullWidth={true}
-              /> : <div className={classNames('animate2-top10', classes.commentBody)}>{this.state.text}</div>}
+              /> : <div className={classNames('animate2-top10', classes.commentBody)}>{
+                
+                <Linkify properties={{ target: '_blank', style: { color: 'blue' } }}>
+                  {reactStringReplace(this.state.text, /#(\w+)/g, (match: string, i: string) => (
+                    <NavLink
+                      style={{ color: 'green' }}
+                      key={match + i}
+                      to={`/tag/${match}`}
+                      onClick={evt => {
+                        evt.preventDefault()
+                        goTo!(`/tag/${match}`)
+                        setHomeTitle!(`#${match}`)
+                      }}
+                    >
+                      #{match}
+        
+                    </NavLink>
+
+                  ))}
+                </Linkify>}
+                </div>}
 
         <div style={{ display: (editorStatus ? 'flex' : 'none'), flexDirection: 'row-reverse' }}>
           <Button color='primary' disabled={this.state.editDisabled}
@@ -418,9 +441,11 @@ const mapDispatchToProps = (dispatch: any, ownProps: ICommentComponentProps) =>
     update: (comment: Comment) => {
       dispatch(commentActions.dbUpdateComment(comment))
     },
+    goTo: (url: string) => dispatch(push(url)),
     openEditor: () => dispatch(commentActions.openCommentEditor({ id: ownProps.comment.id, postId: ownProps.comment.postId })),
     closeEditor: () => dispatch(commentActions.closeCommentEditor({ id: ownProps.comment.id, postId: ownProps.comment.postId })),
-    getUserInfo: () => dispatch(userActions.dbGetUserInfoByUserId(ownProps.comment.userId!, ''))
+    setHomeTitle: (title: string) => dispatch(globalActions.setHeaderTitle(title || '')),
+    getUserInfo: () => dispatch(userActions.dbGetUserInfoByUserId(ownProps.comment.userId!, '')),
   }
 }
 

src/components/comment/ICommentComponentProps.ts

@@ -54,6 +54,20 @@ export interface ICommentComponentProps {
    */
   update?: (comment: Comment) => any
 
+  /**
+   * Redirect to {url} route
+   *
+   * @memberof IPostComponentProps
+   */
+  goTo?: (url: string) => any
+
+  /**
+   * Set tile of top bar
+   *
+   * @memberof IPostComponentProps
+   */
+  setHomeTitle?: (title: string) => any
+
   /**
    * Delete comment
    *