Show date for msgs older than a day

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/molecules/message/Message.jsx

@@ -412,7 +412,7 @@ function getEditedBody(editedMEvent) {
 }
 
 function Message({
-  mEvent, isBodyOnly, roomTimeline, focus,
+  mEvent, isBodyOnly, roomTimeline, focus, time
 }) {
   const [isEditing, setIsEditing] = useState(false);
 
@@ -431,7 +431,6 @@ function Message({
   let { body } = content;
   const avatarSrc = mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop');
   const username = getUsernameOfRoomMember(mEvent.sender);
-  const time = `${dateFormat(mEvent.getDate(), 'hh:MM TT')}`;
 
   if (typeof body === 'undefined') return null;
   if (msgType === 'm.emote') className.push('message--type-emote');
@@ -627,6 +626,7 @@ Message.propTypes = {
   isBodyOnly: PropTypes.bool,
   roomTimeline: PropTypes.shape({}).isRequired,
   focus: PropTypes.bool,
+  time: PropTypes.string.isRequired,
 };
 
 export { Message, MessageReply, PlaceholderMessage };

src/app/organisms/room/RoomViewContent.jsx

@@ -15,7 +15,7 @@ import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 import { openProfileViewer } from '../../../client/action/navigation';
 import {
-  diffMinutes, isNotInSameDay, Throttle, getScrollInfo,
+  diffMinutes, isInSameDay, Throttle, getScrollInfo,
 } from '../../../util/common';
 
 import Divider from '../../atoms/divider/Divider';
@@ -87,6 +87,10 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
     && diffMinutes(mEvent.getDate(), prevMEvent.getDate()) <= MAX_MSG_DIFF_MINUTES
     && prevMEvent.getSender() === mEvent.getSender()
   );
+  const mDate = mEvent.getDate();
+  const isToday = isInSameDay(mDate, new Date());
+
+  const time = dateFormat(mDate, isToday ? 'hh:MM TT' : 'dd/mm/yyyy');
 
   if (mEvent.getType() === 'm.room.member') {
     const timelineChange = parseTimelineChange(mEvent);
@@ -96,7 +100,7 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
         key={mEvent.getId()}
         variant={timelineChange.variant}
         content={timelineChange.content}
-        time={`${dateFormat(mEvent.getDate(), 'hh:MM TT')}`}
+        time={time}
       />
     );
   }
@@ -107,6 +111,7 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
       isBodyOnly={isBodyOnly}
       roomTimeline={roomTimeline}
       focus={isFocus}
+      time={time}
     />
   );
 }
@@ -578,7 +583,7 @@ function RoomViewContent({ eventId, roomTimeline }) {
         itemCountIndex += 1;
         if (jumpToItemIndex === -1) jumpToItemIndex = itemCountIndex;
       }
-      const dayDivider = prevMEvent && isNotInSameDay(mEvent.getDate(), prevMEvent.getDate());
+      const dayDivider = prevMEvent && !isInSameDay(mEvent.getDate(), prevMEvent.getDate());
       if (dayDivider) {
         tl.push(<Divider key={`divider-${mEvent.getId()}`} text={`${dateFormat(mEvent.getDate(), 'mmmm dd, yyyy')}`} />);
         itemCountIndex += 1;

src/app/organisms/room/RoomViewFloating.jsx

@@ -22,9 +22,9 @@ function useJumpToEvent(roomTimeline) {
     roomTimeline.loadEventTimeline(eventId);
   };
 
-  const cancelJumpToEvent = (mEvent) => {
+  const cancelJumpToEvent = () => {
+    roomTimeline.markAllAsRead();
     setEventId(null);
-    if (!mEvent) roomTimeline.markAllAsRead();
   };
 
   useEffect(() => {
@@ -35,10 +35,12 @@ function useJumpToEvent(roomTimeline) {
     if (!readEventId.startsWith('~') && !roomTimeline.hasEventInTimeline(readEventId)) {
       setEventId(readEventId);
     }
-    roomTimeline.on(cons.events.roomTimeline.MARKED_AS_READ, cancelJumpToEvent);
+
+    const handleMarkAsRead = () => setEventId(null);
+    roomTimeline.on(cons.events.roomTimeline.MARKED_AS_READ, handleMarkAsRead);
 
     return () => {
-      roomTimeline.removeListener(cons.events.roomTimeline.MARKED_AS_READ, cancelJumpToEvent);
+      roomTimeline.removeListener(cons.events.roomTimeline.MARKED_AS_READ, handleMarkAsRead);
       setEventId(null);
     };
   }, [roomTimeline]);

src/util/common.js

@@ -13,11 +13,11 @@ export function diffMinutes(dt2, dt1) {
   return Math.abs(Math.round(diff));
 }
 
-export function isNotInSameDay(dt2, dt1) {
+export function isInSameDay(dt2, dt1) {
   return (
-    dt2.getDay() !== dt1.getDay()
+    dt2.getDay() === dt1.getDay()
-    || dt2.getMonth() !== dt1.getMonth()
+    && dt2.getMonth() === dt1.getMonth()
-    || dt2.getYear() !== dt1.getYear()
+    && dt2.getYear() === dt1.getYear()
   );
 }