Management / Join Requests: Fix scroll, fix missing users (#1878)

src/api/gramjs/methods/management.ts

@@ -5,6 +5,8 @@ import { buildInputEntity, buildInputPeer } from '../gramjsBuilders';
 import { ApiChat, ApiUser, OnApiUpdate } from '../../types';
 import { addEntitiesWithPhotosToLocalDb } from '../helpers';
 import { buildApiExportedInvite, buildChatInviteImporter } from '../apiBuilders/chats';
+import { buildApiUser } from '../apiBuilders/users';
+import { buildCollectionByKey } from '../../../util/iteratees';
 
 let onUpdate: OnApiUpdate;
 
@@ -183,8 +185,12 @@ export async function fetchChatInviteImporters({
   }));
 
   if (!result) return undefined;
+  const users = result.users.map((user) => buildApiUser(user)).filter(Boolean);
   addEntitiesWithPhotosToLocalDb(result.users);
-  return result.importers.map((importer) => buildChatInviteImporter(importer));
+  return {
+    importers: result.importers.map((importer) => buildChatInviteImporter(importer)),
+    users: buildCollectionByKey(users, 'id'),
+  };
 }
 
 export function hideChatJoinRequest({

src/components/right/management/ManageJoinRequests.tsx

@@ -77,27 +77,27 @@ const ManageJoinRequests: FC<OwnProps & StateProps> = ({
 
   return (
     <div className="Management ManageJoinRequests">
-      <div className="section">
+      <div className="custom-scroll">
-        <div className="section-icon">
+        <div className="section">
-          {animationData && (
+          <div className="section-icon">
-            <AnimatedSticker
+            {animationData && (
-              id="joinRequestDucks"
+              <AnimatedSticker
-              size={STICKER_SIZE_JOIN_REQUESTS}
+                id="joinRequestDucks"
-              animationData={animationData}
+                size={STICKER_SIZE_JOIN_REQUESTS}
-              play={isAnimationLoaded}
+                animationData={animationData}
-              onLoad={handleAnimationLoad}
+                play={isAnimationLoaded}
-            />
+                onLoad={handleAnimationLoad}
+              />
+            )}
+          </div>
+          {Boolean(chat?.joinRequests?.length) && (
+            <div className="bulk-actions">
+              <Button className="bulk-action-button" onClick={openAcceptAllDialog}>Accept all</Button>
+              <Button className="bulk-action-button" onClick={openRejectAllDialog} isText>Dismiss all</Button>
+            </div>
           )}
         </div>
-        {Boolean(chat?.joinRequests?.length) && (
+        <div className="section" teactFastList>
-          <div className="bulk-actions">
-            <Button className="bulk-action-button" onClick={openAcceptAllDialog}>Accept all</Button>
-            <Button className="bulk-action-button" onClick={openRejectAllDialog} isText>Dismiss all</Button>
-          </div>
-        )}
-      </div>
-      <div className="section">
-        <div className="custom-scroll" teactFastList>
           <p key="title">
             {!chat?.joinRequests ? lang('Loading') : chat.joinRequests.length
               ? lang('JoinRequests', chat.joinRequests.length) : lang('NoMemberRequests')}

src/global/actions/api/management.ts

@@ -2,7 +2,9 @@ import { addActionHandler, getGlobal, setGlobal } from '../../index';
 
 import { ManagementProgress } from '../../../types';
 import { callApi } from '../../../api/gramjs';
-import { updateChat, updateManagement, updateManagementProgress } from '../../reducers';
+import {
+  addUsers, updateChat, updateManagement, updateManagementProgress,
+} from '../../reducers';
 import { selectChat, selectCurrentMessageList, selectUser } from '../../selectors';
 import { isChatBasicGroup } from '../../helpers';
 
@@ -234,6 +236,7 @@ addActionHandler('loadChatInviteImporters', async (global, actions, payload) =>
   if (!result) {
     return;
   }
+  const { importers, users } = result;
 
   global = getGlobal();
   const currentInviteInfo = global.management.byChatId[chatId]?.inviteInfo;
@@ -241,12 +244,14 @@ addActionHandler('loadChatInviteImporters', async (global, actions, payload) =>
     return;
   }
 
-  setGlobal(updateManagement(global, chatId, {
+  global = updateManagement(global, chatId, {
     inviteInfo: {
       ...currentInviteInfo,
-      importers: result,
+      importers,
     },
-  }));
+  });
+  global = addUsers(global, users);
+  setGlobal(global);
 });
 
 addActionHandler('loadChatInviteRequesters', async (global, actions, payload) => {
@@ -268,19 +273,21 @@ addActionHandler('loadChatInviteRequesters', async (global, actions, payload) =>
   if (!result) {
     return;
   }
+  const { importers, users } = result;
 
   global = getGlobal();
   const currentInviteInfo = global.management.byChatId[chatId]?.inviteInfo;
   if (!currentInviteInfo?.invite || currentInviteInfo.invite.link !== link) {
     return;
   }
-
+  global = updateManagement(global, chatId, {
-  setGlobal(updateManagement(global, chatId, {
     inviteInfo: {
       ...currentInviteInfo,
-      requesters: result,
+      requesters: importers,
     },
-  }));
+  });
+  global = addUsers(global, users);
+  setGlobal(global);
 });
 
 addActionHandler('loadChatJoinRequests', async (global, actions, payload) => {
@@ -301,9 +308,12 @@ addActionHandler('loadChatJoinRequests', async (global, actions, payload) => {
   if (!result) {
     return;
   }
+  const { importers, users } = result;
 
   global = getGlobal();
-  setGlobal(updateChat(global, chatId, { joinRequests: result }));
+  global = updateChat(global, chatId, { joinRequests: importers });
+  global = addUsers(global, users);
+  setGlobal(global);
 });
 
 addActionHandler('hideChatJoinRequest', async (global, actions, payload) => {