Merge pull request #882 from appirio-tech/feature/permalink_for_feeds_messages

Permalink for status post and discussions message

Author: vikasrohit

src/components/Feed/Feed.jsx

@@ -5,11 +5,13 @@ import ActionCard from '../ActionCard/ActionCard'
 import Panel from '../Panel/Panel'
 import FeedComments from './FeedComments'
 import { Avatar } from 'appirio-tech-react-components'
+import {Link} from 'react-router'
 
 const Feed = (props) => {
   const {
     user, currentUser, title, date, html, totalComments, hasMoreComments, onLoadMoreComments, isLoadingComments,
-    allowComments, comments, unread, children, onNewCommentChange, onAddNewComment, newComment, isAddingComment
+    allowComments, comments, unread, children, onNewCommentChange, onAddNewComment, newComment, isAddingComment,
+    permalink
   } = props
   let authorName = user.firstName
   if (authorName && user.lastName) {
@@ -30,7 +32,7 @@ const Feed = (props) => {
               { authorName }
             </div>
             <div className="card-time">
-              {moment(date).fromNow()}
+              <Link to={ permalink }>{moment(date).fromNow()}</Link>
             </div>
           </div>
           <div className="card-body draftjs-post" dangerouslySetInnerHTML={{__html: html}} />

src/projects/detail/Dashboard.jsx

@@ -7,7 +7,7 @@ import spinnerWhileLoading from '../../components/LoadingSpinner'
 
 require('./Dashboard.scss')
 
-const DashboardView = ({project, currentMemberRole, route}) => (
+const DashboardView = ({project, currentMemberRole, route, params}) => (
   <div>
     <div className="dashboard-container">
       <div className="left-area">
@@ -18,7 +18,7 @@ const DashboardView = ({project, currentMemberRole, route}) => (
         </Sticky>
       </div>
       <div className="right-area">
-        <FeedContainer currentMemberRole={currentMemberRole} project={project} route={route} />
+        <FeedContainer currentMemberRole={currentMemberRole} project={project} route={route} params={params} />
       </div>
     </div>
   </div>

src/projects/detail/Messages.jsx

@@ -4,12 +4,13 @@ import MessagesContainer from './containers/MessagesContainer'
 
 require('./Messages.scss')
 
-const Messages = ({ location, project, currentMemberRole, route }) => (
+const Messages = ({ location, project, currentMemberRole, route, params }) => (
   <MessagesContainer
     location={ location }
     project={ project }
     currentMemberRole={ currentMemberRole }
     route={ route }
+    params={ params }
   />
 )
 export default Messages

src/projects/detail/containers/FeedContainer.js

@@ -21,6 +21,11 @@ import ProjectSpecification from '../../../components/ProjectSpecification/Proje
 import { loadDashboardFeeds, createProjectTopic, loadFeedComments, addFeedComment } from '../../actions/projectTopics'
 import spinnerWhileLoading from '../../../components/LoadingSpinner'
 
+import { Helpers, scroller } from 'react-scroll'
+
+/*eslint-disable new-cap */
+const ScrollableFeed = Helpers.Element(Feed)
+
 const SYSTEM_USER = {
   firstName: CODER_BOT_USER_FNAME,
   lastName: CODER_BOT_USER_LNAME,
@@ -79,7 +84,7 @@ class FeedView extends React.Component {
   }
 
   mapFeed(feed, showAll = false, resetNewComment = false) {
-    const { allMembers } = this.props
+    const { allMembers, project } = this.props
     const item = _.pick(feed, ['id', 'date', 'read', 'tag', 'title', 'totalPosts', 'userId', 'reference', 'referenceId', 'postIds', 'isAddingComment', 'isLoadingComments', 'error'])
     // Github issue##623, allow comments on all posts (including system posts)
     item.allowComments = true
@@ -125,6 +130,9 @@ class FeedView extends React.Component {
       item.newComment = feedFromState ? feedFromState.newComment : ''
     }
     item.hasMoreComments = item.comments.length !== item.totalComments
+    // adds permalink for the feed
+    // item.permalink = `/projects/${project.id}/status/${item.id}`
+    item.permalink = `/projects/${project.id}#feed-${item.id}`
     return item
   }
 
@@ -146,6 +154,18 @@ class FeedView extends React.Component {
         const resetNewComment = prevFeed && prevFeed.isAddingComment && !feed.isAddingComment && !feed.error
         return this.mapFeed(feed, this.state.showAll.indexOf(feed.id) > -1, resetNewComment)
       }).filter(item => item)
+    }, () => {
+      const scrollTo = window.location.hash ? window.location.hash.substring(1) : null
+      // const scrollTo = _.get(props, 'params.statusId', null)
+      if (scrollTo) {
+        scroller.scrollTo(scrollTo, {
+          spy: true,
+          smooth: true,
+          offset: -80, // 60px for top bar and 20px for margin from nav bar
+          duration: 500,
+          activeClass: 'active'
+        })
+      }
     })
   }
 
@@ -223,10 +243,12 @@ class FeedView extends React.Component {
       if ((item.spec || item.sendForReview) && !showDraftSpec) {
         return null
       }
+      const anchorId = 'feed-' + item.id
       return (
         <div className="feed-action-card" key={item.id}>
-          <Feed
+          <ScrollableFeed
             {...item}
+            name={anchorId}
             allowComments={ item.allowComments && !!currentMemberRole}
             currentUser={currentUser}
             onNewCommentChange={this.onNewCommentChange.bind(this, item.id)}
@@ -236,7 +258,7 @@ class FeedView extends React.Component {
             {item.sendForReview && <div className="panel-buttons">
               <button className="tc-btn tc-btn-primary tc-btn-md">Send for review</button>
             </div>}
-          </Feed>
+          </ScrollableFeed>
           {item.spec && <ProjectSpecification project={ project } currentMemberRole={ currentMemberRole } />  }
         </div>
       )

src/projects/detail/containers/MessagesContainer.js

@@ -141,8 +141,8 @@ class MessagesView extends React.Component {
 
   init(props, prevProps) {
     const { activeThreadId } = this.state
-    const propsThreadId = _.get(props, 'location.state.threadId', null)
-    const threadId = activeThreadId ? activeThreadId : propsThreadId
+    const propsThreadId = _.get(props, 'params.discussionId', null)
+    const threadId = activeThreadId ? activeThreadId : parseInt(propsThreadId)
     const activeThreadIndex = threadId
       ? _.findIndex(props.threads, (thread) => thread.id === threadId )
       : 0
@@ -226,6 +226,8 @@ class MessagesView extends React.Component {
         }
         return item
       })
+    }, () => {
+      this.props.router.push(`/projects/${this.props.project.id}/discussions/${thread.id}`)
     })
   }
 

src/projects/routes.jsx

@@ -16,8 +16,9 @@ const projectRoutes = (
     <IndexRoute components={{topbar: null, main: Projects }} />
     <Route path=":projectId" components={{topbar: null, main: ProjectDetail}} >
       <IndexRoute component={ Dashboard } />
+      // <Route path="status/:statusId" component={ Dashboard } />
       <Route path="specification" component={ SpecificationContainer } />
-      <Route path="discussions" component={ ProjectMessages } />
+      <Route path="discussions(/:discussionId)" component={ ProjectMessages } />
     </Route>
   </Route>
 )

src/routes.jsx

@@ -53,8 +53,7 @@ const redirectToProject = (nextState, replace, callback) => {
           replace(`/projects/${projectId}/`)
         } else if (topic.tag === PROJECT_FEED_TYPE_MESSAGES) {
           replace({
-            pathname: `/projects/${projectId}/discussions`,
-            state: { threadId : topic.id }
+            pathname: `/projects/${projectId}/discussions/${topic.id}`
           })
         } else {
           replace('/projects')