Management: Add button for group members (#4551)

This commit is contained in:
Alexander Zinchuk 2024-05-14 04:23:42 +02:00
parent 6e056cb2ef
commit 84af0ce28a
2 changed files with 41 additions and 13 deletions

View File

@ -701,7 +701,8 @@ export default memo(withGlobal<OwnProps>(
const areMembersHidden = hasMembersTab && chat
&& (chat.isForbidden || (chatFullInfo && !chatFullInfo.canViewMembers));
const canAddMembers = hasMembersTab && chat
&& (getHasAdminRight(chat, 'inviteUsers') || !isUserRightBanned(chat, 'inviteUsers') || chat.isCreator);
&& (getHasAdminRight(chat, 'inviteUsers') || (!isChannel && !isUserRightBanned(chat, 'inviteUsers'))
|| chat.isCreator);
const canDeleteMembers = hasMembersTab && chat && (getHasAdminRight(chat, 'banUsers') || chat.isCreator);
const activeDownloads = selectActiveDownloads(global, chatId);
const { similarChannelIds } = selectSimilarChannelIds(global, chatId) || {};

View File

@ -1,15 +1,15 @@
import type { FC } from '../../../lib/teact/teact';
import React, {
memo, useCallback, useMemo, useRef, useState,
memo, useMemo, useRef, useState,
} from '../../../lib/teact/teact';
import { getActions, getGlobal, withGlobal } from '../../../global';
import type { ApiChatMember, ApiUserStatus } from '../../../api/types';
import { ManagementScreens } from '../../../types';
import { ManagementScreens, NewChatMembersProgress } from '../../../types';
import {
filterUsersByName, getHasAdminRight, isChatBasicGroup,
isChatChannel, isUserBot, sortUserIds,
isChatChannel, isUserBot, isUserRightBanned, sortUserIds,
} from '../../../global/helpers';
import { selectChat, selectChatFullInfo, selectTabState } from '../../../global/selectors';
import { unique } from '../../../util/iteratees';
@ -20,9 +20,12 @@ import useHistoryBack from '../../../hooks/useHistoryBack';
import useInfiniteScroll from '../../../hooks/useInfiniteScroll';
import useKeyboardListNavigation from '../../../hooks/useKeyboardListNavigation';
import useLang from '../../../hooks/useLang';
import useLastCallback from '../../../hooks/useLastCallback';
import Icon from '../../common/Icon';
import NothingFound from '../../common/NothingFound';
import PrivateChatInfo from '../../common/PrivateChatInfo';
import FloatingActionButton from '../../ui/FloatingActionButton';
import InfiniteScroll from '../../ui/InfiniteScroll';
import InputText from '../../ui/InputText';
import ListItem, { type MenuItemContextAction } from '../../ui/ListItem';
@ -42,6 +45,7 @@ type OwnProps = {
type StateProps = {
userStatusesById: Record<string, ApiUserStatus>;
members?: ApiChatMember[];
canAddMembers?: boolean;
adminMembersById?: Record<string, ApiChatMember>;
isChannel?: boolean;
localContactIds?: string[];
@ -59,6 +63,7 @@ const ManageGroupMembers: FC<OwnProps & StateProps> = ({
chatId,
noAdmins,
members,
canAddMembers,
adminMembersById,
userStatusesById,
isChannel,
@ -77,7 +82,8 @@ const ManageGroupMembers: FC<OwnProps & StateProps> = ({
onChatMemberSelect,
}) => {
const {
openChat, setUserSearchQuery, closeManagement, toggleParticipantsHidden,
openChat, setUserSearchQuery, closeManagement,
toggleParticipantsHidden, setNewChatMembersDialogState, toggleManagement,
} = getActions();
const lang = useLang();
// eslint-disable-next-line no-null/no-null
@ -137,7 +143,7 @@ const ManageGroupMembers: FC<OwnProps & StateProps> = ({
const [viewportIds, getMore] = useInfiniteScroll(undefined, displayedIds, Boolean(searchQuery));
const handleMemberClick = useCallback((id: string) => {
const handleMemberClick = useLastCallback((id: string) => {
if (noAdmins) {
onChatMemberSelect!(id, true);
onScreenSelect!(ManagementScreens.ChatNewAdminRights);
@ -145,24 +151,30 @@ const ManageGroupMembers: FC<OwnProps & StateProps> = ({
closeManagement();
openChat({ id });
}
}, [closeManagement, noAdmins, onChatMemberSelect, onScreenSelect, openChat]);
});
const handleFilterChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
const handleFilterChange = useLastCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setUserSearchQuery({ query: e.target.value });
}, [setUserSearchQuery]);
});
const handleKeyDown = useKeyboardListNavigation(containerRef, isActive, (index) => {
if (viewportIds && viewportIds.length > 0) {
handleMemberClick(viewportIds[index === -1 ? 0 : index]);
}
}, '.ListItem-button', true);
const handleDeleteMembersModalClose = useCallback(() => {
const handleDeleteMembersModalClose = useLastCallback(() => {
setDeletingUserId(undefined);
}, []);
});
const handleToggleParticipantsHidden = useCallback(() => {
const handleToggleParticipantsHidden = useLastCallback(() => {
toggleParticipantsHidden({ chatId, isEnabled: !areParticipantsHidden });
}, [areParticipantsHidden, chatId, toggleParticipantsHidden]);
});
const handleNewMemberDialogOpen = useLastCallback(() => {
toggleManagement();
setNewChatMembersDialogState({ newChatMembersProgress: NewChatMembersProgress.InProgress });
});
useHistoryBack({
isActive,
@ -240,6 +252,15 @@ const ManageGroupMembers: FC<OwnProps & StateProps> = ({
)}
</div>
</div>
{canAddMembers && (
<FloatingActionButton
isShown
onClick={handleNewMemberDialogOpen}
ariaLabel={lang('lng_channel_add_users')}
>
<Icon name="add-user-filled" />
</FloatingActionButton>
)}
{canDeleteMembers && (
<DeleteMemberModal
isOpen={Boolean(deletingUserId)}
@ -265,6 +286,11 @@ export default memo(withGlobal<OwnProps>(
const canHideParticipants = canDeleteMembers && !isChatBasicGroup(chat) && chat.membersCount !== undefined
&& hiddenMembersMinCount !== undefined && chat.membersCount >= hiddenMembersMinCount;
const canAddMembers = chat && ((getHasAdminRight(chat, 'inviteUsers')
|| (!isChannel && !isUserRightBanned(chat, 'inviteUsers')))
|| chat.isCreator
);
const {
query: searchQuery,
fetchingStatus,
@ -275,6 +301,7 @@ export default memo(withGlobal<OwnProps>(
return {
areParticipantsHidden: Boolean(chat && areParticipantsHidden),
members,
canAddMembers,
adminMembersById,
userStatusesById,
isChannel,