fix: revert virtualized group members list

since it caused overflow, disabled buttons when making a group

ts/components/MemberListItem.tsx

@@ -24,12 +24,11 @@ const StyledSessionMemberItem = styled.button<{
   selected?: boolean;
   disableBg?: boolean;
 }>`
-  cursor: pointer;
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-shrink: 0;
-  flex-grow: 1;
   font-family: var(--font-default);
   padding: 0px var(--margins-sm);
   height: ${props => (props.inMentions ? '40px' : '50px')};
@@ -76,6 +75,7 @@ export const MemberListItem = (props: {
   isAdmin?: boolean; // if true,  we add a small crown on top of their avatar
   onSelect?: (pubkey: string) => void;
   onUnselect?: (pubkey: string) => void;
+  disabled?: boolean;
   dataTestId?: string;
 }) => {
   const {
@@ -87,6 +87,7 @@ export const MemberListItem = (props: {
     onUnselect,
     inMentions,
     disableBg,
+    disabled,
     dataTestId,
   } = props;
 
@@ -110,6 +111,7 @@ export const MemberListItem = (props: {
       inMentions={inMentions}
       selected={isSelected}
       disableBg={disableBg}
+      disabled={disabled}
     >
       <StyledInfo>
         <AvatarItem memberPubkey={pubkey} isAdmin={isAdmin || false} />

ts/components/leftpane/overlay/OverlayClosedGroup.tsx

@@ -5,7 +5,6 @@ import useKey from 'react-use/lib/useKey';
 import styled from 'styled-components';
 
 import { isEmpty } from 'lodash';
-import { AutoSizer, List, ListRowProps } from 'react-virtualized';
 import { SessionButton } from '../../basic/SessionButton';
 import { SessionSpinner } from '../../loading';
 
@@ -42,14 +41,11 @@ const StyledNoResults = styled.div`
 const StyledGroupMemberListContainer = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: start;
-  padding: 0;
+  flex: 1;
   width: 100%;
-  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
-  flex-grow: 1;
-  flex-shrink: 1;
+
   border-top: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
 
@@ -64,34 +60,6 @@ const NoContacts = () => {
   );
 };
 
-const MemberRow = (
-  { index, key }: ListRowProps,
-  contactsToRender: Array<string>,
-  selectedMemberIds: Array<string>,
-  addToSelected: (memberId: string) => void,
-  removeFromSelected: (memberId: string) => void
-): JSX.Element | null => {
-  // assume conversations that have been marked unapproved should be filtered out by selector.
-  if (!contactsToRender) {
-    throw new Error('MemberRow: Tried to render without contacts');
-  }
-
-  const memberPubkey = contactsToRender[index];
-  if (!memberPubkey) {
-    throw new Error('MemberRow: contact selector returned element containing falsy value.');
-  }
-
-  return (
-    <MemberListItem
-      key={key}
-      pubkey={memberPubkey}
-      isSelected={selectedMemberIds.includes(memberPubkey)}
-      onSelect={addToSelected}
-      onUnselect={removeFromSelected}
-    />
-  );
-};
-
 /**
  * Makes some validity check and return true if the group was indead created
  */
@@ -173,7 +141,7 @@ export const OverlayClosedGroup = () => {
 
   const noContactsForClosedGroup = isEmpty(searchTerm) && contactsToRender.length === 0;
 
-  const disableCreateButton = !selectedMemberIds.length && !groupName.length;
+  const disableCreateButton = loading || (!selectedMemberIds.length && !groupName.length);
 
   return (
     <StyledLeftPaneOverlay
@@ -203,6 +171,7 @@ export const OverlayClosedGroup = () => {
           monospaced={true}
           isTextArea={true}
           inputDataTestId="new-closed-group-name"
+          editable={!loading}
         />
         <SpacerMD />
         <SessionSpinner loading={loading} />
@@ -210,32 +179,22 @@ export const OverlayClosedGroup = () => {
       </Flex>
 
       <SessionSearchInput />
-      <StyledGroupMemberListContainer key={`member-list-0`}>
+      <StyledGroupMemberListContainer>
         {noContactsForClosedGroup ? (
           <NoContacts />
         ) : searchTerm && !contactsToRender.length ? (
           <StyledNoResults>{window.i18n('noSearchResults', [searchTerm])}</StyledNoResults>
         ) : (
-          <AutoSizer>
-            {({ height, width }) => (
-              <List
-                height={height}
-                width={width}
-                autoHeight={true}
-                rowCount={contactsToRender.length}
-                rowHeight={50}
-                rowRenderer={props =>
-                  MemberRow(
-                    props,
-                    contactsToRender,
-                    selectedMemberIds,
-                    addToSelected,
-                    removeFromSelected
-                  )
-                }
-              />
-            )}
-          </AutoSizer>
+          contactsToRender.map((pubkey: string) => (
+            <MemberListItem
+              key={`member-list-${pubkey}`}
+              pubkey={pubkey}
+              isSelected={selectedMemberIds.includes(pubkey)}
+              onSelect={addToSelected}
+              onUnselect={removeFromSelected}
+              disabled={loading}
+            />
+          ))
         )}
       </StyledGroupMemberListContainer>
 

ts/state/selectors/conversations.ts

@@ -452,10 +452,6 @@ export const getLeftPaneConversationIdsCount = createSelector(
 
 const getDirectContacts = createSelector(getSortedConversations, _getPrivateFriendsConversations);
 
-export const getPrivateContactsPubkeys = createSelector(getDirectContacts, state =>
-  state.map(m => m.id)
-);
-
 export const getDirectContactsCount = createSelector(
   getDirectContacts,
   (contacts: Array<ReduxConversationType>) => contacts.length
@@ -492,6 +488,10 @@ export const getDirectContactsByName = createSelector(
   }
 );
 
+export const getPrivateContactsPubkeys = createSelector(getDirectContactsByName, state =>
+  state.map(m => m.id)
+);
+
 export const getGlobalUnreadMessageCount = createSelector(
   getSortedConversations,
   _getGlobalUnreadCount