Merge pull request #525 from appirio-tech/feature/scroll-to-specific-discussion

Github issue #517 Discourse email to topic link: scroll users to the correct topic on Discussions page

Author: vikasrohit

src/components/MessageList/MessageList.jsx

@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react'
+import React, {Component, PropTypes} from 'react'
 import Panel from '../Panel/Panel'
 import './MessageList.scss'
 import cn from 'classnames'
@@ -49,18 +49,40 @@ const MessageRow = ({title, messages, isActive, unreadCount, onClick}) => {
 }
 
 
-const MessageList = ({threads, onSelect, onAdd, showAddButton, showEmptyState}) => (
-  <Panel className="message-list">
-    <Panel.Title>
-      Discussions
-      { showAddButton && <Panel.AddBtn onClick={onAdd} /> }
-    </Panel.Title>
-    <div className="panel-messages">
-      { showEmptyState && <MessageRow title="First discussion post" isActive messages={[{ content: ''}]} /> }
-      {threads.map((item) => <MessageRow key={item.id} onClick={(e) => onSelect(item, e) } {...item} />)}
-    </div>
-  </Panel>
-)
+class MessageList extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount() {
+    const { scrollPosition } = this.props
+    if (scrollPosition) {
+      const panelMessages = this.refs.panelMessages
+      // We use requestAnimationFrame because this function may be executed before
+      // the DOM elements are actually drawn.
+      // Source: http://stackoverflow.com/a/28748160
+      requestAnimationFrame(() => {
+        panelMessages.scrollTop += scrollPosition
+      })
+    }
+  }
+
+  render() {
+    const {threads, onSelect, onAdd, showAddButton, showEmptyState } = this.props
+    return (
+      <Panel className="message-list">
+        <Panel.Title>
+          Discussions
+          { showAddButton && <Panel.AddBtn onClick={onAdd} /> }
+        </Panel.Title>
+        <div className="panel-messages" ref="panelMessages">
+          { showEmptyState && <MessageRow title="First discussion post" isActive messages={[{ content: ''}]} /> }
+          {threads.map((item) => <MessageRow key={item.id} onClick={(e) => onSelect(item, e) } {...item} />)}
+        </div>
+      </Panel>
+    )
+  }
+}
 
 MessageList.propTypes = {
   /**

src/projects/detail/containers/MessagesContainer.js

@@ -92,12 +92,14 @@ class MessagesView extends React.Component {
 
   init(props) {
     const { activeThreadId } = this.state
-    const propsThreadId = props.location.state ? props.location.state.threadId : null
+    const propsThreadId = _.get(props, 'location.state.threadId', null)
     const threadId = activeThreadId ? activeThreadId : propsThreadId
     const activeThreadIndex = threadId
       ? _.findIndex(props.threads, (thread) => thread.id === threadId )
       : 0
+
     this.setState({
+      scrollPosition: activeThreadIndex * 71,
       threads: props.threads.map((thread, idx) => {
         return this.mapFeed(thread,
           idx === activeThreadIndex,
@@ -189,7 +191,7 @@ class MessagesView extends React.Component {
   }
 
   render() {
-    const {threads, isCreateNewMessage, showEmptyState} = this.state
+    const {threads, isCreateNewMessage, showEmptyState, scrollPosition} = this.state
     const { currentUser, isCreatingFeed, currentMemberRole, error } = this.props
     const activeThread = threads.filter((item) => item.isActive)[0]
     const renderRightPanel = () => {
@@ -230,6 +232,7 @@ class MessagesView extends React.Component {
                 onSelect={this.onThreadSelect}
                 showAddButton={ !!currentMemberRole }
                 showEmptyState={ showEmptyState && !threads.length }
+                scrollPosition={ scrollPosition }
               />
             </div>
             <div className="right-area">