Management / Channel: Add Removed Users (#1725)

src/components/right/RightColumn.tsx

@@ -121,6 +121,7 @@ const RightColumn: FC<StateProps> = ({
           case ManagementScreens.Invites:
           case ManagementScreens.Reactions:
           case ManagementScreens.JoinRequests:
+          case ManagementScreens.ChannelRemovedUsers:
             setManagementScreen(ManagementScreens.Initial);
             break;
           case ManagementScreens.GroupUserPermissionsCreate:

src/components/right/RightHeader.tsx

@@ -77,6 +77,7 @@ enum HeaderContent {
   ManageDiscussion,
   ManageGroupPermissions,
   ManageGroupRemovedUsers,
+  ManageChannelRemovedUsers,
   ManageGroupUserPermissionsCreate,
   ManageGroupUserPermissions,
   ManageGroupRecentActions,
@@ -209,6 +210,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
       HeaderContent.ManageChatAdministrators
     ) : managementScreen === ManagementScreens.GroupRemovedUsers ? (
       HeaderContent.ManageGroupRemovedUsers
+    ) : managementScreen === ManagementScreens.ChannelRemovedUsers ? (
+      HeaderContent.ManageChannelRemovedUsers
     ) : managementScreen === ManagementScreens.GroupUserPermissionsCreate ? (
       HeaderContent.ManageGroupUserPermissionsCreate
     ) : managementScreen === ManagementScreens.GroupUserPermissions ? (
@@ -284,6 +287,8 @@ const RightHeader: FC<OwnProps & StateProps> = ({
       case HeaderContent.ManageGroupPermissions:
         return <h3>{lang('ChannelPermissions')}</h3>;
       case HeaderContent.ManageGroupRemovedUsers:
+        return <h3>{lang('BlockedUsers')}</h3>;
+      case HeaderContent.ManageChannelRemovedUsers:
         return <h3>{lang('ChannelBlockedUsers')}</h3>;
       case HeaderContent.ManageGroupUserPermissionsCreate:
         return <h3>{lang('ChannelAddException')}</h3>;

src/components/right/management/ManageChannel.tsx

@@ -102,6 +102,7 @@ const ManageChannel: FC<OwnProps & StateProps> = ({
   }, [progress]);
 
   const adminsCount = (chat?.fullInfo?.adminMembers?.length) || 0;
+  const removedUsersCount = (chat?.fullInfo?.kickedMembers?.length) || 0;
 
   const handleClickEditType = useCallback(() => {
     onScreenSelect(ManagementScreens.ChatPrivacyType);
@@ -167,6 +168,10 @@ const ManageChannel: FC<OwnProps & StateProps> = ({
     onScreenSelect(ManagementScreens.ChannelSubscribers);
   }, [onScreenSelect]);
 
+  const handleRemovedUsersClick = useCallback(() => {
+    onScreenSelect(ManagementScreens.ChannelRemovedUsers);
+  }, [onScreenSelect]);
+
   const handleDeleteChannel = useCallback(() => {
     if (chat.isCreator) {
       deleteChannel({ chatId: chat.id });
@@ -227,14 +232,6 @@ const ManageChannel: FC<OwnProps & StateProps> = ({
             <span className="title">{lang('Discussion')}</span>
             <span className="subtitle">{hasLinkedChat ? lang('DiscussionUnlink') : lang('Add')}</span>
           </ListItem>
-          <ListItem
-            icon="admin"
-            multiline
-            onClick={handleClickAdministrators}
-          >
-            <span className="title">{lang('ChannelAdministrators')}</span>
-            <span className="subtitle">{adminsCount}</span>
-          </ListItem>
           {canInvite && (
             <ListItem
               icon="link"
@@ -280,6 +277,14 @@ const ManageChannel: FC<OwnProps & StateProps> = ({
           </div>
         </div>
         <div className="section">
+          <ListItem
+            icon="admin"
+            multiline
+            onClick={handleClickAdministrators}
+          >
+            <span className="title">{lang('ChannelAdministrators')}</span>
+            <span className="subtitle">{adminsCount}</span>
+          </ListItem>
           <ListItem
             icon="group"
             multiline
@@ -288,6 +293,15 @@ const ManageChannel: FC<OwnProps & StateProps> = ({
             <span className="title" dir="auto">{lang('ChannelSubscribers')}</span>
             <span className="subtitle" dir="auto">{lang('Subscribers', chat.membersCount ?? 0, 'i')}</span>
           </ListItem>
+          <ListItem
+            icon="delete-user"
+            multiline
+            narrow
+            onClick={handleRemovedUsersClick}
+          >
+            <span className="title">{lang('ChannelBlockedUsers')}</span>
+            <span className="subtitle">{removedUsersCount}</span>
+          </ListItem>
         </div>
         <div className="section">
           <ListItem icon="delete" ripple destructive onClick={openDeleteDialog}>

src/components/right/management/ManageChatRemovedUsers.tsx

@@ -6,7 +6,7 @@ import { getDispatch, withGlobal } from '../../../lib/teact/teactn';
 import { ApiChat, ApiChatMember, ApiUser } from '../../../api/types';
 
 import { selectChat } from '../../../modules/selectors';
-import { getHasAdminRight, getUserFullName } from '../../../modules/helpers';
+import { getHasAdminRight, getUserFullName, isChatChannel } from '../../../modules/helpers';
 import useLang from '../../../hooks/useLang';
 import useHistoryBack from '../../../hooks/useHistoryBack';
 import useFlag from '../../../hooks/useFlag';
@@ -26,12 +26,14 @@ type StateProps = {
   chat?: ApiChat;
   usersById: Record<string, ApiUser>;
   canDeleteMembers?: boolean;
+  isChannel?: boolean;
 };
 
-const ManageGroupRemovedUsers: FC<OwnProps & StateProps> = ({
+const ManageChatRemovedUsers: FC<OwnProps & StateProps> = ({
   chat,
   usersById,
   canDeleteMembers,
+  isChannel,
   onClose,
   isActive,
 }) => {
@@ -84,7 +86,7 @@ const ManageGroupRemovedUsers: FC<OwnProps & StateProps> = ({
     <div className="Management">
       <div className="custom-scroll">
         <div className="section" dir={lang.isRtl ? 'rtl' : undefined}>
-          <p className="text-muted">{lang('NoBlockedGroup2')}</p>
+          <p className="text-muted">{lang(isChannel ? 'NoBlockedChannel2' : 'NoBlockedGroup2')}</p>
 
           {removedMembers.map((member) => (
             <ListItem
@@ -127,6 +129,11 @@ export default memo(withGlobal<OwnProps>(
     const { byId: usersById } = global.users;
     const canDeleteMembers = chat && (getHasAdminRight(chat, 'banUsers') || chat.isCreator);
 
-    return { chat, usersById, canDeleteMembers };
+    return {
+      chat,
+      usersById,
+      canDeleteMembers,
+      isChannel: chat && isChatChannel(chat),
+    };
   },
-)(ManageGroupRemovedUsers));
+)(ManageChatRemovedUsers));

src/components/right/management/Management.tsx

@@ -8,7 +8,7 @@ import { selectCurrentManagementType } from '../../../modules/selectors';
 import ManageUser from './ManageUser';
 import ManageGroup from './ManageGroup';
 import ManageGroupPermissions from './ManageGroupPermissions';
-import ManageGroupRemovedUsers from './ManageGroupRemovedUsers';
+import ManageChatRemovedUsers from './ManageChatRemovedUsers';
 import ManageChannel from './ManageChannel';
 import ManageChatPrivacyType from './ManageChatPrivacyType';
 import ManageDiscussion from './ManageDiscussion';
@@ -93,6 +93,7 @@ const Management: FC<OwnProps & StateProps> = ({
               isActive={isActive || [
                 ManagementScreens.ChannelSubscribers,
                 ManagementScreens.ChatAdministrators,
+                ManagementScreens.ChannelRemovedUsers,
                 ManagementScreens.Discussion,
                 ManagementScreens.ChatPrivacyType,
                 ManagementScreens.ChatAdminRights,
@@ -140,9 +141,10 @@ const Management: FC<OwnProps & StateProps> = ({
         />
       );
 
+    case ManagementScreens.ChannelRemovedUsers:
     case ManagementScreens.GroupRemovedUsers:
       return (
-        <ManageGroupRemovedUsers
+        <ManageChatRemovedUsers
           chatId={chatId}
           isActive={isActive}
           onClose={onClose}

src/types/index.ts

@@ -331,6 +331,7 @@ export enum ManagementScreens {
   GroupType,
   GroupPermissions,
   GroupRemovedUsers,
+  ChannelRemovedUsers,
   GroupUserPermissionsCreate,
   GroupUserPermissions,
   ChatAdministrators,