feat(ActivityStream): implement component default state

Author: akoushke

src/components/WebexActivityStream/WebexActivityStream.js

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
 
 import {RoomType} from '../../adapters/RoomsAdapter';
+import {useActivityStream, useRoom} from '../hooks';
+import WebexActivity from '../WebexActivity/WebexActivity';
+
 import './WebexActivityStream.scss';
-import {useRoom, useActivityStream} from '../hooks';
 
 export function GreetingDirectSVG() {
   return (
@@ -137,15 +139,27 @@ Greeting.propTypes = {
 };
 
 export default function WebexActivityStream(props) {
-  const {roomID, adapter} = props;
-  const {title, roomType} = useRoom(roomID, adapter);
-  const activityIDs = useActivityStream(roomID, adapter);
+  const {roomID, adapters} = props;
+  const {roomsAdapter, activitiesAdapter, peopleAdapter} = adapters;
+  const {title, roomType} = useRoom(roomID, roomsAdapter);
+  const activityIDs = useActivityStream(roomID, roomsAdapter);
   const personName = roomType === RoomType.DIRECT ? title : '';
+  const activities = activityIDs.map((activityID) => (
+    <WebexActivity key={activityID} activityID={activityID} adapters={{activitiesAdapter, peopleAdapter}} />
+  ));
 
-  return <div className="activity-stream">{!activityIDs.length && <Greeting personName={personName} />}</div>;
+  return (
+    <div className="activity-stream">
+      {activityIDs.length ? <Fragment>{activities}</Fragment> : <Greeting personName={personName} />}
+    </div>
+  );
 }
 
 WebexActivityStream.propTypes = {
   roomID: PropTypes.string.isRequired,
-  adapter: PropTypes.object.isRequired,
+  adapters: PropTypes.exact({
+    roomsAdapter: PropTypes.object.isRequired,
+    activitiesAdapter: PropTypes.object.isRequired,
+    peopleAdapter: PropTypes.object.isRequired,
+  }).isRequired,
 };

src/components/WebexActivityStream/WebexActivityStream.stories.js

@@ -1,16 +1,22 @@
 import React from 'react';
 import {storiesOf} from '@storybook/react';
 
-import RoomsJSONAdapter from '../../adapters/RoomsJSONAdapter';
-import rooms from '../../data/rooms';
+import {ActivitiesJSONAdapter, PeopleJSONAdapter, RoomsJSONAdapter} from '../../adapters';
+import {activities, people, rooms} from '../../data';
 
 import WebexActivityStream from './WebexActivityStream';
 
 // Setup for the stories
 const stories = storiesOf('Webex Activity Stream', module);
-const adapter = new RoomsJSONAdapter(rooms);
+const adapters = {
+  roomsAdapter: new RoomsJSONAdapter(rooms),
+  activitiesAdapter: new ActivitiesJSONAdapter(activities),
+  peopleAdapter: new PeopleJSONAdapter(people),
+};
 
 // Stories
-stories.add('empty group stream', () => <WebexActivityStream roomID="default" adapter={adapter} />);
+stories.add('default', () => <WebexActivityStream roomID="default" adapters={adapters} />);
 
-stories.add('empty 1:1 stream', () => <WebexActivityStream roomID="direct" adapter={adapter} />);
+stories.add('empty group stream', () => <WebexActivityStream roomID="empty-space" adapters={adapters} />);
+
+stories.add('empty 1:1 stream', () => <WebexActivityStream roomID="empty-direct" adapters={adapters} />);

src/components/WebexActivityStream/WebexActivityStream.test.js

@@ -1,18 +1,22 @@
 import React from 'react';
 
-import RoomsJSONAdapter from '../../adapters/RoomsJSONAdapter';
-import rooms from '../../data/rooms';
+import {ActivitiesJSONAdapter, PeopleJSONAdapter, RoomsJSONAdapter} from '../../adapters';
+import {activities, people, rooms} from '../../data';
 
 import WebexActivityStream, {Greeting, GreetingSpaceSVG, GreetingDirectSVG} from './WebexActivityStream';
 
 jest.mock('../hooks/useRoom');
 jest.mock('../hooks/useActivityStream');
 
 describe('Webex Activity Stream component', () => {
-  let roomsAdapter;
+  let adapters;
 
   beforeEach(() => {
-    roomsAdapter = new RoomsJSONAdapter(rooms);
+    adapters = {
+      roomsAdapter: new RoomsJSONAdapter(rooms),
+      activitiesAdapter: new ActivitiesJSONAdapter(activities),
+      peopleAdapter: new PeopleJSONAdapter(people),
+    };
   });
 
   describe('Greeting Space SVG snapshot', () => {
@@ -38,16 +42,19 @@ describe('Webex Activity Stream component', () => {
   });
 
   describe('Webex Activity Stream snapshots', () => {
+    test('matches with default stream', () => {
+      expect(shallow(<WebexActivityStream roomID="default" adapters={adapters} />)).toMatchSnapshot();
+    });
     test('matches with empty group stream', () => {
-      expect(shallow(<WebexActivityStream roomID="default" adapter={roomsAdapter} />)).toMatchSnapshot();
+      expect(shallow(<WebexActivityStream roomID="empty-space" adapters={adapters} />)).toMatchSnapshot();
     });
 
     test('matches with empty direct stream', () => {
-      expect(shallow(<WebexActivityStream roomID="direct" adapter={roomsAdapter} />)).toMatchSnapshot();
+      expect(shallow(<WebexActivityStream roomID="empty-direct" adapters={adapters} />)).toMatchSnapshot();
     });
   });
 
   afterEach(() => {
-    roomsAdapter = null;
+    adapters = null;
   });
 });