feat(ActivityStream): load more activities on scroll up

Author: lalli-flores

src/components/WebexActivityStream/WebexActivityStream.js

@@ -1,10 +1,11 @@
-import React, {Fragment} from 'react';
+import React, {Fragment, useRef} 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 {useActivityStream, useActivityScroll, useRoom} from '../hooks';
+import {PREPEND_ACTIVITIES} from '../hooks/useActivityStream';
 import WebexActivity from '../WebexActivity/WebexActivity';
 
 import './WebexActivityStream.scss';
@@ -179,8 +180,15 @@ TimeRuler.propTypes = {
 };
 
 export default function WebexActivityStream({roomID}) {
+  const [activitiesData, dispatch] = useActivityStream(roomID);
+  const loadPreviousActivities = (previousActivities) => {
+    dispatch({type: PREPEND_ACTIVITIES, payload: previousActivities});
+  };
+
   const {title, roomType} = useRoom(roomID);
-  const activitiesData = useActivityStream(roomID);
+  const activityStreamRef = useRef(null);
+  const showLoader = useActivityScroll(roomID, activityStreamRef, loadPreviousActivities);
+
   const personName = roomType === RoomType.DIRECT ? title : '';
   const activities = activitiesData.map((activity) => {
     // If the activity is an object with a date property, it is a time ruler
@@ -194,7 +202,8 @@ export default function WebexActivityStream({roomID}) {
   });
 
   return (
-    <div className="activity-stream">
+    <div className="activity-stream" ref={activityStreamRef}>
+      {showLoader && <div className="activity-stream-loader" />}
       {activities.length ? <Fragment>{activities}</Fragment> : <Greeting personName={personName} />}
     </div>
   );

src/components/WebexActivityStream/WebexActivityStream.scss

@@ -1,3 +1,61 @@
+.activity-stream {
+  position: relative;
+  width: 100%;
+  height: 100px;
+  overflow-y: auto;
+
+  &-loader {
+    position: relative;
+    width: 10px;
+    height: 10px;
+    margin: 1rem auto;
+    border-radius: 5px;
+    background-color: $md-gray-30;
+    color: $md-gray-30;
+    animation: dotFlashing 1s infinite linear alternate;
+    animation-delay: .5s;
+  }
+
+  &-loader::before, &-loader::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+  }
+
+  &-loader::before {
+    left: -15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: $md-gray-30;
+    color: $md-gray-30;
+    animation: dotFlashing 1s infinite alternate;
+    animation-delay: 0s;
+  }
+
+  &-loader::after {
+    left: 15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: $md-gray-30;
+    color: $md-gray-30;
+    animation: dotFlashing 1s infinite alternate;
+    animation-delay: 1s;
+  }
+
+  @keyframes dotFlashing {
+    0% {
+      background-color: $md-gray-30;
+    }
+    50%,
+    100% {
+      background-color: $md-gray-10;
+    }
+  }
+}
+
 .greeting {
   display: block;
   flex-direction: column;

src/components/hooks/__mocks__/useActivityScroll.js

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

src/components/hooks/__mocks__/useActivityStream.js

@@ -2,6 +2,11 @@ import {useContext} from 'react';
 
 export default function useActivityStream(ID) {
   const datasource = useContext();
+  let data = [];
 
-  return `${ID}-activities` in datasource.roomsAdapter ? datasource.roomsAdapter[`${ID}-activities`] : [];
+  if (`${ID}-activities` in datasource.roomsAdapter) {
+    data = datasource.roomsAdapter[`${ID}-activities`];
+  }
+
+  return [data, () => {}];
 }

src/components/hooks/index.js

@@ -1,4 +1,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 useRoom} from './useRoom';

src/components/hooks/useActivityScroll.js

@@ -0,0 +1,66 @@
+import {useContext, useEffect, useState} from 'react';
+import {empty, fromEvent} from 'rxjs';
+import {filter, flatMap} from 'rxjs/operators';
+
+import {AdapterContext} from '../../components/';
+
+/**
+ * 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 returns a loading state to indicate when data is being fetched,
+ * once user has scrolled to the top of the component of the given DOM reference.
+ *
+ * @param {string} roomID  ID of the room from which to fetch data.
+ * @param {object} elementRef  reference to the element to attach scroll listener.
+ * @param {previousActivitiesCallback} callback  Callback to execute once data has been fetched.
+ * @returns {boolean}  Data loading state.
+ */
+export default function useActivityScroll(roomID, elementRef, callback) {
+  const {roomsAdapter} = useContext(AdapterContext);
+  const [showLoader, setShowLoader] = useState(false);
+
+  useEffect(() => {
+    let scrollListener = empty();
+
+    if (elementRef.current) {
+      // Listen to scroll event, and on reaching the top,
+      // And load previous activities if there are any
+      scrollListener = fromEvent(elementRef.current, 'scroll')
+        .pipe(
+          filter((event) => {
+            const isViewportTop = event.target.scrollTop === 0;
+            const loadMoreItems = isViewportTop && roomsAdapter.hasMoreActivities(roomID);
+
+            if (loadMoreItems) {
+              setShowLoader(true);
+            }
+
+            return loadMoreItems;
+          }),
+          flatMap(() => roomsAdapter.getPreviousRoomActivities(roomID))
+        )
+        .subscribe((previousActivities) => {
+          // Show loader for half second
+          setTimeout(() => {
+            callback(previousActivities);
+            setShowLoader(false);
+          }, 500);
+        });
+    }
+
+    return () => {
+      scrollListener.unsubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return showLoader;
+}

src/components/hooks/useActivityStream.js

@@ -2,52 +2,57 @@ import {useContext, useEffect, useReducer} from 'react';
 
 import {AdapterContext} from '../../components/';
 
-const APPEND_ACTIVITIES = 'append_activities';
+export const PREPEND_ACTIVITIES = 'prepend_activities';
+export const APPEND_ACTIVITIES = 'append_activities';
 
 /**
- * Returns a new array of activityIDs based on the given action.
- * If no action is passed, it will return the same activityIDs
+ * Returns a new array of activities based on the given action.
+ * If no action is passed, it will return the same activities
  * array without any changes.
  *
- * @param {Array.<string>} activityIDs activityIDs associated to the room
- * @param {object} action action to apply to given activityIDs
- * @returns {Array.<string>} New activityIDs associated to the room
+ * @param {Array.<string|ActivityDate>} activities activities associated to the room
+ * @param {object} action action to apply to given activities
+ * @returns {Array.<string|ActivityDate>}
  */
-function reducer(activityIDs, action) {
-  let newActivityIDs = [];
+function reducer(activities, action) {
+  let newActivities = [];
 
   switch (action.type) {
+    case PREPEND_ACTIVITIES:
+      newActivities = action.payload.concat(activities);
+      break;
     case APPEND_ACTIVITIES:
-      newActivityIDs = activityIDs.concat(action.payload);
+      newActivities = activities.concat(action.payload);
       break;
     default:
-      newActivityIDs = activityIDs;
+      newActivities = activities;
       break;
   }
 
-  return newActivityIDs;
+  return newActivities;
 }
 
 /**
  * Custom hook that returns activity data associated to the room of the given ID.
  *
  * @param {string} roomID  ID of the room for which to return data.
- * @returns {Room} Activity ID associated to the room
+ * @returns {Array} Activities state and state setter
  */
 export default function useActivityStream(roomID) {
-  const [activityIDs, dispatch] = useReducer(reducer, []);
   const {roomsAdapter} = useContext(AdapterContext);
+  const [activities, dispatch] = useReducer(reducer, []);
 
+  // Subscribe to future updates on load
   useEffect(() => {
-    const subscription = roomsAdapter.getRoomActivities(roomID).subscribe((activities) => {
-      dispatch({type: APPEND_ACTIVITIES, payload: activities});
+    const activityUpdates = roomsAdapter.getRoomActivities(roomID).subscribe((activityData) => {
+      dispatch({type: APPEND_ACTIVITIES, payload: activityData});
     });
 
     return () => {
-      subscription.unsubscribe();
+      activityUpdates.unsubscribe();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return activityIDs;
+  return [activities, dispatch];
 }