From 400f47963daee7d96c494b621f787e8d41a62300 Mon Sep 17 00:00:00 2001
From: Calin Chitu <calinte2002@yahoo.co.uk>
Date: Fri, 11 Jun 2021 10:15:20 +0300
Subject: [PATCH] feat(native-participants-pane) open/close pane native actions

---
 .../participants-pane/actions.native.js       | 26 ++++++++++++
 .../components/native/ParticipantsPane.js     | 41 ++++++++++++++++---
 .../native/ParticipantsPaneButton.js          |  6 +--
 react/features/participants-pane/constants.js |  2 +
 4 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/react/features/participants-pane/actions.native.js b/react/features/participants-pane/actions.native.js
index 048ac56d2..6c660c569 100644
--- a/react/features/participants-pane/actions.native.js
+++ b/react/features/participants-pane/actions.native.js
@@ -1,7 +1,33 @@
 import { openDialog } from '../base/dialog';
 
+import { PARTICIPANTS_PANE_CLOSE, PARTICIPANTS_PANE_OPEN } from './actionTypes';
 import { ContextMenuLobbyParticipantReject, ContextMenuMeetingParticipantDetails } from './components/native';
 
+
+/**
+ * Action to open the participants pane.
+ *
+ * @returns {Object}
+ */
+export function open() {
+    console.log(2);
+
+    return {
+        type: PARTICIPANTS_PANE_OPEN
+    };
+}
+
+/**
+ * Action to close the participants pane.
+ *
+ * @returns {Object}
+ */
+export function close() {
+    return {
+        type: PARTICIPANTS_PANE_CLOSE
+    };
+}
+
 /**
  * Displays the context menu for the selected lobby participant.
  *
diff --git a/react/features/participants-pane/components/native/ParticipantsPane.js b/react/features/participants-pane/components/native/ParticipantsPane.js
index ef7180bbd..2aff92590 100644
--- a/react/features/participants-pane/components/native/ParticipantsPane.js
+++ b/react/features/participants-pane/components/native/ParticipantsPane.js
@@ -4,26 +4,37 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ScrollView, View } from 'react-native';
 import { Button } from 'react-native-paper';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector, connect } from 'react-redux';
 
 import { hideDialog, openDialog } from '../../../base/dialog';
 import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
 import { JitsiModal } from '../../../base/modal';
-import { isLocalParticipantModerator } from '../../../base/participants';
+import {
+    isLocalParticipantModerator
+} from '../../../base/participants';
 import MuteEveryoneDialog
     from '../../../video-menu/components/native/MuteEveryoneDialog';
+import { PARTICIPANTS_PANE_ID } from '../../constants';
 
 import { ContextMenuMore } from './ContextMenuMore';
 import { LobbyParticipantList } from './LobbyParticipantList';
 import { MeetingParticipantList } from './MeetingParticipantList';
 import styles from './styles';
 
+type Props = {
+
+    /**
+     * Is the participants pane open
+     */
+    _isOpen: boolean
+};
+
 /**
  * Participant pane.
  *
  * @returns {React$Element<any>}
  */
-function ParticipantsPane() {
+function ParticipantsPane({ _isOpen: paneOpen }: Props) {
     const dispatch = useDispatch();
     const openMoreMenu = useCallback(() => dispatch(openDialog(ContextMenuMore)), [ dispatch ]);
     const closePane = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
@@ -33,8 +44,10 @@ function ParticipantsPane() {
     const { t } = useTranslation();
 
     return (
-        <JitsiModal
+        paneOpen
+        && <JitsiModal
             hideHeaderWithNavigation = { true }
+            modalId = { PARTICIPANTS_PANE_ID }
             style = { styles.participantsPane }>
             <View style = { styles.header }>
                 <Button
@@ -80,5 +93,23 @@ function ParticipantsPane() {
     );
 }
 
+/**
+ * Maps (parts of) the redux state to {@link ParticipantsPane} React {@code Component}
+ * props.
+ *
+ * @param {Object} state - The redux store/state.
+ * @private
+ * @returns {{
+ *     _isOpen: boolean,
+ * }}
+ */
+function _mapStateToProps(state: Object) {
+    const { isOpen } = state['features/participants-pane'];
 
-export default ParticipantsPane;
+    return {
+        _isOpen: isOpen
+    };
+}
+
+
+export default connect(_mapStateToProps)(ParticipantsPane);
diff --git a/react/features/participants-pane/components/native/ParticipantsPaneButton.js b/react/features/participants-pane/components/native/ParticipantsPaneButton.js
index 5573193ec..b66836d25 100644
--- a/react/features/participants-pane/components/native/ParticipantsPaneButton.js
+++ b/react/features/participants-pane/components/native/ParticipantsPaneButton.js
@@ -2,13 +2,11 @@
 
 import type { Dispatch } from 'redux';
 
-import { openDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
 import { IconParticipants } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
-
-import { ParticipantsPane } from './';
+import { open } from '../../actions.native';
 
 type Props = AbstractButtonProps & {
 
@@ -34,7 +32,7 @@ class ParticipantsPaneButton extends AbstractButton<Props, *> {
      * @returns {void}
      */
     _handleClick() {
-        this.props.dispatch(openDialog(ParticipantsPane));
+        this.props.dispatch(open());
     }
 }
 
diff --git a/react/features/participants-pane/constants.js b/react/features/participants-pane/constants.js
index d9e762878..18e4600cf 100644
--- a/react/features/participants-pane/constants.js
+++ b/react/features/participants-pane/constants.js
@@ -1,5 +1,7 @@
 // @flow
 
+export const PARTICIPANTS_PANE_ID = 'participantsPane';
+
 /**
  * Reducer key for the feature.
  */