feat(manager): Fix and expand "recent activity" display

ibi-group · May 10, 2018 · 03ac489 · 03ac489
1 parent 42c4cdd
commit 03ac489
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 17 deletions.
diff --git a/lib/manager/components/NotesViewer.js b/lib/manager/components/NotesViewer.js
@@ -3,7 +3,7 @@ import moment from 'moment'
 import gravatar from 'gravatar'
 import { Panel, Row, Col, Glyphicon, FormControl, Button, ButtonToolbar, Media } from 'react-bootstrap'
 
-import WatchButton from '../../common/containers/WatchButton'
+//import WatchButton from '../../common/containers/WatchButton'
 import { getComponentMessages, getMessage } from '../../common/util/config'
 import { getProfileLink } from '../../common/util/util'
 
@@ -57,11 +57,14 @@ export default class NotesViewer extends Component {
           md={stacked ? 12 : 6}>
           <h3>
             <ButtonToolbar className='pull-right'>
+              {/* We are deprecating separate subscriptions from comments and rolling
+                  that into 'feed-updated' subscriptions. TODO: completely remove this
               <WatchButton
                 isWatching={isWatchingComments}
                 user={user}
                 target={version ? version.id : feedSource.id}
                 subscriptionType={version ? 'feedversion-commented-on' : 'feed-commented-on'} />
+              */}
               <Button
                 title={getMessage(messages, 'refresh')}
                 onClick={notesRequested}>

diff --git a/lib/manager/components/RecentActivity.js b/lib/manager/components/RecentActivity.js
@@ -3,14 +3,14 @@ import React, {Component, PropTypes} from 'react'
 import moment from 'moment'
 import { Link } from 'react-router'
 
-import { getProfileLink } from '../../common/util/util'
-
 export default class RecentActivity extends Component {
   static propTypes = {
+    currentUser: PropTypes.object,
     item: PropTypes.object
   }
+
   render () {
-    const { item } = this.props
+    const { item, currentUser } = this.props
     const containerStyle = {
       marginTop: 10,
       paddingBottom: 12,
@@ -36,24 +36,91 @@ export default class RecentActivity extends Component {
     const commentStyle = {
       backgroundColor: '#f0f0f0',
       marginTop: 8,
-      padding: 8,
-      fontSize: 12
+      marginLeft: 50,
+      padding: 10,
+      fontSize: 13,
+      borderRadius: 4,
+      color: '#444'
+    }
+
+    // Helper function to create comment item
+    const createCommentItem = (item) => {
+      const commentLink = item.feedVersionIndex
+        ? `/feed/${item.feedSourceId}/version/${item.feedVersionIndex}/comments`
+        : `/feed/${item.feedSourceId}/comments`
+      return (
+        <div style={containerStyle}>
+          <div style={iconStyle}>
+            <Icon type='comment' />
+          </div>
+          <div style={innerContainerStyle}>
+            <div style={dateStyle}>{moment(item.date).fromNow()}</div>
+            <div>
+              {currentUser.profile.name === item.userName
+                ? 'You'
+                : <b>{item.userName}</b>
+              }
+              {' commented on feed '}
+              <Link to={`/feed/${item.feedSourceId}`}><b>{item.feedSourceName}</b></Link>
+              {item.feedVersionIndex && item.feedSourceName && (
+                <span>
+                  {', version '}
+                  <Link to={`/feed/${item.feedSourceId}/versions/${item.feedVersionIndex}`}><b>{item.feedVersionName}</b></Link>
+                </span>
+              )}
+              {`:`}
+            </div>
+
+            <div>
+              <Link to={commentLink}>
+                <div style={commentStyle}><i>{item.body}</i></div>
+              </Link>
+            </div>
+          </div>
+        </div>
+      )
     }
 
     switch (item.type) {
       case 'feed-commented-on':
-        return (
-          <div style={containerStyle}>
-            <div style={iconStyle}>
-              <Icon type='comment' />
+      case 'version-commented-on':
+        return createCommentItem(item)
+      case 'feed-created': return (
+        <div style={containerStyle}>
+          <div style={iconStyle}>
+            <Icon type='bus' />
+          </div>
+          <div style={innerContainerStyle}>
+            <div style={dateStyle}>{moment(item.date).fromNow()}</div>
+            <div>
+              {'New feed '}
+              <Link to={`/feed/${item.feedSourceId}`}><b>{item.feedSourceName}</b></Link>
+              {' created in project '}
+              <Link to={`/project/${item.projectId}`}><b>{item.projectName}</b></Link>
             </div>
-            <div style={innerContainerStyle}>
-              <div style={dateStyle}>{moment(item.date).fromNow()}</div>
-              <div><a href={getProfileLink(item.userName)}><b>{item.userName}</b></a> commented on feed <Link to={`/feed/${item.targetId}`}><b>{item.targetName}</b></Link>:</div>
-              <div style={commentStyle}><i>{item.body}</i></div>
+          </div>
+        </div>
+      )
+      case 'version-created': return (
+        <div style={containerStyle}>
+          <div style={iconStyle}>
+            <Icon type='list' />
+          </div>
+          <div style={innerContainerStyle}>
+            <div style={dateStyle}>{moment(item.date).fromNow()}</div>
+            <div>
+              {'New version '}
+              <Link to={`/feed/${item.feedSourceId}/versions/${item.feedVersionIndex}`}>
+                <b>{item.feedVersionName}</b>
+              </Link>
+              {' created for feed '}
+              <Link to={`/feed/${item.feedSourceId}`}><b>{item.feedSourceName}</b></Link>
             </div>
           </div>
-        )
+        </div>
+      )
     }
+
+    return null
   }
 }
diff --git a/lib/manager/components/UserHomePage.js b/lib/manager/components/UserHomePage.js
@@ -91,8 +91,8 @@ export default class UserHomePage extends Component {
                 <Icon type='comments-o' /> Recent Activity
               </h3>
               {user.recentActivity && user.recentActivity.length
-                ? user.recentActivity.sort(sortByDate).map(item => {
-                  return <RecentActivity item={item} />
+                ? user.recentActivity.sort(sortByDate).map((item, k) => {
+                  return <RecentActivity item={item} key={k} currentUser={user} />
                 })
                 : <span>No Recent Activity for your subscriptions.</span>
               }