TelegramPWA/src/components/right/management/ManageGroupUserPermissionsCreate.tsx
Alexander Zinchuk 60f3995e82 Settings: Redesign (#6922)
Co-authored-by: Alexander Zinchuk <alx.zinchuk@gmail.com>
2026-06-01 01:15:35 +02:00

110 lines
3.0 KiB
TypeScript

import type { FC } from '../../../lib/teact/teact';
import { memo, useCallback, useMemo } from '../../../lib/teact/teact';
import { withGlobal } from '../../../global';
import type { ApiChatMember, ApiUser, ApiUserStatus } from '../../../api/types';
import { ManagementScreens } from '../../../types';
import { isChatChannel, sortUserIds } from '../../../global/helpers';
import { selectChat, selectChatFullInfo } from '../../../global/selectors';
import useHistoryBack from '../../../hooks/useHistoryBack';
import useLang from '../../../hooks/useLang';
import NothingFound from '../../common/NothingFound';
import PrivateChatInfo from '../../common/PrivateChatInfo';
import Island from '../../gili/layout/Island';
import ListItem from '../../ui/ListItem';
type OwnProps = {
chatId: string;
onScreenSelect: (screen: ManagementScreens) => void;
onChatMemberSelect: (memberId: string) => void;
onClose: NoneToVoidFunction;
isActive: boolean;
};
type StateProps = {
usersById: Record<string, ApiUser>;
userStatusesById: Record<string, ApiUserStatus>;
members?: ApiChatMember[];
isChannel?: boolean;
};
const ManageGroupUserPermissionsCreate: FC<OwnProps & StateProps> = ({
usersById,
userStatusesById,
members,
isChannel,
onScreenSelect,
onChatMemberSelect,
onClose,
isActive,
}) => {
const lang = useLang();
useHistoryBack({
isActive,
onBack: onClose,
});
const memberIds = useMemo(() => {
if (!members || !usersById) {
return undefined;
}
return sortUserIds(
members.filter((member) => !member.isOwner).map(({ userId }) => userId),
usersById,
userStatusesById,
);
}, [members, usersById, userStatusesById]);
const handleExceptionMemberClick = useCallback((memberId: string) => {
onChatMemberSelect(memberId);
onScreenSelect(ManagementScreens.GroupUserPermissions);
}, [onChatMemberSelect, onScreenSelect]);
return (
<div className="Management">
<div className="custom-scroll">
{memberIds?.length ? (
<Island teactFastList>
{memberIds.map((id, i) => (
<ListItem
key={id}
teactOrderKey={i}
className="chat-item-clickable scroll-item"
onClick={() => handleExceptionMemberClick(id)}
>
<PrivateChatInfo userId={id} forceShowSelf />
</ListItem>
))}
</Island>
) : (
<NothingFound
text={lang(isChannel ? 'NoSubscribersFound' : 'NoMembersFound')}
/>
)}
</div>
</div>
);
};
export default memo(withGlobal<OwnProps>(
(global, { chatId }): Complete<StateProps> => {
const chat = selectChat(global, chatId);
const { byId: usersById, statusesById: userStatusesById } = global.users;
const members = selectChatFullInfo(global, chatId)?.members;
const isChannel = chat && isChatChannel(chat);
return {
members,
usersById,
userStatusesById,
isChannel,
};
},
)(ManageGroupUserPermissionsCreate));