feat(ActivityStream): add TimeRuler component

Author: adamweeks

src/components/WebexActivityStream/WebexActivityStream.js

@@ -1,12 +1,44 @@
 import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
+import {ListSeparator} from '@momentum-ui/react';
+import {format, isToday, isSameWeek, isYesterday} from 'date-fns';
 
 import {RoomType} from '../../adapters/RoomsAdapter';
 import {useActivityStream, useRoom} from '../hooks';
 import WebexActivity from '../WebexActivity/WebexActivity';
 
 import './WebexActivityStream.scss';
 
+/**
+ * Returns a formatted timestamp based on the given date's offset from the current time.
+ *
+ * Divisor for messages from today display today
+ * Divisor for messages from dates from a previous day display as Yesterday
+ * Divisor for messages of dates from a previous day of the week (but not yesterday) display as <day of the week>
+ * Divisor for messages of dates older than a week from today display as M/D/YY
+ *
+ * @param {Date} timestamp Date instance to format
+ * @returns {string} formattedDate
+ */
+export function formatTimeRulerText(timestamp) {
+  let formattedDate;
+
+  if (isToday(timestamp)) {
+    formattedDate = 'today';
+  } else if (isYesterday(timestamp)) {
+    // Yesterday
+    formattedDate = 'Yesterday';
+  } else if (isSameWeek(timestamp, new Date())) {
+    // Monday
+    formattedDate = format(timestamp, 'iiii');
+  } else {
+    // 1/1/2020
+    formattedDate = format(timestamp, 'P');
+  }
+
+  return formattedDate;
+}
+
 export function GreetingDirectSVG() {
   return (
     <svg
@@ -138,19 +170,34 @@ Greeting.propTypes = {
   personName: PropTypes.string.isRequired,
 };
 
+export function TimeRuler({text}) {
+  return <ListSeparator className="time-ruler" role="listitem" text={text} />;
+}
+
+TimeRuler.propTypes = {
+  text: PropTypes.string.isRequired,
+};
+
 export default function WebexActivityStream(props) {
   const {roomID, adapters} = props;
   const {roomsAdapter, activitiesAdapter, peopleAdapter} = adapters;
   const {title, roomType} = useRoom(roomID, roomsAdapter);
-  const activityIDs = useActivityStream(roomID, roomsAdapter);
+  const activitiesData = useActivityStream(roomID, roomsAdapter);
   const personName = roomType === RoomType.DIRECT ? title : '';
-  const activities = activityIDs.map((activityID) => (
-    <WebexActivity key={activityID} activityID={activityID} adapters={{activitiesAdapter, peopleAdapter}} />
-  ));
+  const activities = activitiesData.map((activity) => {
+    // If the activity is an object with a date property, it is a time ruler
+    const activityComponent = activity.date ? (
+      <TimeRuler key={activity.date.toString()} text={formatTimeRulerText(new Date(activity.date))} />
+    ) : (
+      <WebexActivity key={activity} activityID={activity} adapters={{activitiesAdapter, peopleAdapter}} />
+    );
+
+    return activityComponent;
+  });
 
   return (
     <div className="activity-stream">
-      {activityIDs.length ? <Fragment>{activities}</Fragment> : <Greeting personName={personName} />}
+      {activities.length ? <Fragment>{activities}</Fragment> : <Greeting personName={personName} />}
     </div>
   );
 }

src/components/WebexActivityStream/WebexActivityStream.scss

@@ -16,3 +16,7 @@
     padding: 0 3.125rem;
   }
 }
+
+.time-ruler {
+  padding: 0 3rem;
+}

src/components/WebexActivityStream/WebexActivityStream.stories.js

@@ -20,3 +20,5 @@ stories.add('default', () => <WebexActivityStream roomID="default" adapters={ada
 stories.add('empty group stream', () => <WebexActivityStream roomID="empty-space" adapters={adapters} />);
 
 stories.add('empty 1:1 stream', () => <WebexActivityStream roomID="empty-direct" adapters={adapters} />);
+
+stories.add('with time rulers', () => <WebexActivityStream roomID="time-rulers" adapters={adapters} />);

src/components/WebexActivityStream/WebexActivityStream.test.js

@@ -52,6 +52,10 @@ describe('Webex Activity Stream component', () => {
     test('matches with empty direct stream', () => {
       expect(shallow(<WebexActivityStream roomID="empty-direct" adapters={adapters} />)).toMatchSnapshot();
     });
+
+    test('matches with time rulers stream', () => {
+      expect(shallow(<WebexActivityStream roomID="time-rulers" adapters={adapters} />)).toMatchSnapshot();
+    });
   });
 
   afterEach(() => {