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

-- Now the list will be scrolled to the specific discussion in the left panel. This is working fine for Chrome and Firefox. For Safari, right now the left panel is not having the scroll bar (Separate issue is logged for that).

Author: Vikas Agarwal

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, scrollPosition } = 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">