feat(ActivityStream): load previous activities until container is filled

Author: lalli-flores

src/components/WebexActivity/WebexActivity.scss

@@ -2,6 +2,8 @@ $content-left-margin: 3.5rem; //avatar width + margin
 .activity {
   display: flex;
   flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
   margin: 0.5rem 0;
 
   .activity-header {

src/components/WebexActivityStream/WebexActivityStream.js

@@ -4,7 +4,7 @@ import {ListSeparator} from '@momentum-ui/react';
 import {format, isToday, isSameWeek, isYesterday} from 'date-fns';
 
 import {RoomType} from '../../adapters/RoomsAdapter';
-import {useActivityStream, useActivityScroll, useRoom} from '../hooks';
+import {useActivityStream, useActivityScroll, useOverflowActivities, useRoom} from '../hooks';
 import {PREPEND_ACTIVITIES} from '../hooks/useActivityStream';
 import WebexActivity from '../WebexActivity/WebexActivity';
 
@@ -188,6 +188,7 @@ export default function WebexActivityStream({roomID}) {
   const {title, roomType} = useRoom(roomID);
   const activityStreamRef = useRef(null);
   const showLoader = useActivityScroll(roomID, activityStreamRef, loadPreviousActivities);
+  const lastActivityRef = useOverflowActivities(roomID, activityStreamRef, loadPreviousActivities);
 
   const personName = roomType === RoomType.DIRECT ? title : '';
   const activities = activitiesData.map((activity) => {
@@ -205,6 +206,7 @@ export default function WebexActivityStream({roomID}) {
     <div className="activity-stream" ref={activityStreamRef}>
       {showLoader && <div className="activity-stream-loader" />}
       {activities.length ? <Fragment>{activities}</Fragment> : <Greeting personName={personName} />}
+      <div className="last-activity" ref={lastActivityRef} />
     </div>
   );
 }

src/components/WebexActivityStream/WebexActivityStream.scss

@@ -1,7 +1,12 @@
+// For Storybook, so that activity stream loads content properly
+#root {
+  height: 100%;
+}
+
 .activity-stream {
   position: relative;
   width: 100%;
-  height: 100px;
+  height: 100%;
   overflow-y: auto;
 
   &-loader {

src/components/WebexActivityStream/__snapshots__/WebexActivityStream.test.js.snap

@@ -186,6 +186,9 @@ exports[`Webex Activity Stream component Webex Activity Stream snapshots matches
     activityID="long"
     key="long"
   />
+  <div
+    className="last-activity"
+  />
 </div>
 `;
 
@@ -196,6 +199,9 @@ exports[`Webex Activity Stream component Webex Activity Stream snapshots matches
   <Greeting
     personName="Webex Component User"
   />
+  <div
+    className="last-activity"
+  />
 </div>
 `;
 
@@ -206,6 +212,9 @@ exports[`Webex Activity Stream component Webex Activity Stream snapshots matches
   <Greeting
     personName=""
   />
+  <div
+    className="last-activity"
+  />
 </div>
 `;
 
@@ -237,5 +246,8 @@ exports[`Webex Activity Stream component Webex Activity Stream snapshots matches
     activityID="multi-line"
     key="multi-line"
   />
+  <div
+    className="last-activity"
+  />
 </div>
 `;

src/components/hooks/__mocks__/useOverflowActivities.js

@@ -0,0 +1,3 @@
+export default function usePreviousActivities() {
+  return {};
+}

src/components/hooks/index.js

@@ -2,4 +2,5 @@ export {default as useActivity} from './useActivity';
 export {default as useActivityScroll} from './useActivityScroll';
 export {default as useActivityStream} from './useActivityStream';
 export {default as usePerson} from './usePerson';
+export {default as useOverflowActivities} from './useOverflowActivities';
 export {default as useRoom} from './useRoom';

src/components/hooks/useOverflowActivities.js

@@ -0,0 +1,67 @@
+import {useContext, useEffect, useRef, useState} from 'react';
+import {Observable} from 'rxjs';
+import {flatMap} from 'rxjs/operators';
+
+import {AdapterContext} from '..';
+
+/**
+ * Callback function to execute once data has been fetched.
+ *
+ * @callback previousActivitiesCallback
+ * @param {Array.<string|ActivityDate>} previousActivities Array of previous activities fetched
+ * @returns undefined
+ */
+
+/**
+ * Custom hook that returns a reference to the DOM element of the last activity.
+ * Requests previous activity data for the given room, and executes
+ * the given callback with that data.
+ * It completes once there is enough data to fill the viewport of the
+ * parent container, finishing by scrolling into view the last activity.
+ *
+ * @param {string} roomID  ID of the room for which to load data.
+ * @param {object} elementRef  DOM reference of the parent component.
+ * @param {previousActivitiesCallback} callback  Callback to execute once data has been fetched.
+ * @returns {object}  DOM reference to the the last activity.
+ */
+export default function useOverflowActivities(roomID, elementRef, callback) {
+  const lastElementRef = useRef(null);
+  const {roomsAdapter} = useContext(AdapterContext);
+  const [scrollToLastActivity, setScrollToLastActivity] = useState(false);
+  const [lastActivityBottom, setLastActivityBottom] = useState(0);
+
+  useEffect(() => {
+    const activityStreamBoundaries = elementRef.current.getBoundingClientRect();
+    const lastActivityBoundaries = lastElementRef.current.getBoundingClientRect();
+
+    // If the bottom position of the last activity is less than
+    // the bottom position of the container that means that the last
+    // activity is visible and there is not enough content to overflow
+    // the container
+    const loadMoreActivities = Observable.create((observer) => {
+      if (lastActivityBoundaries.bottom < activityStreamBoundaries.bottom) {
+        observer.next();
+      } else {
+        if (!scrollToLastActivity) {
+          lastElementRef.current.scrollIntoView();
+          setScrollToLastActivity(true);
+        }
+
+        // Once enough content has loaded, complete
+        observer.complete();
+      }
+    })
+      .pipe(flatMap(() => roomsAdapter.getPreviousRoomActivities(roomID)))
+      .subscribe((previousActivities) => {
+        callback(previousActivities);
+        setLastActivityBottom(lastActivityBoundaries.bottom);
+      });
+
+    return () => {
+      loadMoreActivities.unsubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastActivityBottom]);
+
+  return lastElementRef;
+}