Fix adding to group by username

stylesheets/_modules.scss

@@ -5001,11 +5001,6 @@ button.module-image__border-overlay:focus {
           min-width: 20px;
         }
       }
-
-      &__spinner__container {
-        margin-left: 16px;
-        margin-right: 16px;
-      }
     }
 
     &--header {

ts/components/CircleCheckbox.tsx

@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import classNames from 'classnames';
 
 import { getClassNamesFor } from '../util/getClassNamesFor';
@@ -53,6 +53,13 @@ export function CircleCheckbox({
     throw missingCaseError(variant);
   }
 
+  const onChangeWrapped = useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(ev.target.checked);
+    },
+    [onChange]
+  );
+
   return (
     <div className={classNames(getClassName('__checkbox'), variantModifier)}>
       <input
@@ -61,7 +68,7 @@ export function CircleCheckbox({
         aria-disabled={disabled}
         id={id}
         name={name}
-        onChange={onChange && (ev => onChange(ev.target.checked))}
+        onChange={onChangeWrapped}
         onClick={onClick}
         type={isRadio ? 'radio' : 'checkbox'}
       />

ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx

@@ -10,7 +10,7 @@ import React, {
   useRef,
   useCallback,
 } from 'react';
-import { noop, omit } from 'lodash';
+import { omit } from 'lodash';
 import type { MeasuredComponentProps } from 'react-measure';
 import Measure from 'react-measure';
 import type { ListRowProps } from 'react-virtualized';
@@ -340,9 +340,9 @@ export function ChooseGroupMembersModal({
             toggleConversationInChooseMembers={conversationId =>
               handleContactClick(conversationId, undefined)
             }
-            showUserNotFoundModal={noop}
+            showUserNotFoundModal={showUserNotFoundModal}
             setIsFetchingUUID={setIsFetchingUUID}
-            lookupConversationWithoutUuid={() => Promise.resolve(undefined)}
+            lookupConversationWithoutUuid={lookupConversationWithoutUuid}
           />
         );
         break;

ts/components/conversation/conversation-details/ConversationDetails.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { ReactNode } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 
 import { Button, ButtonIconType, ButtonVariant } from '../../Button';
 import { Tooltip } from '../../Tooltip';
@@ -204,6 +204,11 @@ export function ConversationDetails({
   const cannotLeaveBecauseYouAreLastAdmin =
     isAdmin && !isJustMe && !isAnyoneElseAnAdmin;
 
+  const onCloseModal = useCallback(() => {
+    setModalState(ModalState.NothingOpen);
+    setEditGroupAttributesRequestState(RequestState.Inactive);
+  }, []);
+
   let modalNode: ReactNode;
   switch (modalState) {
     case ModalState.NothingOpen:
@@ -242,10 +247,7 @@ export function ConversationDetails({
               },
             });
           }}
-          onClose={() => {
-            setModalState(ModalState.NothingOpen);
-            setEditGroupAttributesRequestState(RequestState.Inactive);
-          }}
+          onClose={onCloseModal}
           requestState={editGroupAttributesRequestState}
           title={conversation.title}
           deleteAvatarFromDisk={deleteAvatarFromDisk}
@@ -289,10 +291,7 @@ export function ConversationDetails({
           }}
           maxGroupSize={maxGroupSize}
           maxRecommendedGroupSize={maxRecommendedGroupSize}
-          onClose={() => {
-            setModalState(ModalState.NothingOpen);
-            setEditGroupAttributesRequestState(RequestState.Inactive);
-          }}
+          onClose={onCloseModal}
           requestState={addGroupMembersRequestState}
         />
       );
@@ -303,9 +302,7 @@ export function ConversationDetails({
           i18n={i18n}
           id={conversation.id}
           muteExpiresAt={conversation.muteExpiresAt}
-          onClose={() => {
-            setModalState(ModalState.NothingOpen);
-          }}
+          onClose={onCloseModal}
           setMuteExpiration={setMuteExpiration}
         />
       );
@@ -324,9 +321,7 @@ export function ConversationDetails({
           hasXButton
           i18n={i18n}
           title={i18n('ConversationDetails__unmute--title')}
-          onClose={() => {
-            setModalState(ModalState.NothingOpen);
-          }}
+          onClose={onCloseModal}
         >
           {getMutedUntilText(Number(conversation.muteExpiresAt), i18n)}
         </ConfirmationDialog>

ts/util/lookupConversationWithoutUuid.ts

@@ -136,6 +136,14 @@ export async function lookupConversationWithoutUuid(
 async function checkForUsername(
   username: string
 ): Promise<FoundUsernameType | undefined> {
+  let hash: Buffer;
+  try {
+    hash = usernames.hash(username);
+  } catch (error) {
+    log.error('checkForUsername: invalid username', Errors.toLogFormat(error));
+    return undefined;
+  }
+
   const { server } = window.textsecure;
   if (!server) {
     throw new Error('server is not available!');
@@ -143,7 +151,7 @@ async function checkForUsername(
 
   try {
     const account = await server.getAccountForUsername({
-      hash: usernames.hash(username),
+      hash,
     });
 
     if (!account.uuid) {