fix: make use of useSet to select in memberList

ts/components/leftpane/overlay/OverlayClosedGroup.tsx

@@ -17,6 +17,7 @@ import useKey from 'react-use/lib/useKey';
 import styled from 'styled-components';
 import { SessionSearchInput } from '../../SessionSearchInput';
 import { getSearchResults, isSearching } from '../../../state/selectors/search';
+import { useSet } from '../../../hooks/useSet';
 
 const StyledMemberListNoContacts = styled.div`
   font-family: var(--font-font-mono);
@@ -44,28 +45,16 @@ export const OverlayClosedGroup = () => {
   const privateContactsPubkeys = useSelector(getPrivateContactsPubkeys);
   const [groupName, setGroupName] = useState('');
   const [loading, setLoading] = useState(false);
-  const [selectedMemberIds, setSelectedMemberIds] = useState<Array<string>>([]);
+  const {
+    uniqueValues: selectedMemberIds,
+    addTo: addToSelected,
+    removeFrom: removeFromSelected,
+  } = useSet<string>([]);
 
   function closeOverlay() {
     dispatch(resetOverlayMode());
   }
 
-  function handleSelectMember(memberId: string) {
-    if (selectedMemberIds.includes(memberId)) {
-      return;
-    }
-
-    setSelectedMemberIds([...selectedMemberIds, memberId]);
-  }
-
-  function handleUnselectMember(unselectId: string) {
-    setSelectedMemberIds(
-      selectedMemberIds.filter(id => {
-        return id !== unselectId;
-      })
-    );
-  }
-
   async function onEnterPressed() {
     if (loading) {
       window?.log?.warn('Closed group creation already in progress');
@@ -132,12 +121,8 @@ export const OverlayClosedGroup = () => {
                 pubkey={memberPubkey}
                 isSelected={selectedMemberIds.some(m => m === memberPubkey)}
                 key={memberPubkey}
-                onSelect={selectedMember => {
-                  handleSelectMember(selectedMember);
-                }}
-                onUnselect={unselectedMember => {
-                  handleUnselectMember(unselectedMember);
-                }}
+                onSelect={addToSelected}
+                onUnselect={removeFromSelected}
               />
             ))}
           </div>

ts/components/settings/section/CategoryConversations.tsx

@@ -2,16 +2,14 @@ import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import useUpdate from 'react-use/lib/useUpdate';
 import { SettingsKey } from '../../../data/settings-key';
-import { unblockConvoById } from '../../../interactions/conversationInteractions';
-import { getConversationController } from '../../../session/conversations';
+import { useSet } from '../../../hooks/useSet';
 import { ToastUtils } from '../../../session/utils';
 import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
 import { getBlockedPubkeys } from '../../../state/selectors/conversations';
 import { getAudioAutoplay } from '../../../state/selectors/userConfig';
-import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
+import { MemberListItem } from '../../MemberListItem';
 
 import {
-  SessionSettingButtonItem,
   SessionSettingsItemWrapper,
   SessionToggleWithDescription,
 } from '../SessionSettingListItem';
@@ -95,31 +93,34 @@ const NoBlockedContacts = () => {
   );
 };
 
-const BlockedEntry = (props: { blockedEntry: string; title: string }) => {
-  return (
-    <SessionSettingButtonItem
-      key={props.blockedEntry}
-      buttonColor={SessionButtonColor.Danger}
-      buttonType={SessionButtonType.Square}
-      buttonText={window.i18n('unblockUser')}
-      title={props.title}
-      onClick={async () => {
-        await unblockConvoById(props.blockedEntry);
-      }}
-    />
-  );
-};
-
 const BlockedContactsList = (props: { blockedNumbers: Array<string> }) => {
-  const blockedEntries = props.blockedNumbers.map(blockedEntry => {
-    const currentModel = getConversationController().get(blockedEntry);
-    const title =
-      currentModel?.getNicknameOrRealUsernameOrPlaceholder() || window.i18n('anonymous');
+  const {
+    uniqueValues: selectedIds,
+    addTo: addToSelected,
+    removeFrom: removeFromSelected,
+  } = useSet<string>([]);
 
-    return <BlockedEntry key={blockedEntry} blockedEntry={blockedEntry} title={title} />;
+  const blockedEntries = props.blockedNumbers.map(blockedEntry => {
+    return (
+      <MemberListItem
+        pubkey={blockedEntry}
+        isSelected={selectedIds.includes(blockedEntry)}
+        key={blockedEntry}
+        onSelect={addToSelected}
+        onUnselect={removeFromSelected}
+      />
+    );
   });
 
-  return <>{blockedEntries}</>;
+  return (
+    <>
+      <SessionSettingsItemWrapper
+        title={window.i18n('blockedSettingsTitle')}
+        inline={false}
+        children={blockedEntries}
+      />
+    </>
+  );
 };
 
 export const CategoryConversations = () => {

ts/hooks/useSet.ts

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import _ from 'lodash';
+import { isEqual } from 'lodash';
 
 export function useSet<T>(initialValues: Array<T> = []) {
   const [uniqueValues, setUniqueValues] = useState<Array<T>>(initialValues);
@@ -18,7 +18,7 @@ export function useSet<T>(initialValues: Array<T> = []) {
       if (!uniqueValues.includes(valueToRemove)) {
         return;
       }
-      setUniqueValues(uniqueValues.filter(v => !_.isEqual(v, valueToRemove)));
+      setUniqueValues(uniqueValues.filter(v => !isEqual(v, valueToRemove)));
     },
     [uniqueValues, setUniqueValues]
   );