From 595df524b06cbbeab872ab0fbb930afbd774e694 Mon Sep 17 00:00:00 2001 From: Avram Tudor Date: Wed, 18 Aug 2021 14:29:41 +0300 Subject: [PATCH] fix(participants) sort participants alphabetically (#9741) --- react/features/base/participants/functions.js | 42 +++++++++++++++++++ react/features/base/participants/reducer.js | 2 - .../AbstractKnockingParticipantList.js | 5 ++- react/features/lobby/functions.js | 27 +++++++----- .../components/native/LobbyParticipantList.js | 9 ++-- .../native/MeetingParticipantList.js | 14 ++----- .../components/web/LobbyParticipantList.js | 9 ++-- .../components/web/MeetingParticipantList.js | 15 ++----- 8 files changed, 76 insertions(+), 47 deletions(-) diff --git a/react/features/base/participants/functions.js b/react/features/base/participants/functions.js index b859ca479..369ec56b8 100644 --- a/react/features/base/participants/functions.js +++ b/react/features/base/participants/functions.js @@ -443,3 +443,45 @@ async function _getFirstLoadableAvatarUrl(participant, store) { return undefined; } + + +/** + * Selector for retrieving sorted participants by display name. + * + * @param {(Function|Object)} stateful - The (whole) redux state, or redux's + * {@code getState} function to be used to retrieve the state + * features/base/participants. + * @returns {Array} + */ +export function getSortedParticipants(stateful: Object | Function) { + const localParticipant = getLocalParticipant(stateful); + const remoteParticipants = getRemoteParticipants(stateful); + + const items = []; + + remoteParticipants.forEach(p => { + items.push(p); + }); + + items.sort((a, b) => + getParticipantDisplayName(stateful, a.id).localeCompare(getParticipantDisplayName(stateful, b.id)) + ); + + items.unshift(localParticipant); + + return items; +} + +/** + * Selector for retrieving ids of alphabetically sorted participants by name. + * + * @param {(Function|Object)} stateful - The (whole) redux state, or redux's + * {@code getState} function to be used to retrieve the state + * features/base/participants. + * @returns {Array} + */ +export function getSortedParticipantIds(stateful: Object | Function): Array { + const participantIds = getSortedParticipants(stateful).map((p): Object => p.id); + + return participantIds; +} diff --git a/react/features/base/participants/reducer.js b/react/features/base/participants/reducer.js index e3c304653..41c8bf388 100644 --- a/react/features/base/participants/reducer.js +++ b/react/features/base/participants/reducer.js @@ -30,8 +30,6 @@ import { isParticipantModerator } from './functions'; * @property {string} email - Participant email. */ -declare var APP: Object; - /** * The participant properties which cannot be updated through * {@link PARTICIPANT_UPDATED}. They either identify the participant or can only diff --git a/react/features/lobby/components/AbstractKnockingParticipantList.js b/react/features/lobby/components/AbstractKnockingParticipantList.js index c2ea807f1..1b0ad79d2 100644 --- a/react/features/lobby/components/AbstractKnockingParticipantList.js +++ b/react/features/lobby/components/AbstractKnockingParticipantList.js @@ -4,7 +4,7 @@ import { PureComponent } from 'react'; import { isLocalParticipantModerator } from '../../base/participants'; import { setKnockingParticipantApproval } from '../actions'; -import { getLobbyState } from '../functions'; +import { getKnockingParticipants, getLobbyEnabled } from '../functions'; export type Props = { @@ -67,7 +67,8 @@ export default class AbstractKnockingParticipantList extends P * @returns {Props} */ export function mapStateToProps(state: Object): $Shape { - const { knockingParticipants, lobbyEnabled } = getLobbyState(state); + const lobbyEnabled = getLobbyEnabled(state); + const knockingParticipants = getKnockingParticipants(state); return { _participants: knockingParticipants, diff --git a/react/features/lobby/functions.js b/react/features/lobby/functions.js index eaa32cc54..3e9669944 100644 --- a/react/features/lobby/functions.js +++ b/react/features/lobby/functions.js @@ -1,15 +1,24 @@ // @flow /** - * Selector to return lobby state. - * - * @param {any} state - State object. - * @returns {any} - */ -export function getLobbyState(state: any) { - return state['features/lobby']; +* Selector to return lobby enable state. +* +* @param {any} state - State object. +* @returns {boolean} +*/ +export function getLobbyEnabled(state: any) { + return state['features/lobby'].lobbyEnabled; } +/** +* Selector to return a list of knocking participants. +* +* @param {any} state - State object. +* @returns {Array} +*/ +export function getKnockingParticipants(state: any) { + return state['features/lobby'].knockingParticipants; +} /** * Selector to return array with knocking participant ids. @@ -18,7 +27,5 @@ export function getLobbyState(state: any) { * @returns {Array} */ export function getKnockingParticipantsById(state: any) { - const { knockingParticipants } = state['features/lobby']; - - return knockingParticipants.map(participant => participant.id); + return getKnockingParticipants(state).map(participant => participant.id); } diff --git a/react/features/participants-pane/components/native/LobbyParticipantList.js b/react/features/participants-pane/components/native/LobbyParticipantList.js index 2e3765174..7b9948da8 100644 --- a/react/features/participants-pane/components/native/LobbyParticipantList.js +++ b/react/features/participants-pane/components/native/LobbyParticipantList.js @@ -7,7 +7,7 @@ import { Button, withTheme } from 'react-native-paper'; import { useDispatch, useSelector } from 'react-redux'; import { admitMultiple } from '../../../lobby/actions.native'; -import { getLobbyState } from '../../../lobby/functions'; +import { getKnockingParticipants, getLobbyEnabled } from '../../../lobby/functions'; import { LobbyParticipantItem } from './LobbyParticipantItem'; import styles from './styles'; @@ -21,10 +21,9 @@ type Props = { }; const LobbyParticipantList = ({ theme }: Props) => { - const { - lobbyEnabled, - knockingParticipants: participants - } = useSelector(getLobbyState); + const lobbyEnabled = useSelector(getLobbyEnabled); + const participants = useSelector(getKnockingParticipants); + const dispatch = useDispatch(); const admitAll = useCallback(() => dispatch(admitMultiple(participants)), diff --git a/react/features/participants-pane/components/native/MeetingParticipantList.js b/react/features/participants-pane/components/native/MeetingParticipantList.js index a61218a4c..78cace350 100644 --- a/react/features/participants-pane/components/native/MeetingParticipantList.js +++ b/react/features/participants-pane/components/native/MeetingParticipantList.js @@ -11,7 +11,7 @@ import { Icon, IconInviteMore } from '../../../base/icons'; import { getLocalParticipant, getParticipantCountWithFake, - getRemoteParticipants + getSortedParticipants } from '../../../base/participants'; import { connect } from '../../../base/redux'; import { doInvitePeople } from '../../../invite/actions.native'; @@ -35,11 +35,9 @@ type Props = { const MeetingParticipantList = ({ _localVideoOwner }: Props) => { const dispatch = useDispatch(); - const items = []; - const localParticipant = useSelector(getLocalParticipant); const onInvite = useCallback(() => dispatch(doInvitePeople()), [ dispatch ]); - const participants = useSelector(getRemoteParticipants); const participantsCount = useSelector(getParticipantCountWithFake); + const sortedParticipants = useSelector(getSortedParticipants); const showInviteButton = useSelector(shouldRenderInviteButton); const { t } = useTranslation(); @@ -73,12 +71,6 @@ const MeetingParticipantList = ({ _localVideoOwner }: Props) => { ); }; - items.push(renderParticipant(localParticipant)); - - participants.forEach(p => { - items.push(renderParticipant(p)); - }); - return ( @@ -100,7 +92,7 @@ const MeetingParticipantList = ({ _localVideoOwner }: Props) => { onPress = { onInvite } style = { styles.inviteButton } /> } - { items } + { sortedParticipants.map(renderParticipant) } ); }; diff --git a/react/features/participants-pane/components/web/LobbyParticipantList.js b/react/features/participants-pane/components/web/LobbyParticipantList.js index 2a5afc63f..961cd6c64 100644 --- a/react/features/participants-pane/components/web/LobbyParticipantList.js +++ b/react/features/participants-pane/components/web/LobbyParticipantList.js @@ -7,7 +7,7 @@ import { useSelector, useDispatch } from 'react-redux'; import { withPixelLineHeight } from '../../../base/styles/functions.web'; import { admitMultiple } from '../../../lobby/actions.web'; -import { getLobbyState } from '../../../lobby/functions'; +import { getKnockingParticipants, getLobbyEnabled } from '../../../lobby/functions'; import { LobbyParticipantItem } from './LobbyParticipantItem'; @@ -32,10 +32,9 @@ const useStyles = makeStyles(theme => { export const LobbyParticipantList = () => { - const { - lobbyEnabled, - knockingParticipants: participants - } = useSelector(getLobbyState); + const lobbyEnabled = useSelector(getLobbyEnabled); + const participants = useSelector(getKnockingParticipants); + const { t } = useTranslation(); const classes = useStyles(); const dispatch = useDispatch(); diff --git a/react/features/participants-pane/components/web/MeetingParticipantList.js b/react/features/participants-pane/components/web/MeetingParticipantList.js index e434488ac..388b05d2f 100644 --- a/react/features/participants-pane/components/web/MeetingParticipantList.js +++ b/react/features/participants-pane/components/web/MeetingParticipantList.js @@ -6,9 +6,8 @@ import { useSelector, useDispatch } from 'react-redux'; import { openDialog } from '../../../base/dialog'; import { - getLocalParticipant, getParticipantCountWithFake, - getRemoteParticipants + getSortedParticipantIds } from '../../../base/participants'; import MuteRemoteParticipantDialog from '../../../video-menu/components/web/MuteRemoteParticipantDialog'; import { findStyledAncestor, shouldRenderInviteButton } from '../../functions'; @@ -46,8 +45,7 @@ const initialState = Object.freeze(Object.create(null)); export function MeetingParticipantList() { const dispatch = useDispatch(); const isMouseOverMenu = useRef(false); - const participants = useSelector(getRemoteParticipants); - const localParticipant = useSelector(getLocalParticipant); + 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 @@ -130,19 +128,12 @@ export function MeetingParticipantList() { youText = { youText } /> ); - const items = []; - - localParticipant && items.push(renderParticipant(localParticipant?.id)); - participants.forEach(p => { - items.push(renderParticipant(p?.id)); - }); - return ( <> {t('participantsPane.headings.participantsList', { count: participantsCount })} {showInviteButton && }
- { items } + {sortedParticipantIds.map(renderParticipant)}