✨(front) add the jid in ParticipantType

Add the jid in ParticipantType and update the participantTrackingPlugin in order to record this information jointly to the name of the user.
openfun · Mar 23, 2022 · 4fa9376 · 4fa9376
1 parent 930a733
commit 4fa9376
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 25 deletions.
diff --git a/src/frontend/data/stores/useParticipantsStore/index.spec.tsx b/src/frontend/data/stores/useParticipantsStore/index.spec.tsx
@@ -1,35 +1,62 @@
 import { useParticipantsStore } from '.';
 
 const participant1 = {
+  id: '[email protected]',
   isInstructor: true,
   isOnStage: true,
-  name: 'Instructor',
+  name: 'Instructor 1',
 };
 
 const participant2 = {
+  id: '[email protected]',
+  isInstructor: true,
+  isOnStage: true,
+  name: 'Instructor 2',
+};
+
+const participant3 = {
+  id: '[email protected]',
   isInstructor: false,
   isOnStage: true,
   name: 'Student 1',
 };
 
-const participant3 = {
+const participant4 = {
+  id: '[email protected]',
   isInstructor: false,
   isOnStage: false,
   name: 'Student 2',
 };
 
+const sameIdParticipant1 = {
+  id: '[email protected]',
+  isInstructor: false,
+  isOnStage: false,
+  name: 'Generic participant',
+};
+
+const sameNameParticipant1 = {
+  id: '[email protected]',
+  isInstructor: false,
+  isOnStage: false,
+  name: 'Instructor 1',
+};
+
 describe('useParticipantsStore', () => {
   it('executes useParticipantsStore/addParticipant', () => {
     expect(useParticipantsStore.getState().participants).toEqual([]);
 
+    useParticipantsStore.getState().addParticipant(participant4);
     useParticipantsStore.getState().addParticipant(participant1);
-    useParticipantsStore.getState().addParticipant(participant2);
     useParticipantsStore.getState().addParticipant(participant3);
+    useParticipantsStore.getState().addParticipant(participant2);
 
+    // Expect array to be alphabetically ordered, with instructors first
     expect(useParticipantsStore.getState().participants).toEqual([
       participant1,
       participant2,
       participant3,
+      participant4,
     ]);
   });
 
@@ -46,4 +73,14 @@ describe('useParticipantsStore', () => {
       participant2,
     ]);
   });
+
+  it('tries to add participant with same id and same name', () => {
+    useParticipantsStore.getState().addParticipant(participant1);
+    useParticipantsStore.getState().addParticipant(sameIdParticipant1);
+    useParticipantsStore.getState().addParticipant(sameNameParticipant1);
+
+    expect(useParticipantsStore.getState().participants).toEqual([
+      participant1,
+    ]);
+  });
 });
diff --git a/src/frontend/data/stores/useParticipantsStore/index.ts b/src/frontend/data/stores/useParticipantsStore/index.ts
@@ -1,6 +1,7 @@
 import create from 'zustand';
 
 export type ParticipantType = {
+  id: string;
   isInstructor: boolean;
   isOnStage: boolean;
   name: string;
@@ -18,18 +19,26 @@ export const useParticipantsStore = create<State>((set) => ({
     set((state) => {
       if (
         !state.participants.some(
-          (participant) => participant.name === newParticipant.name,
+          (participant) =>
+            participant.name === newParticipant.name ||
+            participant.id === newParticipant.id,
         )
       ) {
         return {
           participants: state.participants
             .concat({
+              id: newParticipant.id,
               isInstructor: newParticipant.isInstructor,
               isOnStage: newParticipant.isOnStage,
               name: newParticipant.name,
             })
+            // Order participants alphabetically, with instructors first
             .sort((participantA, participantB) =>
-              participantA.name.localeCompare(participantB.name),
+              participantA.isInstructor === participantB.isInstructor
+                ? participantA.name.localeCompare(participantB.name)
+                : participantA.isInstructor
+                ? -1
+                : 1,
             ),
         };
       } else {

diff --git a/src/frontend/utils/conversejs/converse-plugins/participantsTrackingPlugin.ts b/src/frontend/utils/conversejs/converse-plugins/participantsTrackingPlugin.ts
@@ -12,36 +12,26 @@ const addParticipantsTrackingPlugin = () =>
       _converse.on('initialized', () => {
         _converse.connection.addHandler(
           (stanza: HTMLElement) => {
-            if (
-              stanza.getAttribute('from') !== null &&
-              stanza.getAttribute('to') !== null
-            ) {
-              const participantDisplayName = getNameFromJID(
-                stanza.getAttribute('from')!,
-              );
+            const jid = stanza.getAttribute('from');
+            if (jid && stanza.getAttribute('to')) {
+              const item = stanza.getElementsByTagName('item')[0];
+              const participantDisplayName = getNameFromJID(jid);
               if (
-                stanza.getAttribute('type') !== null &&
+                stanza.getAttribute('type') &&
                 stanza.getAttribute('type') === 'unavailable'
               ) {
                 useParticipantsStore
                   .getState()
                   .removeParticipant(participantDisplayName);
               } else if (
-                stanza.getElementsByTagName('item')[0] !== null &&
-                stanza
-                  .getElementsByTagName('item')[0]
-                  .getAttribute('affiliation') !== null &&
-                stanza
-                  .getElementsByTagName('item')[0]
-                  .getAttribute('affiliation') !== 'none'
+                item &&
+                item.getAttribute('affiliation') &&
+                item.getAttribute('affiliation') !== 'none'
               ) {
                 const participantIsInstructor =
-                  stanza
-                    .getElementsByTagName('item')[0]
-                    .getAttribute('affiliation') === 'owner'
-                    ? true
-                    : false;
+                  item.getAttribute('affiliation') === 'owner' ? true : false;
                 useParticipantsStore.getState().addParticipant({
+                  id: jid,
                   isInstructor: participantIsInstructor,
                   isOnStage: false,
                   name: participantDisplayName,