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

webapp/components/post_view/components/date_separator.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {FormattedDate} from 'react-intl';
+
+export default class DateSeparator extends React.Component {
+    render() {
+        return (
+            <div
+                className='date-separator'
+            >
+                <hr className='separator__hr'/>
+                <div className='separator__text'>
+                    <FormattedDate
+                        value={this.props.date}
+                        weekday='short'
+                        month='short'
+                        day='2-digit'
+                        year='numeric'
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+DateSeparator.propTypes = {
+    date: React.PropTypes.instanceOf(Date)
+};

webapp/components/rhs_comment.jsx

@@ -564,9 +564,6 @@ export default class RhsComment extends React.Component {
         }
 
         const timeOptions = {
-            day: 'numeric',
-            month: 'short',
-            year: 'numeric',
             hour: '2-digit',
             minute: '2-digit',
             hour12: !this.props.useMilitaryTime

webapp/components/rhs_root_post.jsx

@@ -511,9 +511,6 @@ export default class RhsRootPost extends React.Component {
         }
 
         const timeOptions = {
-            day: 'numeric',
-            month: 'short',
-            year: 'numeric',
             hour: '2-digit',
             minute: '2-digit',
             hour12: !this.props.useMilitaryTime

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) => {
+                                {commentsLists}
-                                    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}
-                                        />
-                                    );
-                                })}
                             </div>
                             <div className='post-create__container'>
                                 <CreateComment

webapp/sass/layout/_post-right.scss

@@ -53,6 +53,12 @@
         border: none;
     }
 
+    .date-separator {
+        hr {
+            border-top: 1px solid #eee;
+        }
+    }
+
     .post-create__container {
         width: 100%;
 
@@ -147,7 +153,8 @@
     @include flex(1 1 auto);
     overflow: auto;
     position: relative;
-
+    padding-top: 10px;
+    
     .file-preview__container {
         margin-top: 5px;
     }