Zos 572 update "date" behaviour in sidebar (#812)

* update logic * add tests
zer0-os · Jul 18, 2023 · c7641ff · c7641ff
1 parent 16b5054
commit c7641ff
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 17 deletions.
diff --git a/src/components/messenger/list/conversation-item.test.tsx b/src/components/messenger/list/conversation-item.test.tsx
@@ -119,21 +119,6 @@ describe('ConversationItem', () => {
     expect(wrapper.find('.conversation-item__unread-count').text()).toEqual('7');
   });
 
-  it('renders last message timestamp', function () {
-    const now = moment();
-    const wrapper = subject({
-      conversation: {
-        lastMessage: {
-          createdAt: now.valueOf(),
-          sender: { userId: 'id' },
-        },
-        otherMembers: [],
-      } as any,
-    });
-
-    expect(wrapper.find('.conversation-item__timestamp').text()).toEqual(now.format('MMM D'));
-  });
-
   it('renders the message preview', function () {
     const messagePreview = 'I said something here';
 
@@ -272,6 +257,48 @@ describe('ConversationItem', () => {
       expect(wrapper.find('Tooltip').prop('overlay')).toEqual('Johnny Cash, Jackie Chan');
     });
   });
+
+  describe('displayDate', () => {
+    const createWrapper = (createdAt: moment.Moment) => {
+      return subject({
+        conversation: {
+          lastMessage: {
+            createdAt: createdAt.valueOf(),
+            sender: { userId: 'id' },
+          },
+          otherMembers: [],
+        } as any,
+      });
+    };
+
+    it('displays the time of day for messages sent on the current day', () => {
+      const now = moment();
+      const wrapper = createWrapper(now);
+
+      expect(wrapper.find('.conversation-item__timestamp').text()).toEqual(now.format('h:mm A'));
+    });
+
+    it('displays the three-letter day abbreviation for messages sent within the preceding 7 days', () => {
+      const sevenDaysAgo = moment().subtract(5, 'days');
+      const wrapper = createWrapper(sevenDaysAgo);
+
+      expect(wrapper.find('.conversation-item__timestamp').text()).toEqual(sevenDaysAgo.format('ddd'));
+    });
+
+    it('displays the three-letter month abbreviation and day of the month for messages sent in the same calendar year prior to the last 7 days', () => {
+      const messageDate = moment().subtract(10, 'days');
+      const wrapper = createWrapper(messageDate);
+
+      expect(wrapper.find('.conversation-item__timestamp').text()).toEqual(messageDate.format('MMM D'));
+    });
+
+    it('displays the three-letter month abbreviation, day of the month, and the year for messages sent before the current calendar year', () => {
+      const messageDate = moment().subtract(1, 'year').subtract(5, 'days');
+      const wrapper = createWrapper(messageDate);
+
+      expect(wrapper.find('.conversation-item__timestamp').text()).toEqual(messageDate.format('MMM D, YYYY'));
+    });
+  });
 });
 
 function title(wrapper) {

diff --git a/src/components/messenger/list/conversation-item.tsx b/src/components/messenger/list/conversation-item.tsx
@@ -94,9 +94,23 @@ export class ConversationItem extends React.Component<Properties> {
   }
 
   get displayDate() {
-    if (this.props.conversation?.lastMessage?.createdAt) {
-      return moment(this.props.conversation.lastMessage.createdAt).format('MMM D');
+    const { lastMessage } = this.props.conversation;
+
+    if (lastMessage?.createdAt) {
+      const messageDate = moment(lastMessage.createdAt);
+      const currentDate = moment();
+
+      if (messageDate.isSame(currentDate, 'day')) {
+        return messageDate.format('h:mm A');
+      } else if (messageDate.isAfter(currentDate.clone().subtract(7, 'days'), 'day')) {
+        return messageDate.format('ddd');
+      } else if (messageDate.year() === currentDate.year()) {
+        return messageDate.format('MMM D');
+      } else {
+        return messageDate.format('MMM D, YYYY');
+      }
     }
+
     return '';
   }