Issue #1985 - notifications reader

src/components/ActionCard/Comment.jsx

@@ -7,7 +7,11 @@ import { Link } from 'react-router-dom'
 import CommentEditToggle from './CommentEditToggle'
 import _ from 'lodash'
 import moment from 'moment'
-import { POST_TIME_FORMAT } from '../../config/constants.js'
+import NotificationsReader from '../../components/NotificationsReader'
+import { 
+  POST_TIME_FORMAT,
+  EVENT_TYPE, 
+} from '../../config/constants.js'
 
 import './Comment.scss'
 
@@ -88,6 +92,14 @@ class Comment extends React.Component {
 
     return (
       <div styleName={cn('container', { self, 'is-deleting': isDeleting })} id={messageAnchor}>
+        <NotificationsReader 
+          id={messageAnchor}
+          criteria={[
+            { eventType: EVENT_TYPE.POST.CREATED, contents: { postId: message.id } }, 
+            { eventType: EVENT_TYPE.POST.UPDATED, contents: { postId: message.id } }, 
+            { eventType: EVENT_TYPE.POST.MENTION, contents: { postId: message.id } },
+          ]}
+        />
         <div styleName="avatar">
           {!noInfo && author && <UserTooltip usr={author} id={`${messageAnchor}-${author.userId}`} previewAvatar size={40} />}
         </div>

src/components/Feed/Feed.jsx

@@ -5,6 +5,9 @@ import PropTypes from 'prop-types'
 import FeedComments from './FeedComments'
 import CommentEditToggle from '../ActionCard/CommentEditToggle'
 import RichTextArea from '../RichTextArea/RichTextArea'
+import NotificationsReader from '../../components/NotificationsReader'
+
+import { EVENT_TYPE } from '../../config/constants'
 
 import XMarkIcon from '../../assets/icons/x-mark.svg'
 import FullscreenIcon from '../../assets/icons/ui-fullscreen.svg'
@@ -99,6 +102,10 @@ class Feed extends React.Component {
 
       topicHeader = (
         <header styleName="feed-header" ref="header">
+          <NotificationsReader 
+            id={`topic-${id}`}
+            criteria={{ eventType: EVENT_TYPE.TOPIC.CREATED, contents: { topicId: id } }}
+          />
           {editTopicMode ? (
             <div styleName="header-edit">
               <RichTextArea

src/components/Feed/ScrollableFeed.jsx

@@ -1,9 +1,18 @@
 /**
  * Feed with support of scrolling
  */
+import React from 'react'
 import { ScrollElement } from 'react-scroll'
 import Feed from './Feed'
 
-const ScrollableFeed = ScrollElement(Feed) // eslint-disable-line new-cap
+// we need this workaround because `ScrollElement` accepts `id` as a String
+// while `Feed` accepts `id` as a Number
+// so parent component passes `id` as a String for `ScrollElement`
+// and `topicId` as a Number, and here we rename `topicId` back to `id` for `Feed`
+const FeedWithId = ({ topicId, ...props }) => (
+  <Feed {...{ ...props, id: topicId }} />
+)
+
+const ScrollableFeed = ScrollElement(FeedWithId) // eslint-disable-line new-cap
 
 export default ScrollableFeed