PLT-4606: Date separator in RHS (#5606)

webapp/components/rhs_thread.jsx

@@ -8,6 +8,7 @@ import RootPost from './rhs_root_post.jsx';
 import Comment from './rhs_comment.jsx';
 import FileUploadOverlay from './file_upload_overlay.jsx';
 import FloatingTimestamp from './post_view/components/floating_timestamp.jsx';
+import DateSeparator from './post_view/components/date_separator.jsx';
 
 import PostStore from 'stores/post_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -325,6 +326,7 @@ export default class RhsThread extends React.Component {
         const postsArray = this.state.postsArray;
         const selected = this.state.selected;
         const profiles = this.state.profiles || {};
+        let previousPostDay = Utils.getDateForUnixTicks(selected.create_at);
 
         if (postsArray == null || selected == null) {
             return (
@@ -355,6 +357,55 @@ export default class RhsThread extends React.Component {
             rootStatus = this.state.statuses[selected.user_id] || 'offline';
         }
 
+        const commentsLists = [];
+        for (let i = 0; i < postsArray.length; i++) {
+            const comPost = postsArray[i];
+            let p;
+            if (UserStore.getCurrentId() === comPost.user_id) {
+                p = UserStore.getCurrentUser();
+            } else {
+                p = profiles[comPost.user_id];
+            }
+
+            let isFlagged = false;
+            if (this.state.flaggedPosts) {
+                isFlagged = this.state.flaggedPosts.get(comPost.id) === 'true';
+            }
+
+            let status = 'offline';
+            if (this.state.statuses && p && p.id) {
+                status = this.state.statuses[p.id] || 'offline';
+            }
+
+            const keyPrefix = comPost.id ? comPost.id : comPost.pending_post_id;
+
+            const currentPostDay = Utils.getDateForUnixTicks(comPost.create_at);
+
+            if (currentPostDay.toDateString() !== previousPostDay.toDateString()) {
+                previousPostDay = currentPostDay;
+                commentsLists.push(
+                    <DateSeparator
+                        date={currentPostDay}
+                    />);
+            }
+
+            commentsLists.push(
+                <div key={keyPrefix + 'commentKey'}>
+                    <Comment
+                        ref={comPost.id}
+                        post={comPost}
+                        user={p}
+                        currentUser={this.props.currentUser}
+                        compactDisplay={this.state.compactDisplay}
+                        useMilitaryTime={this.props.useMilitaryTime}
+                        isFlagged={isFlagged}
+                        status={status}
+                        isBusy={this.state.isBusy}
+                    />
+                </div>
+            );
+        }
+
         return (
             <div className='post-right__container'>
                 <FileUploadOverlay overlayType='right'/>
@@ -384,6 +435,9 @@ export default class RhsThread extends React.Component {
                         onScroll={this.handleScroll}
                     >
                         <div className='post-right__scroll'>
+                            <DateSeparator
+                                date={previousPostDay}
+                            />
                             <RootPost
                                 ref={selected.id}
                                 post={selected}
@@ -401,41 +455,7 @@ export default class RhsThread extends React.Component {
                                 ref='rhspostlist'
                                 className='post-right-comments-container'
                             >
-                                {postsArray.map((comPost) => {
-                                    let p;
-                                    if (UserStore.getCurrentId() === comPost.user_id) {
-                                        p = UserStore.getCurrentUser();
-                                    } else {
-                                        p = profiles[comPost.user_id];
-                                    }
-
-                                    let isFlagged = false;
-                                    if (this.state.flaggedPosts) {
-                                        isFlagged = this.state.flaggedPosts.get(comPost.id) === 'true';
-                                    }
-
-                                    let status = 'offline';
-                                    if (this.state.statuses && p && p.id) {
-                                        status = this.state.statuses[p.id] || 'offline';
-                                    }
-
-                                    const keyPrefix = comPost.id ? comPost.id : comPost.pending_post_id;
-
-                                    return (
-                                        <Comment
-                                            ref={comPost.id}
-                                            key={keyPrefix + 'commentKey'}
-                                            post={comPost}
-                                            user={p}
-                                            currentUser={this.props.currentUser}
-                                            compactDisplay={this.state.compactDisplay}
-                                            useMilitaryTime={this.props.useMilitaryTime}
-                                            isFlagged={isFlagged}
-                                            status={status}
-                                            isBusy={this.state.isBusy}
-                                        />
-                                    );
-                                })}
+                                {commentsLists}
                             </div>
                             <div className='post-create__container'>
                                 <CreateComment