Client: Members: Fix infinite loading and duplicate members after inviting users. Remove useless code

packages/client/src/components/panels/InvitePanel/index.js

@@ -80,8 +80,8 @@ const InvitePanel = ({
   defaultAccess,
   inviteUsers,
   setInfoPanelIsMobileHidden,
-  updateInfoPanelSelection,
-  addInfoPanelMembers,
+  updateInfoPanelMembers,
+  isRoomMembersPanelOpen,
   setInviteLanguage,
   getUsersList,
   filter,
@@ -291,28 +291,6 @@ const InvitePanel = ({
 
       setIsLoading(false);
 
-      const invitedViaEmail = data.invitations
-        .filter((inv) => inv.email && !inv.id)
-        .map((invitation) => ({
-          access: invitation.access,
-          sharedTo: {
-            name: invitation.email,
-            userName: invitation.email,
-            email: invitation.email,
-            displayName: invitation.email,
-            status: 1,
-            activationStatus: 2,
-            usedSpace: 0,
-            hasAvatar: false,
-          },
-          canEditAccess: false,
-        }));
-
-      if (isRooms) {
-        const newInfoPanelMembers = [...result.members, ...invitedViaEmail];
-        addInfoPanelMembers(t, newInfoPanelMembers);
-      }
-
       onClose();
       toastr.success(t("Common:UsersInvited"));
 
@@ -320,7 +298,9 @@ const InvitePanel = ({
         toastr.warning(result?.warning);
       }
 
-      updateInfoPanelSelection();
+      if (isRoomMembersPanelOpen) {
+        updateInfoPanelMembers(t);
+      }
     } catch (err) {
       toastr.error(err);
       setIsLoading(false);
@@ -503,8 +483,8 @@ export default inject(
     const { filter } = peopleStore.filterStore;
     const {
       setIsMobileHidden: setInfoPanelIsMobileHidden,
-      updateInfoPanelSelection,
-      addInfoPanelMembers,
+      updateInfoPanelMembers,
+      isRoomMembersPanelOpen,
     } = infoPanelStore;
 
     const {
@@ -547,8 +527,8 @@ export default inject(
       collaboratorLink,
       inviteUsers,
       setInfoPanelIsMobileHidden,
-      updateInfoPanelSelection,
-      addInfoPanelMembers,
+      updateInfoPanelMembers,
+      isRoomMembersPanelOpen,
       getUsersList,
       filter,
       currentDeviceType,

packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js

@@ -65,7 +65,7 @@ const Members = ({
   isPublicRoomType,
   membersFilter,
   infoPanelMembers,
-  setInfoPanelMembers,
+  updateInfoPanelMembers,
   primaryLink,
   isArchiveFolder,
   isPublicRoom,
@@ -75,38 +75,24 @@ const Members = ({
   getPrimaryLink,
   setExternalLink,
   withPublicRoomBlock,
-  fetchMembers,
   fetchMoreMembers,
   membersIsLoading,
   searchValue,
-  searchResultIsLoading,
+  isMembersPanelUpdating,
 }) => {
   const withoutTitlesAndLinks = !!searchValue;
   const membersHelper = new MembersHelper({ t });
 
   const scrollContext = useContext(ScrollbarContext);
 
-  const updateInfoPanelMembers = async () => {
-    if (
-      !infoPanelSelection ||
-      !infoPanelSelection.isRoom ||
-      !infoPanelSelection.id
-    ) {
-      return;
-    }
-
-    const fetchedMembers = await fetchMembers(t, true, withoutTitlesAndLinks);
-    setInfoPanelMembers(fetchedMembers);
-  };
-
   useEffect(() => {
-    updateInfoPanelMembers();
+    updateInfoPanelMembers(t);
   }, [infoPanelSelection, searchValue]);
 
   useEffect(() => {
-    if (searchResultIsLoading) return;
+    if (isMembersPanelUpdating) return;
     scrollContext?.parentScrollbar?.scrollToTop();
-  }, [searchResultIsLoading]);
+  }, [isMembersPanelUpdating]);
 
   const loadNextPage = async () => {
     await fetchMoreMembers(t, withoutTitlesAndLinks);
@@ -259,8 +245,8 @@ const Members = ({
       <MembersList
         loadNextPage={loadNextPage}
         hasNextPage={
-          membersList.length - headersCount < membersFilter.total &&
-          !searchResultIsLoading
+          !isMembersPanelUpdating &&
+          membersList.length - headersCount < membersFilter.total
         }
         itemCount={membersFilter.total + headersCount + publicRoomItemsLength}
         showPublicRoomBar={showPublicRoomBar}
@@ -279,6 +265,7 @@ const Members = ({
               membersHelper={membersHelper}
               currentMember={currentMember}
               hasNextPage={
+                !isMembersPanelUpdating &&
                 membersList.length - headersCount < membersFilter.total
               }
             />
@@ -303,13 +290,12 @@ export default inject(
       infoPanelSelection,
       setIsScrollLocked,
       infoPanelMembers,
-      setInfoPanelMembers,
-      fetchMembers,
+      updateInfoPanelMembers,
       fetchMoreMembers,
       membersIsLoading,
       withPublicRoomBlock,
       searchValue,
-      searchResultIsLoading,
+      isMembersPanelUpdating,
     } = infoPanelStore;
     const { membersFilter } = filesStore;
     const { id: selfId, isAdmin } = userStore.user;
@@ -337,7 +323,7 @@ export default inject(
       isPublicRoomType,
       membersFilter,
       infoPanelMembers,
-      setInfoPanelMembers,
+      updateInfoPanelMembers,
       roomType,
       primaryLink,
       isArchiveFolder: isArchiveFolderRoot,
@@ -348,11 +334,10 @@ export default inject(
       getPrimaryLink: filesStore.getPrimaryLink,
       setExternalLink,
       withPublicRoomBlock,
-      fetchMembers,
       fetchMoreMembers,
       membersIsLoading,
       searchValue,
-      searchResultIsLoading,
+      isMembersPanelUpdating,
     };
   },
 )(

packages/client/src/store/InfoPanelStore.js

@@ -88,7 +88,7 @@ class InfoPanelStore {
   infoPanelSelection = null;
   infoPanelRoom = null;
   membersIsLoading = false;
-  searchResultIsLoading = false;
+  isMembersPanelUpdating = false;
 
   shareChanged = false;
 
@@ -128,15 +128,8 @@ class InfoPanelStore {
 
   setShowSearchBlock = (bool) => (this.showSearchBlock = bool);
 
-  setSearchResultIsLoading = (isLoading) => {
-    this.searchResultIsLoading = isLoading;
-  };
-
   setSearchValue = (value) => {
-    if (value !== this.searchValue) {
-      this.setSearchResultIsLoading(true);
-      this.searchValue = value;
-    }
+    this.searchValue = value;
   };
 
   resetSearch = () => {
@@ -171,6 +164,10 @@ class InfoPanelStore {
     this.isScrollLocked = isScrollLocked;
   };
 
+  setIsMembersPanelUpdating = (isMembersPanelUpdating) => {
+    this.isMembersPanelUpdating = isMembersPanelUpdating;
+  };
+
   // Selection helpers //
 
   get infoPanelSelectedItems() {
@@ -231,6 +228,10 @@ class InfoPanelStore {
           : null;
   }
 
+  get isRoomMembersPanelOpen() {
+    return this.infoPanelSelection?.isRoom && this.roomsView === infoMembers;
+  }
+
   get withPublicRoomBlock() {
     return (
       this.infoPanelCurrentSelection?.access ===
@@ -643,7 +644,6 @@ class InfoPanelStore {
     const [data, links] = await Promise.all(requests);
     clearFilter && this.setMembersIsLoading(false);
     clearTimeout(timerId);
-    this.setSearchResultIsLoading(false);
 
     links && this.publicRoomStore.setExternalLinks(links);
 
@@ -691,32 +691,21 @@ class InfoPanelStore {
     this.setInfoPanelMembers(mergedMembers);
   };
 
-  addInfoPanelMembers = (t, members) => {
-    const convertedMembers = this.convertMembers(t, members);
-
-    if (this.infoPanelMembers) {
-      const { roomId, administrators, users, expected, groups } =
-        this.infoPanelMembers;
-
-      const mergedMembers = {
-        roomId: roomId,
-        administrators: [...administrators, ...convertedMembers.administrators],
-        users: [...users, ...convertedMembers.users],
-        expected: [...expected, ...convertedMembers.expectedMembers],
-        groups: [...groups, ...convertedMembers.groups],
-      };
-
-      this.addMembersTitle(
-        t,
-        mergedMembers.administrators,
-        mergedMembers.users,
-        mergedMembers.expected,
-        mergedMembers.groups,
-      );
-
-      this.filesStore.setInRoomFolder(roomId, true);
-      this.setInfoPanelMembers(mergedMembers);
+  updateInfoPanelMembers = async (t) => {
+    if (
+      !this.infoPanelSelection ||
+      !this.infoPanelSelection.isRoom ||
+      !this.infoPanelSelection.id
+    ) {
+      return;
     }
+
+    this.setIsMembersPanelUpdating(true);
+
+    const fetchedMembers = await this.fetchMembers(t, true, !!this.searchValue);
+    this.setInfoPanelMembers(fetchedMembers);
+
+    this.setIsMembersPanelUpdating(false);
   };
 
   openShareTab = () => {