From f38120def8d3ab4db1f5fa1fc0e854d8cbdd92a1 Mon Sep 17 00:00:00 2001
From: Victor Malai <malai9696@gmail.com>
Date: Wed, 10 Mar 2021 10:28:58 +0200
Subject: [PATCH] feat: webexMemberRoster add separator for in meeting and
 notInMeeting

---
 .../WebexMemberRoster/WebexMemberRoster.jsx   | 30 +++++++++++++++++--
 .../WebexMemberRoster/WebexMemberRoster.scss  |  6 ++++
 src/components/_components.scss               |  1 +
 src/data/memberships.js                       | 20 ++++++-------
 4 files changed, 45 insertions(+), 12 deletions(-)
 create mode 100644 src/components/WebexMemberRoster/WebexMemberRoster.scss

diff --git a/src/components/WebexMemberRoster/WebexMemberRoster.jsx b/src/components/WebexMemberRoster/WebexMemberRoster.jsx
index 701ef8503..5c421fdda 100644
--- a/src/components/WebexMemberRoster/WebexMemberRoster.jsx
+++ b/src/components/WebexMemberRoster/WebexMemberRoster.jsx
@@ -24,11 +24,37 @@ import useMemberships from '../hooks/useMemberships';
  */
 export default function WebexMemberRoster({destinationID, destinationType}) {
   const memberships = useMemberships(destinationID, destinationType);
-  const members = memberships.map(
+
+  const getMembersNode = (data) => (data || []).map(
     (member) => <WebexMember key={member.personID} personID={member.personID} />,
   );
 
-  return <div className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-roster`}>{members}</div>;
+  if (destinationType !== 'meeting') {
+    return <div className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-roster`}>{getMembersNode(memberships)}</div>;
+  }
+
+  const groupBy = (items, key) => items.reduce(
+    (result, item) => ({
+      ...result,
+      [item[key]]: [
+        ...(result[item[key]] || []),
+        item,
+      ],
+    }),
+    {},
+  );
+
+  const groupedMembers = groupBy(memberships, 'isInMeeting');
+
+  return (
+    <div className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-roster-container`}>
+      <div className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-roster-separator`}>In Meeting</div>
+      <div className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-roster`}>{getMembersNode(groupedMembers.true)}</div>
+
+      <div className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-roster-separator`}>Not in Meeting</div>
+      <div className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-roster`}>{getMembersNode(groupedMembers.false)}</div>
+    </div>
+  );
 }
 
 WebexMemberRoster.propTypes = {
diff --git a/src/components/WebexMemberRoster/WebexMemberRoster.scss b/src/components/WebexMemberRoster/WebexMemberRoster.scss
new file mode 100644
index 000000000..214662f64
--- /dev/null
+++ b/src/components/WebexMemberRoster/WebexMemberRoster.scss
@@ -0,0 +1,6 @@
+.#{$WEBEX_COMPONENTS_CLASS_PREFIX}-roster-separator {
+    @include body-fonts;
+    color: $md-gray-40;
+    border-bottom: 1px solid $md-gray-30;
+  }
+  
\ No newline at end of file
diff --git a/src/components/_components.scss b/src/components/_components.scss
index 2f1007a61..70825a599 100644
--- a/src/components/_components.scss
+++ b/src/components/_components.scss
@@ -7,4 +7,5 @@
 @import 'WebexMeetingControl/WebexMeetingControls';
 @import 'WebexMeetingInfo/WebexMeetingInfo';
 @import 'WebexMember/WebexMember';
+@import 'WebexMemberRoster/WebexMemberRoster';
 @import 'WebexRemoteMedia/WebexRemoteMedia';
diff --git a/src/data/memberships.js b/src/data/memberships.js
index a3fd8c81e..2ffc56772 100644
--- a/src/data/memberships.js
+++ b/src/data/memberships.js
@@ -4,10 +4,10 @@ export default {
     destinationID: 'room1',
     destinationType: 'room',
     members: [
-      {personID: 'user1'},
-      {personID: 'user2'},
-      {personID: 'user3'},
-      {personID: 'user4'},
+      {personID: 'user1', isInMeeting: true},
+      {personID: 'user2', isInMeeting: false},
+      {personID: 'user3', isInMeeting: true},
+      {personID: 'user4', isInMeeting: true},
     ],
   },
   membership2: {
@@ -15,9 +15,9 @@ export default {
     destinationID: 'room2',
     destinationType: 'room',
     members: [
-      {personID: 'user1'},
-      {personID: 'user5'},
-      {personID: 'user6'},
+      {personID: 'user1', isInMeeting: false},
+      {personID: 'user5', isInMeeting: false},
+      {personID: 'user6', isInMeeting: true},
     ],
   },
   membership3: {
@@ -25,9 +25,9 @@ export default {
     destinationID: 'meeting1',
     destinationType: 'meeting',
     members: [
-      {personID: 'user1'},
-      {personID: 'user2'},
-      {personID: 'user3'},
+      {personID: 'user1', isInMeeting: false},
+      {personID: 'user2', isInMeeting: true},
+      {personID: 'user3', isInMeeting: true},
     ],
   },
   membership4: {