feat(WebexParticipantRoster): add participant roster component

src/components/WebexParticipantRoster/WebexParticipantRoster.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {List} from '@momentum-ui/react';
+
+import WebexParticipant from '../WebexParticipant/WebexParticipant';
+import useParticipants from '../hooks/useParticipants';
+
+/**
+ * Displays the roster of Webex meeting or room participants.
+ *
+ * @param {string} props.location  the roster of Webex meeting or room participants.
+ *
+ * @returns {object} JSX of the component
+ */
+export default function WebexParticipantRoster({destination}) {
+  const participants = useParticipants(destination);
+
+  const participantList = participants.map((participant) => <WebexParticipant personID={participant.personID} />);
+
+  return <List>{participantList}</List>;
+}
+
+WebexParticipantRoster.propTypes = {
+  destination: PropTypes.string.isRequired,
+};

src/components/WebexParticipantRoster/WebexParticipantRoster.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+
+import jsonData from '../../data';
+import {WebexJSONAdapter} from '../../adapters';
+
+import WebexParticipantRoster from './WebexParticipantRoster';
+
+import {WebexDataProvider} from '..';
+
+// Setup for the stories
+const stories = storiesOf('Webex Participant Roster', module);
+const webexAdapter = new WebexJSONAdapter(jsonData);
+
+// Stories
+stories.add('default', () => (
+  <WebexDataProvider adapter={webexAdapter}>
+    <WebexParticipantRoster destination="default_membership" />
+  </WebexDataProvider>
+));

src/components/WebexParticipantRoster/WebexParticipantRoster.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import WebexParticipantRoster from './WebexParticipantRoster';
+
+jest.mock('../hooks/usePerson');
+
+describe('Webex Participant Roster component', () => {
+  describe('snapshot', () => {
+    test('matches snapshot of webex participant roster', () => {
+      expect(shallow(<WebexParticipantRoster destination="default_membership" />)).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Webex Participant Roster component snapshot matches snapshot of webex participant roster 1`] = `
+<List
+  active={null}
+  className=""
+  focus={null}
+  focusFirst={true}
+  focusFirstQuery=""
+  focusQuery=""
+  id={null}
+  itemRole="listitem"
+  onSelect={null}
+  role="list"
+  shouldFocusActive={false}
+  shouldFocusInitial={true}
+  shouldLoop={true}
+  tabType="vertical"
+  trackActive={true}
+  type={null}
+  wrap={false}
+/>
+`;

src/components/hooks/__mocks__/useParticipants.js

@@ -0,0 +1,12 @@
+import {useContext} from 'react';
+
+export default function useParticipants(membershipID) {
+  const datasource = useContext();
+  let participants = {...datasource.membershipsAdapter[membershipID]};
+
+  if (!(membershipID in datasource.membershipsAdapter)) {
+    participants = [];
+  }
+
+  return participants;
+}

src/components/hooks/useParticipants.js

@@ -0,0 +1,34 @@
+import {useEffect, useContext, useState} from 'react';
+
+import {AdapterContext} from '../../components/';
+
+/**
+ * Custom hook that returns a list of participant IDs given a membership ID.
+ *
+ * @param {string} membershipID  ID of the room/meeting that contains the participants
+ * @returns {Array.<Person>} List of the person IDs from the participants
+ */
+export default function useParticipants(membershipID) {
+  const [participants, setParticipants] = useState([]);
+  const {membershipsAdapter} = useContext(AdapterContext);
+
+  useEffect(() => {
+    const onError = (error) => {
+      setParticipants([]);
+
+      // eslint-disable-next-line no-console
+      console.error(error.message);
+    };
+    const onMembers = (data) => {
+      setParticipants(data.members);
+    };
+
+    const subscription = membershipsAdapter.getMembers(membershipID).subscribe(onMembers, onError);
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [membershipsAdapter, membershipID]);
+
+  return participants;
+}

src/components/index.js

@@ -10,3 +10,5 @@ export {default as WebexMeetingControl} from './WebexMeetingControl/WebexMeeting
 export {default as WebexMeetingControls, MeetingContext} from './WebexMeetingControl/WebexMeetingControls';
 export {default as WebexMeetingInfo} from './WebexMeetingInfo/WebexMeetingInfo';
 export {default as WebexRemoteMedia} from './WebexRemoteMedia/WebexRemoteMedia';
+export {default as WebexParticipant} from './WebexParticipant/WebexParticipant';
+export {default as WebexParticipantRoster} from './WebexParticipantRoster/WebexParticipantRoster';