feat: add block/unblock modal

ts/components/basic/StyledI18nSubText.tsx

@@ -3,15 +3,15 @@ import { forwardRef } from 'react';
 import { I18n } from './I18n';
 import { I18nProps, LocalizerToken } from '../../types/Localizer';
 
-const StyledI18nSubTextContainer = styled('div')<{ textLength: number }>`
+const StyledI18nSubTextContainer = styled('div')`
   font-size: var(--font-size-md);
   line-height: 1.5;
   margin-bottom: var(--margins-lg);
 
-  max-width: ${props =>
+  // TODO: we'd like the description to be on two lines instead of one when it is short.
-    props.textLength > 90
+  // setting the max-width depending on the text length is **not** the way to go.
-      ? '60ch'
+  // We should set the width on the dialog itself, depending on what we display.
-      : '33ch'}; // this is ugly, but we want the dialog description to have multiple lines when a short text is displayed
+  max-width: '60ch';
 `;
 
 const StyledI18nSubMessageTextContainer = styled('div')`
@@ -20,16 +20,15 @@ const StyledI18nSubMessageTextContainer = styled('div')`
   margin-bottom: var(--margins-md);
 `;
 
-export const StyledI18nSubText = forwardRef<
+export const StyledI18nSubText = forwardRef<HTMLSpanElement, I18nProps<LocalizerToken>>(
-  HTMLSpanElement,
+  ({ className, ...props }) => {
-  I18nProps<LocalizerToken> & { textLength: number }
+    return (
->(({ textLength = 90, className, ...props }) => {
+      <StyledI18nSubTextContainer className={className}>
-  return (
+        <I18n {...props} />
-    <StyledI18nSubTextContainer textLength={textLength} className={className}>
+      </StyledI18nSubTextContainer>
-      <I18n {...props} />
+    );
-    </StyledI18nSubTextContainer>
+  }
-  );
+);
-});
 
 export const StyledI18nSubMessageText = forwardRef<HTMLSpanElement, I18nProps<LocalizerToken>>(
   ({ className, ...props }) => {

ts/components/dialog/ModalContainer.tsx

@@ -2,6 +2,7 @@ import { useSelector } from 'react-redux';
 import {
   getAddModeratorsModal,
   getBanOrUnbanUserModalState,
+  getBlockOrUnblockUserModalState,
   getChangeNickNameDialog,
   getConfirmModal,
   getDeleteAccountModalState,
@@ -41,6 +42,7 @@ import { UpdateGroupNameDialog } from './UpdateGroupNameDialog';
 import { UserDetailsDialog } from './UserDetailsDialog';
 import { EditProfileDialog } from './edit-profile/EditProfileDialog';
 import { OpenUrlModal } from './OpenUrlModal';
+import { BlockOrUnblockDialog } from './blockOrUnblock/BlockOrUnblockDialog';
 
 export const ModalContainer = () => {
   const confirmModalState = useSelector(getConfirmModal);
@@ -57,6 +59,7 @@ export const ModalContainer = () => {
   const sessionPasswordModalState = useSelector(getSessionPasswordDialog);
   const deleteAccountModalState = useSelector(getDeleteAccountModalState);
   const banOrUnbanUserModalState = useSelector(getBanOrUnbanUserModalState);
+  const blockOrUnblockModalState = useSelector(getBlockOrUnblockUserModalState);
   const reactListModalState = useSelector(getReactListDialog);
   const reactClearAllModalState = useSelector(getReactClearAllDialog);
   const editProfilePictureModalState = useSelector(getEditProfilePictureModalState);
@@ -67,6 +70,7 @@ export const ModalContainer = () => {
   return (
     <>
       {banOrUnbanUserModalState && <BanOrUnBanUserDialog {...banOrUnbanUserModalState} />}
+      {blockOrUnblockModalState && <BlockOrUnblockDialog {...blockOrUnblockModalState} />}
       {inviteModalState && <InviteContactsDialog {...inviteModalState} />}
       {addModeratorsModalState && <AddModeratorsDialog {...addModeratorsModalState} />}
       {removeModeratorsModalState && <RemoveModeratorsDialog {...removeModeratorsModalState} />}

ts/components/dialog/ModeratorsAddDialog.tsx

@@ -84,7 +84,6 @@ export const AddModeratorsDialog = (props: Props) => {
       }}
     >
       <Flex container={true} flexDirection="column" alignItems="center">
-        <p>Add Moderator:</p>
         <SessionHeaderSearchInput
           type="text"
           isDarkTheme={isDarkTheme}

ts/components/dialog/OpenUrlModal.tsx

@@ -9,11 +9,10 @@ import { SessionWrapperModal } from '../SessionWrapperModal';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SpacerMD } from '../basic/Text';
 import { StyledI18nSubText } from '../basic/StyledI18nSubText';
+import { StyledModalDescriptionContainer } from './shared/ModalDescriptionContainer';
 
-const StyledDescriptionContainer = styled.div`
+const StyledScrollDescriptionContainer = styled(StyledModalDescriptionContainer)`
   max-height: 110px;
-  max-width: 500px;
-  padding: var(--margins-md);
   overflow-y: auto;
 `;
 
@@ -48,14 +47,9 @@ export function OpenUrlModal(props: OpenUrlModalState) {
       showHeader={true}
     >
       <div className="session-modal__centered">
-        <StyledDescriptionContainer>
+        <StyledScrollDescriptionContainer>
-          <StyledI18nSubText
+          <StyledI18nSubText asTag="span" token="urlOpenDescription" args={{ url }} />
-            asTag="span"
+        </StyledScrollDescriptionContainer>
-            token="urlOpenDescription"
-            args={{ url }}
-            textLength={url.length}
-          />
-        </StyledDescriptionContainer>
       </div>
       <SpacerMD />
       <div className="session-modal__button-group">

ts/components/dialog/SessionConfirm.tsx

@@ -15,8 +15,6 @@ import { I18nProps, LocalizerToken } from '../../types/Localizer';
 import { StyledI18nSubText } from '../basic/StyledI18nSubText';
 
 export interface SessionConfirmDialogProps {
-  // message?: string;
-  // messageSub?: string;
   i18nMessage?: I18nProps<LocalizerToken>;
   i18nMessageSub?: I18nProps<LocalizerToken>;
   title?: string;
@@ -135,13 +133,9 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
       {!showHeader && <SpacerLG />}
 
       <div className="session-modal__centered">
-        {i18nMessage ? <StyledI18nSubText {...i18nMessage} textLength={64} /> : null}
+        {i18nMessage ? <StyledI18nSubText {...i18nMessage} /> : null}
         {i18nMessageSub ? (
-          <StyledI18nSubText
+          <StyledI18nSubText {...i18nMessageSub} className="session-confirm-sub-message" />
-            {...i18nMessageSub}
-            className="session-confirm-sub-message"
-            textLength={64}
-          />
         ) : null}
         {radioOptions && chosenOption !== '' ? (
           <SessionRadioGroup

ts/components/dialog/blockOrUnblock/BlockOrUnblockDialog.tsx

@@ -0,0 +1,109 @@
+/* eslint-disable no-await-in-loop */
+import { useDispatch } from 'react-redux';
+
+import { isEmpty } from 'lodash';
+import { useCallback } from 'react';
+import useAsyncFn from 'react-use/lib/useAsyncFn';
+import { useHotkey } from '../../../hooks/useHotkey';
+import { useConversationsNicknameRealNameOrShortenPubkey } from '../../../hooks/useParamSelector';
+import { updateBlockOrUnblockModal } from '../../../state/ducks/modalDialog';
+import { BlockedNumberController } from '../../../util';
+import { SessionWrapperModal } from '../../SessionWrapperModal';
+import { Flex } from '../../basic/Flex';
+import { I18n } from '../../basic/I18n';
+import { SessionButton, SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
+import { StyledModalDescriptionContainer } from '../shared/ModalDescriptionContainer';
+import { BlockOrUnblockModalState } from './BlockOrUnblockModalState';
+
+type ModalState = NonNullable<BlockOrUnblockModalState>;
+
+function getUnblockTokenAndArgs(names: Array<string>) {
+  // multiple unblock is supported
+  switch (names.length) {
+    case 1:
+      return { token: 'blockUnblockName', args: { name: names[0] } } as const;
+    case 2:
+      return { token: 'blockUnblockNameTwo', args: { name: names[0] } } as const;
+
+    default:
+      return {
+        token: 'blockUnblockNameMultiple',
+        args: { name: names[0], count: names.length - 1 },
+      } as const;
+  }
+}
+
+function useBlockUnblockI18nDescriptionArgs({
+  action,
+  pubkeys,
+}: Pick<ModalState, 'action' | 'pubkeys'>) {
+  const names = useConversationsNicknameRealNameOrShortenPubkey(pubkeys);
+  if (!pubkeys.length) {
+    throw new Error('useI18nDescriptionArgsForAction called with empty list of pubkeys');
+  }
+  if (action === 'block') {
+    if (pubkeys.length !== 1 || names.length !== 1) {
+      throw new Error('we can only block a single user at a time');
+    }
+    return { token: 'blockDescription', args: { name: names[0] } } as const;
+  }
+
+  return getUnblockTokenAndArgs(names);
+}
+
+export const BlockOrUnblockDialog = ({ pubkeys, action, onConfirmed }: NonNullable<ModalState>) => {
+  const dispatch = useDispatch();
+
+  const localizedAction = action === 'block' ? window.i18n('block') : window.i18n('blockUnblock');
+
+  const args = useBlockUnblockI18nDescriptionArgs({ action, pubkeys });
+
+  const closeModal = useCallback(() => {
+    dispatch(updateBlockOrUnblockModal(null));
+  }, [dispatch]);
+  useHotkey('Escape', closeModal);
+
+  const [, onConfirm] = useAsyncFn(async () => {
+    if (action === 'block') {
+      // we never block more than one user from the UI, so this is not very useful, just a type guard
+      for (let index = 0; index < pubkeys.length; index++) {
+        const pubkey = pubkeys[index];
+        await BlockedNumberController.block(pubkey);
+      }
+    } else {
+      await BlockedNumberController.unblockAll(pubkeys);
+    }
+    closeModal();
+    onConfirmed?.();
+  }, [action, onConfirmed, pubkeys]);
+
+  if (isEmpty(pubkeys)) {
+    closeModal();
+    return null;
+  }
+  return (
+    <SessionWrapperModal showExitIcon={true} title={localizedAction} onClose={closeModal}>
+      <StyledModalDescriptionContainer>
+        <I18n {...args} />
+      </StyledModalDescriptionContainer>
+      <Flex container={true} flexDirection="column" alignItems="center">
+        <Flex container={true}>
+          <div className="session-modal__button-group">
+            <SessionButton
+              buttonType={SessionButtonType.Simple}
+              buttonColor={SessionButtonColor.Danger}
+              onClick={onConfirm}
+              text={localizedAction}
+            />
+            <SessionButton
+              buttonType={SessionButtonType.Simple}
+              buttonColor={SessionButtonColor.White}
+              onClick={closeModal}
+              text={window.i18n('cancel')}
+            />
+          </div>
+        </Flex>
+      </Flex>
+    </SessionWrapperModal>
+  );
+};

ts/components/dialog/blockOrUnblock/BlockOrUnblockModalState.ts

@@ -0,0 +1,5 @@
+export type BlockOrUnblockModalState = {
+  action: 'block' | 'unblock';
+  pubkeys: Array<string>;
+  onConfirmed?: () => void;
+} | null;

ts/components/dialog/shared/ModalDescriptionContainer.tsx

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const StyledModalDescriptionContainer = styled.div`
+  padding: var(--margins-md);
+  max-width: 500px;
+`;

ts/components/settings/BlockedList.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 
+import { useDispatch } from 'react-redux';
 import useUpdate from 'react-use/lib/useUpdate';
 import styled from 'styled-components';
 import { useSet } from '../../hooks/useSet';
-import { ToastUtils } from '../../session/utils';
+import { updateBlockOrUnblockModal } from '../../state/ducks/modalDialog';
 import { BlockedNumberController } from '../../util';
 import { MemberListItem } from '../MemberListItem';
 import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
@@ -76,6 +77,7 @@ const NoBlockedContacts = () => {
 };
 
 export const BlockedContactsList = () => {
+  const dispatch = useDispatch();
   const [expanded, setExpanded] = useState(false);
   const {
     uniqueValues: selectedIds,
@@ -98,15 +100,17 @@ export const BlockedContactsList = () => {
 
   async function unBlockThoseUsers() {
     if (selectedIds.length) {
-      await BlockedNumberController.unblockAll(selectedIds);
+      dispatch(
-      emptySelected();
+        updateBlockOrUnblockModal({
-      ToastUtils.pushToastSuccess(
+          action: 'unblock',
-        'unblocked',
+          pubkeys: selectedIds,
-        window.i18n('blockUnblockedUser', {
+          onConfirmed: () => {
-          name: selectedIds.join(', '),
+            // annoying, but until that BlockedList is in redux, we need to force a refresh of this component when a change is made.
+            emptySelected();
+            forceUpdate();
+          },
         })
       );
-      forceUpdate();
     }
   }
 

ts/hooks/useParamSelector.ts

@@ -76,6 +76,19 @@ export function useConversationsUsernameWithQuoteOrFullPubkey(pubkeys: Array<str
   });
 }
 
+export function useConversationsNicknameRealNameOrShortenPubkey(pubkeys: Array<string>) {
+  return useSelector((state: StateType) => {
+    return pubkeys.map(pk => {
+      if (pk === UserUtils.getOurPubKeyStrFromCache() || pk.toLowerCase() === 'you') {
+        return window.i18n('you');
+      }
+      const convo = state.conversations.conversationLookup[pk];
+
+      return convo?.nickname || convo?.displayNameInProfile || PubKey.shorten(pk);
+    });
+  });
+}
+
 export function useOurConversationUsername() {
   return useConversationUsername(UserUtils.getOurPubKeyStrFromCache());
 }

ts/interactions/conversationInteractions.ts

@@ -9,6 +9,7 @@ import { SessionButtonColor } from '../components/basic/SessionButton';
 import { getCallMediaPermissionsSettings } from '../components/settings/SessionSettings';
 import { Data } from '../data/data';
 import { SettingsKey } from '../data/settings-key';
+import { ConversationTypeEnum } from '../models/types';
 import { uploadFileToFsWithOnionV4 } from '../session/apis/file_server_api/FileServerApi';
 import { OpenGroupUtils } from '../session/apis/open_group_api/utils';
 import { GetNetworkTime } from '../session/apis/snode_api/getNetworkTime';
@@ -30,6 +31,7 @@ import {
   changeNickNameModal,
   updateAddModeratorsModal,
   updateBanOrUnbanUserModal,
+  updateBlockOrUnblockModal,
   updateConfirmModal,
   updateGroupMembersModal,
   updateGroupNameModal,
@@ -40,13 +42,12 @@ import { MIME } from '../types';
 import { IMAGE_JPEG } from '../types/MIME';
 import { processNewAttachment } from '../types/MessageAttachment';
 import { urlToBlob } from '../types/attachments/VisualAttachment';
-import { BlockedNumberController } from '../util/blockedNumberController';
 import { encryptProfile } from '../util/crypto/profileEncrypter';
 import { ReleasedFeatures } from '../util/releaseFeature';
 import { Storage, setLastProfileUpdateTimestamp } from '../util/storage';
 import { UserGroupsWrapperActions } from '../webworker/workers/browser/libsession_worker_interface';
-import { ConversationTypeEnum } from '../models/types';
 import { ConversationInteractionStatus, ConversationInteractionType } from './types';
+import { BlockedNumberController } from '../util';
 
 export async function copyPublicKeyByConvoId(convoId: string) {
   if (OpenGroupUtils.isOpenGroupV2(convoId)) {
@@ -67,51 +68,21 @@ export async function copyPublicKeyByConvoId(convoId: string) {
 }
 
 export async function blockConvoById(conversationId: string) {
-  const conversation = getConversationController().get(conversationId);
+  window.inboxStore?.dispatch(
-
+    updateBlockOrUnblockModal({
-  if (!conversation.id || conversation.isPublic()) {
+      action: 'block',
-    return;
+      pubkeys: [conversationId],
-  }
+    })
-
-  // I don't think we want to reset the approved fields when blocking a contact
-  // if (conversation.isPrivate()) {
-  //   await conversation.setIsApproved(false);
-  // }
-
-  await BlockedNumberController.block(conversation.id);
-  await conversation.commit();
-  ToastUtils.pushToastSuccess(
-    'blocked',
-    window.i18n('blockBlockedUser', { name: conversation.getNicknameOrRealUsernameOrPlaceholder() })
   );
 }
 
 export async function unblockConvoById(conversationId: string) {
-  const conversation = getConversationController().get(conversationId);
+  window.inboxStore?.dispatch(
-
+    updateBlockOrUnblockModal({
-  if (!conversation) {
+      action: 'unblock',
-    // we assume it's a block contact and not group.
+      pubkeys: [conversationId],
-    // this is to be able to unlock a contact we don't have a conversation with.
-    await BlockedNumberController.unblockAll([conversationId]);
-    ToastUtils.pushToastSuccess(
-      'unblocked',
-      window.i18n('blockUnblockedUser', {
-        name: conversationId,
-      })
-    );
-    return;
-  }
-  if (!conversation.id || conversation.isPublic()) {
-    return;
-  }
-  await BlockedNumberController.unblockAll([conversationId]);
-  ToastUtils.pushToastSuccess(
-    'unblocked',
-    window.i18n('blockUnblockedUser', {
-      name: conversation.getNicknameOrRealUsernameOrPlaceholder() ?? '',
     })
   );
-  await conversation.commit();
 }
 
 /**
@@ -155,7 +126,7 @@ export async function declineConversationWithoutConfirm({
   // this will update the value in the wrapper if needed but not remove the entry if we want it gone. The remove is done below with removeContactFromWrapper
   await conversationToDecline.commit();
   if (blockContact) {
-    await blockConvoById(conversationId);
+    await BlockedNumberController.block(conversationId);
   }
   // when removing a message request, without blocking it, we actually have no need to store the conversation in the wrapper. So just remove the entry
 

ts/state/ducks/modalDialog.tsx

@@ -1,4 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { BlockOrUnblockModalState } from '../../components/dialog/blockOrUnblock/BlockOrUnblockModalState';
 import { EnterPasswordModalProps } from '../../components/dialog/EnterPasswordModal';
 import { HideRecoveryPasswordDialogProps } from '../../components/dialog/HideRecoveryPasswordDialog';
 import { SessionConfirmDialogProps } from '../../components/dialog/SessionConfirm';
@@ -54,6 +55,7 @@ export type ModalState = {
   confirmModal: ConfirmModalState;
   inviteContactModal: InviteContactModalState;
   banOrUnbanUserModal: BanOrUnbanUserModalState;
+  blockOrUnblockModal: BlockOrUnblockModalState;
   removeModeratorsModal: RemoveModeratorsModalState;
   addModeratorsModal: AddModeratorsModalState;
   groupNameModal: UpdateGroupNameModalState;
@@ -79,6 +81,7 @@ export const initialModalState: ModalState = {
   addModeratorsModal: null,
   removeModeratorsModal: null,
   banOrUnbanUserModal: null,
+  blockOrUnblockModal: null,
   groupNameModal: null,
   groupMembersModal: null,
   userDetailsModal: null,
@@ -109,6 +112,9 @@ const ModalSlice = createSlice({
     updateBanOrUnbanUserModal(state, action: PayloadAction<BanOrUnbanUserModalState | null>) {
       return { ...state, banOrUnbanUserModal: action.payload };
     },
+    updateBlockOrUnblockModal(state, action: PayloadAction<BlockOrUnblockModalState | null>) {
+      return { ...state, blockOrUnblockModal: action.payload };
+    },
     updateAddModeratorsModal(state, action: PayloadAction<AddModeratorsModalState | null>) {
       return { ...state, addModeratorsModal: action.payload };
     },
@@ -193,6 +199,7 @@ export const {
   sessionPassword,
   updateDeleteAccountModal,
   updateBanOrUnbanUserModal,
+  updateBlockOrUnblockModal,
   updateReactListModal,
   updateReactClearAllModal,
   updateEditProfilePictureModal,

ts/state/selectors/modal.ts

@@ -63,6 +63,11 @@ export const getBanOrUnbanUserModalState = createSelector(
   (state: ModalState): BanOrUnbanUserModalState => state.banOrUnbanUserModal
 );
 
+export const getBlockOrUnblockUserModalState = createSelector(
+  getModal,
+  (state: ModalState) => state.blockOrUnblockModal
+);
+
 export const getUpdateGroupNameModal = createSelector(
   getModal,
   (state: ModalState): UpdateGroupNameModalState => state.groupNameModal

ts/test/util/blockedNumberController_test.ts

@@ -53,7 +53,7 @@ describe('BlockedNumberController', () => {
     it('should block the user', async () => {
       const other = TestUtils.generateFakePubKey();
 
-      await BlockedNumberController.block(other);
+      await BlockedNumberController.block(other.key);
 
       const blockedNumbers = BlockedNumberController.getBlockedNumbers();
       expect(blockedNumbers).to.have.lengthOf(1);

ts/types/Localizer.ts

@@ -29,7 +29,7 @@ type DynamicArgs<LocalizedString extends string> =
     : /** If a string segment follows the variable form parse its variable name and recursively
        * check for more dynamic args */
       // eslint-disable-next-line @typescript-eslint/no-unused-vars -- We dont care about _Pre TODO: see if we can remove this infer
-      LocalizedString extends `${infer _Pre}{${infer Var}}${infer Rest}`
+      LocalizedString extends `${string}{${infer Var}}${infer Rest}`
       ? Var | DynamicArgs<Rest>
       : never;
 

ts/util/blockedNumberController.ts

@@ -29,7 +29,7 @@ export class BlockedNumberController {
    *
    * @param user The user to block.
    */
-  public static async block(user: string | PubKey): Promise<void> {
+  public static async block(user: string): Promise<void> {
     // The reason we add all linked device to block number set instead of checking if any device of a user is in the `isBlocked` function because
     // `isBlocked` is used synchronously in the code. To check if any device is blocked needs it to be async, which would mean all calls to `isBlocked` will also need to be async and so on
     // This is too much of a hassle at the moment as some UI code will have to be migrated to work with this async call.
@@ -78,7 +78,7 @@ export class BlockedNumberController {
     }
   }
 
-  public static async setBlocked(user: string | PubKey, blocked: boolean): Promise<void> {
+  public static async setBlocked(user: string, blocked: boolean): Promise<void> {
     if (blocked) {
       return BlockedNumberController.block(user);
     }

ts/util/theme.ts

@@ -1,7 +1,7 @@
 import { ThemeStateType } from '../themes/constants/colors';
 
-export const checkDarkTheme = (theme: ThemeStateType): boolean => theme.includes('dark');
+export const checkDarkTheme = (theme: ThemeStateType): boolean => theme?.includes('dark');
-export const checkLightTheme = (theme: ThemeStateType): boolean => theme.includes('light');
+export const checkLightTheme = (theme: ThemeStateType): boolean => theme?.includes('light');
 
 export function getOppositeTheme(themeName: ThemeStateType): ThemeStateType {
   if (checkDarkTheme(themeName)) {
@@ -11,7 +11,7 @@ export function getOppositeTheme(themeName: ThemeStateType): ThemeStateType {
     return themeName.replace('light', 'dark') as ThemeStateType;
   }
   // If neither 'dark' nor 'light' is in the theme name, return the original theme name.
-  return themeName as ThemeStateType;
+  return themeName;
 }
 
 export function isThemeMismatched(themeName: ThemeStateType, prefersDark: boolean): boolean {