From bcc326c1505423d8184a56712edfd64257b428e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=B0=D0=BC=D1=8F=D0=BD=20=D0=9C=D0=B8=D0=BD=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=B2?= <damencho@jitsi.org>
Date: Tue, 24 Aug 2021 13:50:13 -0500
Subject: [PATCH] fix: Fixes undefined errors in MeetingParticipant - Item and
 ContextMenu.

---
 .../components/web/MeetingParticipantList.js  | 44 +++++++++++++++----
 .../components/web/ParticipantsPane.js        |  2 +-
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/react/features/participants-pane/components/web/MeetingParticipantList.js b/react/features/participants-pane/components/web/MeetingParticipantList.js
index 388b05d2f..820a05faa 100644
--- a/react/features/participants-pane/components/web/MeetingParticipantList.js
+++ b/react/features/participants-pane/components/web/MeetingParticipantList.js
@@ -2,13 +2,14 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelector, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 import { openDialog } from '../../../base/dialog';
 import {
     getParticipantCountWithFake,
     getSortedParticipantIds
 } from '../../../base/participants';
+import { connect } from '../../../base/redux';
 import MuteRemoteParticipantDialog from '../../../video-menu/components/web/MuteRemoteParticipantDialog';
 import { findStyledAncestor, shouldRenderInviteButton } from '../../functions';
 
@@ -25,7 +26,7 @@ type NullProto = {
 type RaiseContext = NullProto | {|
 
   /**
-   * Target elements against which positioning calculations are made
+   * Target elements against which positioning calculations are made.
    */
   offsetTarget?: HTMLElement,
 
@@ -39,19 +40,18 @@ const initialState = Object.freeze(Object.create(null));
 
 /**
  * Renders the MeetingParticipantList component.
+ * NOTE: This component is not using useSelector on purpose. The child components MeetingParticipantItem
+ * and MeetingParticipantContextMenu are using connect. Having those mixed leads to problems.
+ * When this one was using useSelector and the other two were not -the other two were re-rendered before this one was
+ * re-rendered, so when participant is leaving, we first re-render the item and menu components,
+ * throwing errors (closing the page) before removing those components for the participant that left.
  *
  * @returns {ReactNode} - The component.
  */
-export function MeetingParticipantList() {
+function MeetingParticipantList({ participantsCount, showInviteButton, sortedParticipantIds = [] }) {
     const dispatch = useDispatch();
     const isMouseOverMenu = useRef(false);
-    const sortedParticipantIds = useSelector(getSortedParticipantIds);
 
-    // This is very important as getRemoteParticipants is not changing its reference object
-    // and we will not re-render on change, but if count changes we will do
-    const participantsCount = useSelector(getParticipantCountWithFake);
-
-    const showInviteButton = useSelector(shouldRenderInviteButton);
     const [ raiseContext, setRaiseContext ] = useState<RaiseContext>(initialState);
     const { t } = useTranslation();
 
@@ -144,3 +144,29 @@ export function MeetingParticipantList() {
     </>
     );
 }
+
+/**
+ * Maps (parts of) the redux state to the associated props for this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - The own props of the component.
+ * @private
+ * @returns {Props}
+ */
+function _mapStateToProps(state): Object {
+    const sortedParticipantIds = getSortedParticipantIds(state);
+
+    // This is very important as getRemoteParticipants is not changing its reference object
+    // and we will not re-render on change, but if count changes we will do
+    const participantsCount = getParticipantCountWithFake(state);
+
+    const showInviteButton = shouldRenderInviteButton(state);
+
+    return {
+        sortedParticipantIds,
+        participantsCount,
+        showInviteButton
+    };
+}
+
+export default connect(_mapStateToProps)(MeetingParticipantList);
diff --git a/react/features/participants-pane/components/web/ParticipantsPane.js b/react/features/participants-pane/components/web/ParticipantsPane.js
index 6367983a2..c86c34157 100644
--- a/react/features/participants-pane/components/web/ParticipantsPane.js
+++ b/react/features/participants-pane/components/web/ParticipantsPane.js
@@ -14,7 +14,7 @@ import theme from '../../theme.json';
 import { FooterContextMenu } from '../FooterContextMenu';
 
 import { LobbyParticipantList } from './LobbyParticipantList';
-import { MeetingParticipantList } from './MeetingParticipantList';
+import MeetingParticipantList from './MeetingParticipantList';
 import {
     AntiCollapse,
     Close,