mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Allow adding to a group by phone number

Browse source
This commit is contained in:
Fedor Indutny 2022-04-04 17:38:22 -07:00 • committed by GitHub
parent 76a1a805ef
commit 9568d5792e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
49 changed files with 1842 additions and 693 deletions
Download patch file Download diff file Expand all files Collapse all files

71
ts/components/ConversationList.stories.tsx
View file

@ -20,6 +20,7 @@ import enMessages from '../../_locales/en/messages.json';
import { ThemeType } from '../types/Util';
import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';
import { UUID } from '../types/UUID';
import { makeFakeLookupConversationWithoutUuid } from '../test-both/helpers/fakeLookupConversationWithoutUuid';
const i18n = setupI18n('en', enMessages);
@ -85,13 +86,11 @@ const Wrapper = ({
/>
)}
scrollable={scrollable}
lookupConversationWithoutUuid={makeFakeLookupConversationWithoutUuid()}
showChooseGroupMembers={action('showChooseGroupMembers')}
startNewConversationFromPhoneNumber={action(
'startNewConversationFromPhoneNumber'
)}
startNewConversationFromUsername={action(
'startNewConversationFromUsername'
)}
showUserNotFoundModal={action('showUserNotFoundModal')}
setIsFetchingUUID={action('setIsFetchingUUID')}
showConversation={action('showConversation')}
theme={theme}
/>
);
@ -495,16 +494,47 @@ story.add('Headers', () => (
type: RowType.Header,
i18nKey: 'findByUsernameHeader',
},
{
type: RowType.Header,
i18nKey: 'findByPhoneNumberHeader',
},
]}
/>
));
story.add('Start new conversation', () => (
story.add('Find by phone number', () => (
<Wrapper
rows={[
{
type: RowType.Header,
i18nKey: 'findByPhoneNumberHeader',
},
{
type: RowType.StartNewConversation,
phoneNumber: '+12345559876',
phoneNumber: {
isValid: true,
userInput: '+1(234)555 98 76',
e164: '+12345559876',
},
isFetching: false,
},
{
type: RowType.StartNewConversation,
phoneNumber: {
isValid: true,
userInput: '+1(234)555 98 76',
e164: '+12345559876',
},
isFetching: true,
},
{
type: RowType.StartNewConversation,
phoneNumber: {
isValid: true,
userInput: '+1(234)555',
e164: '+1234555',
},
isFetching: false,
},
]}
/>
@ -548,7 +578,30 @@ story.add('Kitchen sink', () => (
rows={[
{
type: RowType.StartNewConversation,
phoneNumber: '+12345559876',
phoneNumber: {
isValid: true,
userInput: '+1(234)555 98 76',
e164: '+12345559876',
},
isFetching: false,
},
{
type: RowType.StartNewConversation,
phoneNumber: {
isValid: true,
userInput: '+1(234)555 98 76',
e164: '+12345559876',
},
isFetching: true,
},
{
type: RowType.StartNewConversation,
phoneNumber: {
isValid: false,
userInput: '+1(234)555 98',
e164: '+123455598',
},
isFetching: true,
},
{
type: RowType.Header,

60
ts/components/ConversationList.tsx
View file

@ -10,10 +10,12 @@ import { get, pick } from 'lodash';
import { missingCaseError } from '../util/missingCaseError';
import { assert } from '../util/assert';
import type { ParsedE164Type } from '../util/libphonenumberInstance';
import type { LocalizerType, ThemeType } from '../types/Util';
import { ScrollBehavior } from '../types/Util';
import { getConversationListWidthBreakpoint } from './_util';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import type { LookupConversationWithoutUuidActionsType } from '../util/lookupConversationWithoutUuid';
import type { PropsData as ConversationListItemPropsType } from './conversationList/ConversationListItem';
import { ConversationListItem } from './conversationList/ConversationListItem';
@ -21,6 +23,7 @@ import type { ContactListItemConversationType as ContactListItemPropsType } from
import { ContactListItem } from './conversationList/ContactListItem';
import type { ContactCheckboxDisabledReason } from './conversationList/ContactCheckbox';
import { ContactCheckbox as ContactCheckboxComponent } from './conversationList/ContactCheckbox';
import { PhoneNumberCheckbox as PhoneNumberCheckboxComponent } from './conversationList/PhoneNumberCheckbox';
import { CreateNewGroupButton } from './conversationList/CreateNewGroupButton';
import { StartNewConversation as StartNewConversationComponent } from './conversationList/StartNewConversation';
import { SearchResultsLoadingFakeHeader as SearchResultsLoadingFakeHeaderComponent } from './conversationList/SearchResultsLoadingFakeHeader';
@ -32,6 +35,7 @@ export enum RowType {
Blank,
Contact,
ContactCheckbox,
PhoneNumberCheckbox,
Conversation,
CreateNewGroup,
Header,
@ -62,6 +66,13 @@ type ContactCheckboxRowType = {
disabledReason?: ContactCheckboxDisabledReason;
};
type PhoneNumberCheckboxRowType = {
type: RowType.PhoneNumberCheckbox;
phoneNumber: ParsedE164Type;
isChecked: boolean;
isFetching: boolean;
};
type ConversationRowType = {
type: RowType.Conversation;
conversation: ConversationListItemPropsType;
@ -91,7 +102,8 @@ type SearchResultsLoadingFakeRowType = {
type StartNewConversationRowType = {
type: RowType.StartNewConversation;
phoneNumber: string;
phoneNumber: ParsedE164Type;
isFetching: boolean;
};
type UsernameRowType = {
@ -105,6 +117,7 @@ export type Row =
| BlankRowType
| ContactRowType
| ContactCheckboxRowType
| PhoneNumberCheckboxRowType
| ConversationRowType
| CreateNewGroupRowType
| MessageRowType
@ -141,9 +154,8 @@ export type PropsType = {
onSelectConversation: (conversationId: string, messageId?: string) => void;
renderMessageSearchResult: (id: string) => JSX.Element;
showChooseGroupMembers: () => void;
startNewConversationFromPhoneNumber: (e164: string) => void;
startNewConversationFromUsername: (username: string) => void;
};
showConversation: (conversationId: string) => void;
} & LookupConversationWithoutUuidActionsType;
const NORMAL_ROW_HEIGHT = 76;
const HEADER_ROW_HEIGHT = 40;
@ -163,8 +175,10 @@ export const ConversationList: React.FC<PropsType> = ({
scrollable = true,
shouldRecomputeRowHeights,
showChooseGroupMembers,
startNewConversationFromPhoneNumber,
startNewConversationFromUsername,
lookupConversationWithoutUuid,
showUserNotFoundModal,
setIsFetchingUUID,
showConversation,
theme,
}) => {
const listRef = useRef<null | List>(null);
@ -251,6 +265,23 @@ export const ConversationList: React.FC<PropsType> = ({
/>
);
break;
case RowType.PhoneNumberCheckbox:
result = (
<PhoneNumberCheckboxComponent
phoneNumber={row.phoneNumber}
lookupConversationWithoutUuid={lookupConversationWithoutUuid}
showUserNotFoundModal={showUserNotFoundModal}
setIsFetchingUUID={setIsFetchingUUID}
toggleConversationInChooseMembers={conversationId =>
onClickContactCheckbox(conversationId, undefined)
}
isChecked={row.isChecked}
isFetching={row.isFetching}
i18n={i18n}
theme={theme}
/>
);
break;
case RowType.Conversation: {
const itemProps = pick(row.conversation, [
'acceptedMessageRequest',
@ -332,7 +363,11 @@ export const ConversationList: React.FC<PropsType> = ({
<StartNewConversationComponent
i18n={i18n}
phoneNumber={row.phoneNumber}
onClick={startNewConversationFromPhoneNumber}
isFetching={row.isFetching}
lookupConversationWithoutUuid={lookupConversationWithoutUuid}
showUserNotFoundModal={showUserNotFoundModal}
setIsFetchingUUID={setIsFetchingUUID}
showConversation={showConversation}
/>
);
break;
@ -342,7 +377,10 @@ export const ConversationList: React.FC<PropsType> = ({
i18n={i18n}
username={row.username}
isFetchingUsername={row.isFetchingUsername}
onClick={startNewConversationFromUsername}
lookupConversationWithoutUuid={lookupConversationWithoutUuid}
showUserNotFoundModal={showUserNotFoundModal}
setIsFetchingUUID={setIsFetchingUUID}
showConversation={showConversation}
/>
);
break;
@ -365,10 +403,12 @@ export const ConversationList: React.FC<PropsType> = ({
onClickArchiveButton,
onClickContactCheckbox,
onSelectConversation,
lookupConversationWithoutUuid,
showUserNotFoundModal,
setIsFetchingUUID,
renderMessageSearchResult,
showChooseGroupMembers,
startNewConversationFromPhoneNumber,
startNewConversationFromUsername,
showConversation,
theme,
]
);

1
ts/components/ForwardMessageModal.stories.tsx
View file

@ -60,6 +60,7 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
removeLinkPreview: action('removeLinkPreview'),
skinTone: 0,
theme: React.useContext(StorybookThemeContext),
regionCode: 'US',
});
story.add('Modal', () => {

32
ts/components/ForwardMessageModal.tsx
View file

@ -60,6 +60,7 @@ export type DataPropsType = {
) => unknown;
onTextTooLong: () => void;
theme: ThemeType;
regionCode: string | undefined;
} & Pick<EmojiButtonProps, 'recentEmojis' | 'skinTone'>;
type ActionPropsType = Pick<
@ -91,6 +92,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
removeLinkPreview,
skinTone,
theme,
regionCode,
}) => {
const inputRef = useRef<null | HTMLInputElement>(null);
const inputApiRef = React.useRef<InputApi | undefined>();
@ -99,7 +101,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
>([]);
const [searchTerm, setSearchTerm] = useState('');
const [filteredConversations, setFilteredConversations] = useState(
filterAndSortConversationsByRecent(candidateConversations, '')
filterAndSortConversationsByRecent(candidateConversations, '', regionCode)
);
const [attachmentsToForward, setAttachmentsToForward] = useState<
Array<AttachmentType>
@ -168,14 +170,20 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
setFilteredConversations(
filterAndSortConversationsByRecent(
candidateConversations,
normalizedSearchTerm
normalizedSearchTerm,
regionCode
)
);
}, 200);
return () => {
clearTimeout(timeout);
};
}, [candidateConversations, normalizedSearchTerm, setFilteredConversations]);
}, [
candidateConversations,
normalizedSearchTerm,
setFilteredConversations,
regionCode,
]);
const contactLookup = useMemo(() => {
const map = new Map();
@ -412,6 +420,12 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
toggleSelectedConversation(conversationId);
}
}}
lookupConversationWithoutUuid={
asyncShouldNeverBeCalled
}
showConversation={shouldNeverBeCalled}
showUserNotFoundModal={shouldNeverBeCalled}
setIsFetchingUUID={shouldNeverBeCalled}
onSelectConversation={shouldNeverBeCalled}
renderMessageSearchResult={() => {
shouldNeverBeCalled();
@ -420,10 +434,6 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
rowCount={rowCount}
shouldRecomputeRowHeights={false}
showChooseGroupMembers={shouldNeverBeCalled}
startNewConversationFromPhoneNumber={
shouldNeverBeCalled
}
startNewConversationFromUsername={shouldNeverBeCalled}
theme={theme}
/>
</div>
@ -470,3 +480,11 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
function shouldNeverBeCalled(..._args: ReadonlyArray<unknown>): void {
assert(false, 'This should never be called. Doing nothing');
}
async function asyncShouldNeverBeCalled(
..._args: ReadonlyArray<unknown>
): Promise<undefined> {
shouldNeverBeCalled();
return undefined;
}

40
ts/components/GlobalModalContainer.tsx
View file

@ -4,9 +4,10 @@
import React from 'react';
import type {
ContactModalStateType,
UsernameNotFoundModalStateType,
UserNotFoundModalStateType,
} from '../state/ducks/globalModals';
import type { LocalizerType } from '../types/Util';
import { missingCaseError } from '../util/missingCaseError';
import { ButtonVariant } from './Button';
import { ConfirmationDialog } from './ConfirmationDialog';
@ -23,9 +24,9 @@ type PropsType = {
// SafetyNumberModal
safetyNumberModalContactId?: string;
renderSafetyNumber: () => JSX.Element;
// UsernameNotFoundModal
hideUsernameNotFoundModal: () => unknown;
usernameNotFoundModalState?: UsernameNotFoundModalStateType;
// UserNotFoundModal
hideUserNotFoundModal: () => unknown;
userNotFoundModalState?: UserNotFoundModalStateType;
// WhatsNewModal
isWhatsNewVisible: boolean;
hideWhatsNewModal: () => unknown;
@ -42,9 +43,9 @@ export const GlobalModalContainer = ({
// SafetyNumberModal
safetyNumberModalContactId,
renderSafetyNumber,
// UsernameNotFoundModal
hideUsernameNotFoundModal,
usernameNotFoundModalState,
// UserNotFoundModal
hideUserNotFoundModal,
userNotFoundModalState,
// WhatsNewModal
hideWhatsNewModal,
isWhatsNewVisible,
@ -53,19 +54,30 @@ export const GlobalModalContainer = ({
return renderSafetyNumber();
}
if (usernameNotFoundModalState) {
if (userNotFoundModalState) {
let content: string;
if (userNotFoundModalState.type === 'phoneNumber') {
content = i18n('startConversation--phone-number-not-found', {
phoneNumber: userNotFoundModalState.phoneNumber,
});
} else if (userNotFoundModalState.type === 'username') {
content = i18n('startConversation--username-not-found', {
atUsername: i18n('at-username', {
username: userNotFoundModalState.username,
}),
});
} else {
throw missingCaseError(userNotFoundModalState);
}
return (
<ConfirmationDialog
cancelText={i18n('ok')}
cancelButtonVariant={ButtonVariant.Secondary}
i18n={i18n}
onClose={hideUsernameNotFoundModal}
onClose={hideUserNotFoundModal}
>
{i18n('startConversation--username-not-found', {
atUsername: i18n('at-username', {
username: usernameNotFoundModalState.username,
}),
})}
{content}
</ConfirmationDialog>
);
}

306
ts/components/LeftPane.stories.tsx
View file

@ -18,6 +18,10 @@ import enMessages from '../../_locales/en/messages.json';
import { ThemeType } from '../types/Util';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';
import {
makeFakeLookupConversationWithoutUuid,
useUuidFetchState,
} from '../test-both/helpers/fakeLookupConversationWithoutUuid';
const i18n = setupI18n('en', enMessages);
@ -89,93 +93,112 @@ const defaultModeSpecificProps = {
const emptySearchResultsGroup = { isLoading: false, results: [] };
const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
clearConversationSearch: action('clearConversationSearch'),
clearGroupCreationError: action('clearGroupCreationError'),
clearSearch: action('clearSearch'),
closeMaximumGroupSizeModal: action('closeMaximumGroupSizeModal'),
closeRecommendedGroupSizeModal: action('closeRecommendedGroupSizeModal'),
composeDeleteAvatarFromDisk: action('composeDeleteAvatarFromDisk'),
composeReplaceAvatar: action('composeReplaceAvatar'),
composeSaveAvatarToDisk: action('composeSaveAvatarToDisk'),
createGroup: action('createGroup'),
getPreferredBadge: () => undefined,
i18n,
modeSpecificProps: defaultModeSpecificProps,
preferredWidthFromStorage: 320,
openConversationInternal: action('openConversationInternal'),
regionCode: 'US',
challengeStatus: select(
'challengeStatus',
['idle', 'required', 'pending'],
'idle'
),
crashReportCount: select('challengeReportCount', [0, 1], 0),
setChallengeStatus: action('setChallengeStatus'),
renderExpiredBuildDialog: () => <div />,
renderMainHeader: () => <div />,
renderMessageSearchResult: (id: string) => (
<MessageSearchResult
body="Lorem ipsum wow"
bodyRanges={[]}
conversationId="marc-convo"
from={defaultConversations[0]}
getPreferredBadge={() => undefined}
i18n={i18n}
id={id}
openConversationInternal={action('openConversationInternal')}
sentAt={1587358800000}
snippet="Lorem <<left>>ipsum<<right>> wow"
theme={ThemeType.light}
to={defaultConversations[1]}
/>
),
renderNetworkStatus: () => <div />,
renderRelinkDialog: () => <div />,
renderUpdateDialog: () => <div />,
renderCaptchaDialog: () => (
<CaptchaDialog
i18n={i18n}
isPending={overrideProps.challengeStatus === 'pending'}
onContinue={action('onCaptchaContinue')}
onSkip={action('onCaptchaSkip')}
/>
),
renderCrashReportDialog: () => (
<CrashReportDialog
i18n={i18n}
isPending={false}
uploadCrashReports={action('uploadCrashReports')}
eraseCrashReports={action('eraseCrashReports')}
/>
),
selectedConversationId: undefined,
selectedMessageId: undefined,
savePreferredLeftPaneWidth: action('savePreferredLeftPaneWidth'),
searchInConversation: action('searchInConversation'),
setComposeSearchTerm: action('setComposeSearchTerm'),
setComposeGroupAvatar: action('setComposeGroupAvatar'),
setComposeGroupName: action('setComposeGroupName'),
setComposeGroupExpireTimer: action('setComposeGroupExpireTimer'),
showArchivedConversations: action('showArchivedConversations'),
showInbox: action('showInbox'),
startComposing: action('startComposing'),
showChooseGroupMembers: action('showChooseGroupMembers'),
startNewConversationFromPhoneNumber: action(
'startNewConversationFromPhoneNumber'
),
startNewConversationFromUsername: action('startNewConversationFromUsername'),
startSearch: action('startSearch'),
startSettingGroupMetadata: action('startSettingGroupMetadata'),
theme: React.useContext(StorybookThemeContext),
toggleComposeEditingAvatar: action('toggleComposeEditingAvatar'),
toggleConversationInChooseMembers: action(
'toggleConversationInChooseMembers'
),
updateSearchTerm: action('updateSearchTerm'),
const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => {
let modeSpecificProps =
overrideProps.modeSpecificProps ?? defaultModeSpecificProps;
...overrideProps,
});
const [uuidFetchState, setIsFetchingUUID] = useUuidFetchState(
'uuidFetchState' in modeSpecificProps
? modeSpecificProps.uuidFetchState
: {}
);
if ('uuidFetchState' in modeSpecificProps) {
modeSpecificProps = {
...modeSpecificProps,
uuidFetchState,
};
}
return {
clearConversationSearch: action('clearConversationSearch'),
clearGroupCreationError: action('clearGroupCreationError'),
clearSearch: action('clearSearch'),
closeMaximumGroupSizeModal: action('closeMaximumGroupSizeModal'),
closeRecommendedGroupSizeModal: action('closeRecommendedGroupSizeModal'),
composeDeleteAvatarFromDisk: action('composeDeleteAvatarFromDisk'),
composeReplaceAvatar: action('composeReplaceAvatar'),
composeSaveAvatarToDisk: action('composeSaveAvatarToDisk'),
createGroup: action('createGroup'),
getPreferredBadge: () => undefined,
i18n,
preferredWidthFromStorage: 320,
openConversationInternal: action('openConversationInternal'),
regionCode: 'US',
challengeStatus: select(
'challengeStatus',
['idle', 'required', 'pending'],
'idle'
),
crashReportCount: select('challengeReportCount', [0, 1], 0),
setChallengeStatus: action('setChallengeStatus'),
lookupConversationWithoutUuid: makeFakeLookupConversationWithoutUuid(),
showUserNotFoundModal: action('showUserNotFoundModal'),
setIsFetchingUUID,
showConversation: action('showConversation'),
renderExpiredBuildDialog: () => <div />,
renderMainHeader: () => <div />,
renderMessageSearchResult: (id: string) => (
<MessageSearchResult
body="Lorem ipsum wow"
bodyRanges={[]}
conversationId="marc-convo"
from={defaultConversations[0]}
getPreferredBadge={() => undefined}
i18n={i18n}
id={id}
openConversationInternal={action('openConversationInternal')}
sentAt={1587358800000}
snippet="Lorem <<left>>ipsum<<right>> wow"
theme={ThemeType.light}
to={defaultConversations[1]}
/>
),
renderNetworkStatus: () => <div />,
renderRelinkDialog: () => <div />,
renderUpdateDialog: () => <div />,
renderCaptchaDialog: () => (
<CaptchaDialog
i18n={i18n}
isPending={overrideProps.challengeStatus === 'pending'}
onContinue={action('onCaptchaContinue')}
onSkip={action('onCaptchaSkip')}
/>
),
renderCrashReportDialog: () => (
<CrashReportDialog
i18n={i18n}
isPending={false}
uploadCrashReports={action('uploadCrashReports')}
eraseCrashReports={action('eraseCrashReports')}
/>
),
selectedConversationId: undefined,
selectedMessageId: undefined,
savePreferredLeftPaneWidth: action('savePreferredLeftPaneWidth'),
searchInConversation: action('searchInConversation'),
setComposeSearchTerm: action('setComposeSearchTerm'),
setComposeGroupAvatar: action('setComposeGroupAvatar'),
setComposeGroupName: action('setComposeGroupName'),
setComposeGroupExpireTimer: action('setComposeGroupExpireTimer'),
showArchivedConversations: action('showArchivedConversations'),
showInbox: action('showInbox'),
startComposing: action('startComposing'),
showChooseGroupMembers: action('showChooseGroupMembers'),
startSearch: action('startSearch'),
startSettingGroupMetadata: action('startSettingGroupMetadata'),
theme: React.useContext(StorybookThemeContext),
toggleComposeEditingAvatar: action('toggleComposeEditingAvatar'),
toggleConversationInChooseMembers: action(
'toggleConversationInChooseMembers'
),
updateSearchTerm: action('updateSearchTerm'),
...overrideProps,
modeSpecificProps,
};
};
// Inbox stories
@ -465,7 +488,7 @@ story.add('Compose: no results', () => (
composeContacts: [],
composeGroups: [],
isUsernamesEnabled: true,
isFetchingUsername: false,
uuidFetchState: {},
regionCode: 'US',
searchTerm: '',
},
@ -481,7 +504,7 @@ story.add('Compose: some contacts, no search term', () => (
composeContacts: defaultConversations,
composeGroups: [],
isUsernamesEnabled: true,
isFetchingUsername: false,
uuidFetchState: {},
regionCode: 'US',
searchTerm: '',
},
@ -497,7 +520,7 @@ story.add('Compose: some contacts, with a search term', () => (
composeContacts: defaultConversations,
composeGroups: [],
isUsernamesEnabled: true,
isFetchingUsername: false,
uuidFetchState: {},
regionCode: 'US',
searchTerm: 'ar',
},
@ -513,7 +536,7 @@ story.add('Compose: some groups, no search term', () => (
composeContacts: [],
composeGroups: defaultGroups,
isUsernamesEnabled: true,
isFetchingUsername: false,
uuidFetchState: {},
regionCode: 'US',
searchTerm: '',
},
@ -529,7 +552,7 @@ story.add('Compose: some groups, with search term', () => (
composeContacts: [],
composeGroups: defaultGroups,
isUsernamesEnabled: true,
isFetchingUsername: false,
uuidFetchState: {},
regionCode: 'US',
searchTerm: 'ar',
},
@ -545,7 +568,7 @@ story.add('Compose: search is valid username', () => (
composeContacts: [],
composeGroups: [],
isUsernamesEnabled: true,
isFetchingUsername: false,
uuidFetchState: {},
regionCode: 'US',
searchTerm: 'someone',
},
@ -561,7 +584,9 @@ story.add('Compose: search is valid username, fetching username', () => (
composeContacts: [],
composeGroups: [],
isUsernamesEnabled: true,
isFetchingUsername: true,
uuidFetchState: {
'username:someone': true,
},
regionCode: 'US',
searchTerm: 'someone',
},
@ -577,7 +602,7 @@ story.add('Compose: search is valid username, but flag is not enabled', () => (
composeContacts: [],
composeGroups: [],
isUsernamesEnabled: false,
isFetchingUsername: false,
uuidFetchState: {},
regionCode: 'US',
searchTerm: 'someone',
},
@ -585,6 +610,59 @@ story.add('Compose: search is valid username, but flag is not enabled', () => (
/>
));
story.add('Compose: search is partial phone number', () => (
<LeftPane
{...useProps({
modeSpecificProps: {
mode: LeftPaneMode.Compose,
composeContacts: [],
composeGroups: [],
isUsernamesEnabled: false,
uuidFetchState: {},
regionCode: 'US',
searchTerm: '+1(212)555',
},
})}
/>
));
story.add('Compose: search is valid phone number', () => (
<LeftPane
{...useProps({
modeSpecificProps: {
mode: LeftPaneMode.Compose,
composeContacts: [],
composeGroups: [],
isUsernamesEnabled: true,
uuidFetchState: {},
regionCode: 'US',
searchTerm: '2125555454',
},
})}
/>
));
story.add(
'Compose: search is valid phone number, fetching phone number',
() => (
<LeftPane
{...useProps({
modeSpecificProps: {
mode: LeftPaneMode.Compose,
composeContacts: [],
composeGroups: [],
isUsernamesEnabled: true,
uuidFetchState: {
'e164:+12125555454': true,
},
regionCode: 'US',
searchTerm: '(212)5555454',
},
})}
/>
)
);
story.add('Compose: all kinds of results, no search term', () => (
<LeftPane
{...useProps({
@ -593,7 +671,7 @@ story.add('Compose: all kinds of results, no search term', () => (
composeContacts: defaultConversations,
composeGroups: defaultGroups,
isUsernamesEnabled: true,
isFetchingUsername: false,
uuidFetchState: {},
regionCode: 'US',
searchTerm: '',
},
@ -609,7 +687,7 @@ story.add('Compose: all kinds of results, with a search term', () => (
composeContacts: defaultConversations,
composeGroups: defaultGroups,
isUsernamesEnabled: true,
isFetchingUsername: false,
uuidFetchState: {},
regionCode: 'US',
searchTerm: 'someone',
},
@ -672,6 +750,42 @@ story.add('Crash report dialog', () => (
/>
));
// Choose Group Members
story.add('Choose Group Members: Partial phone number', () => (
<LeftPane
{...useProps({
modeSpecificProps: {
mode: LeftPaneMode.ChooseGroupMembers,
uuidFetchState: {},
candidateContacts: [],
isShowingRecommendedGroupSizeModal: false,
isShowingMaximumGroupSizeModal: false,
searchTerm: '+1(212) 555',
regionCode: 'US',
selectedContacts: [],
},
})}
/>
));
story.add('Choose Group Members: Valid phone number', () => (
<LeftPane
{...useProps({
modeSpecificProps: {
mode: LeftPaneMode.ChooseGroupMembers,
uuidFetchState: {},
candidateContacts: [],
isShowingRecommendedGroupSizeModal: false,
isShowingMaximumGroupSizeModal: false,
searchTerm: '+1(212) 555 5454',
regionCode: 'US',
selectedContacts: [],
},
})}
/>
));
// Set group metadata
story.add('Group Metadata: No Timer', () => (

25
ts/components/LeftPane.tsx
View file

@ -37,6 +37,7 @@ import {
MAX_WIDTH,
getWidthFromPreferredWidth,
} from '../util/leftPaneWidth';
import type { LookupConversationWithoutUuidActionsType } from '../util/lookupConversationWithoutUuid';
import { ConversationList } from './ConversationList';
import { ContactCheckboxDisabledReason } from './conversationList/ContactCheckbox';
@ -97,8 +98,6 @@ export type PropsType = {
closeMaximumGroupSizeModal: () => void;
closeRecommendedGroupSizeModal: () => void;
createGroup: () => void;
startNewConversationFromPhoneNumber: (e164: string) => void;
startNewConversationFromUsername: (username: string) => void;
openConversationInternal: (_: {
conversationId: string;
messageId?: string;
@ -140,7 +139,9 @@ export type PropsType = {
) => JSX.Element;
renderCaptchaDialog: (props: { onSkip(): void }) => JSX.Element;
renderCrashReportDialog: () => JSX.Element;
};
showConversation: (conversationId: string) => void;
} & LookupConversationWithoutUuidActionsType;
export const LeftPane: React.FC<PropsType> = ({
challengeStatus,
@ -181,12 +182,14 @@ export const LeftPane: React.FC<PropsType> = ({
showInbox,
startComposing,
startSearch,
startNewConversationFromPhoneNumber,
startNewConversationFromUsername,
showUserNotFoundModal,
setIsFetchingUUID,
lookupConversationWithoutUuid,
toggleConversationInChooseMembers,
showConversation,
startSettingGroupMetadata,
theme,
toggleComposeEditingAvatar,
toggleConversationInChooseMembers,
updateSearchTerm,
}) => {
const [preferredWidth, setPreferredWidth] = useState(
@ -599,6 +602,10 @@ export const LeftPane: React.FC<PropsType> = ({
throw missingCaseError(disabledReason);
}
}}
showUserNotFoundModal={showUserNotFoundModal}
setIsFetchingUUID={setIsFetchingUUID}
lookupConversationWithoutUuid={lookupConversationWithoutUuid}
showConversation={showConversation}
onSelectConversation={onSelectConversation}
renderMessageSearchResult={renderMessageSearchResult}
rowCount={helper.getRowCount()}
@ -607,12 +614,6 @@ export const LeftPane: React.FC<PropsType> = ({
scrollable={isScrollable}
shouldRecomputeRowHeights={shouldRecomputeRowHeights}
showChooseGroupMembers={showChooseGroupMembers}
startNewConversationFromPhoneNumber={
startNewConversationFromPhoneNumber
}
startNewConversationFromUsername={
startNewConversationFromUsername
}
theme={theme}
/>
</div>

23
ts/components/StoriesPane.tsx
View file

@ -1,25 +1,27 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { FuseOptions } from 'fuse.js';
import Fuse from 'fuse.js';
import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
import { isNotNil } from '../util/isNotNil';
import type { ConversationStoryType, StoryViewType } from './StoryListItem';
import type { LocalizerType } from '../types/Util';
import { SearchInput } from './SearchInput';
import { StoryListItem } from './StoryListItem';
const FUSE_OPTIONS: FuseOptions<ConversationStoryType> = {
const FUSE_OPTIONS: Fuse.IFuseOptions<ConversationStoryType> = {
getFn: (obj, path) => {
if (path === 'searchNames') {
return obj.stories.flatMap((story: StoryViewType) => [
story.sender.title,
story.sender.name,
]);
return obj.stories
.flatMap((story: StoryViewType) => [
story.sender.title,
story.sender.name,
])
.filter(isNotNil);
}
return obj.group?.title;
return obj.group?.title ?? '';
},
keys: [
{
@ -32,16 +34,15 @@ const FUSE_OPTIONS: FuseOptions<ConversationStoryType> = {
},
],
threshold: 0.1,
tokenize: true,
};
function search(
stories: ReadonlyArray<ConversationStoryType>,
searchTerm: string
): Array<ConversationStoryType> {
return new Fuse<ConversationStoryType>(stories, FUSE_OPTIONS).search(
searchTerm
);
return new Fuse<ConversationStoryType>(stories, FUSE_OPTIONS)
.search(searchTerm)
.map(result => result.item);
}
function getNewestStory(story: ConversationStoryType): StoryViewType {

22
ts/components/ToastFailedToFetchPhoneNumber.tsx Normal file
View file

@ -0,0 +1,22 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import type { LocalizerType } from '../types/Util';
import { Toast } from './Toast';
type PropsType = {
i18n: LocalizerType;
onClose: () => unknown;
};
export const ToastFailedToFetchPhoneNumber = ({
i18n,
onClose,
}: PropsType): JSX.Element => {
return (
<Toast onClose={onClose} style={{ maxWidth: '280px' }}>
{i18n('Toast--failed-to-fetch-phone-number')}
</Toast>
);
};

64
ts/components/conversation/conversation-details/AddGroupMembersModal.stories.tsx
View file

@ -9,12 +9,18 @@ import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { sleep } from '../../../util/sleep';
import { makeLookup } from '../../../util/makeLookup';
import { deconstructLookup } from '../../../util/deconstructLookup';
import { setupI18n } from '../../../util/setupI18n';
import type { ConversationType } from '../../../state/ducks/conversations';
import enMessages from '../../../../_locales/en/messages.json';
import { getDefaultConversation } from '../../../test-both/helpers/getDefaultConversation';
import { AddGroupMembersModal } from './AddGroupMembersModal';
import { ChooseGroupMembersModal } from './AddGroupMembersModal/ChooseGroupMembersModal';
import { ConfirmAdditionsModal } from './AddGroupMembersModal/ConfirmAdditionsModal';
import { RequestState } from './util';
import { ThemeType } from '../../../types/Util';
import { makeFakeLookupConversationWithoutUuid } from '../../../test-both/helpers/fakeLookupConversationWithoutUuid';
const i18n = setupI18n('en', enMessages);
@ -24,14 +30,23 @@ const story = storiesOf(
);
const allCandidateContacts = times(50, () => getDefaultConversation());
let allCandidateContactsLookup = makeLookup(allCandidateContacts, 'id');
const lookupConversationWithoutUuid = makeFakeLookupConversationWithoutUuid(
convo => {
allCandidateContacts.push(convo);
allCandidateContactsLookup = makeLookup(allCandidateContacts, 'id');
}
);
type PropsType = ComponentProps<typeof AddGroupMembersModal>;
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
candidateContacts: allCandidateContacts,
const createProps = (
overrideProps: Partial<PropsType> = {},
candidateContacts: Array<ConversationType> = []
): PropsType => ({
clearRequestError: action('clearRequestError'),
conversationIdsAlreadyInGroup: new Set(),
getPreferredBadge: () => undefined,
groupTitle: 'Tahoe Trip',
i18n,
onClose: action('onClose'),
@ -39,7 +54,38 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
action('onMakeRequest')(conversationIds);
},
requestState: RequestState.Inactive,
theme: ThemeType.light,
renderChooseGroupMembersModal: props => {
const { selectedConversationIds } = props;
return (
<ChooseGroupMembersModal
{...props}
candidateContacts={candidateContacts}
selectedContacts={deconstructLookup(
allCandidateContactsLookup,
selectedConversationIds
)}
regionCode="US"
getPreferredBadge={() => undefined}
theme={ThemeType.light}
i18n={i18n}
lookupConversationWithoutUuid={lookupConversationWithoutUuid}
showUserNotFoundModal={action('showUserNotFoundModal')}
/>
);
},
renderConfirmAdditionsModal: props => {
const { selectedConversationIds } = props;
return (
<ConfirmAdditionsModal
{...props}
i18n={i18n}
selectedContacts={deconstructLookup(
allCandidateContactsLookup,
selectedConversationIds
)}
/>
);
},
...overrideProps,
});
@ -47,18 +93,12 @@ story.add('Default', () => <AddGroupMembersModal {...createProps()} />);
story.add('Only 3 contacts', () => (
<AddGroupMembersModal
{...createProps({
candidateContacts: allCandidateContacts.slice(0, 3),
})}
{...createProps({}, allCandidateContacts.slice(0, 3))}
/>
));
story.add('No candidate contacts', () => (
<AddGroupMembersModal
{...createProps({
candidateContacts: [],
})}
/>
<AddGroupMembersModal {...createProps({}, [])} />
));
story.add('Everyone already added', () => (

86
ts/components/conversation/conversation-details/AddGroupMembersModal.tsx
View file

@ -2,16 +2,16 @@
// SPDX-License-Identifier: AGPL-3.0-only
import type { FunctionComponent } from 'react';
import React, { useMemo, useReducer } from 'react';
import React, { useReducer } from 'react';
import { without } from 'lodash';
import type { LocalizerType, ThemeType } from '../../../types/Util';
import type { LocalizerType } from '../../../types/Util';
import {
AddGroupMemberErrorDialog,
AddGroupMemberErrorDialogMode,
} from '../../AddGroupMemberErrorDialog';
import type { ConversationType } from '../../../state/ducks/conversations';
import type { PreferredBadgeSelectorType } from '../../../state/selectors/badges';
import type { SmartChooseGroupMembersModalPropsType } from '../../../state/smart/ChooseGroupMembersModal';
import type { SmartConfirmAdditionsModalPropsType } from '../../../state/smart/ConfirmAdditionsModal';
import {
getGroupSizeRecommendedLimit,
getGroupSizeHardLimit,
@ -20,24 +20,24 @@ import {
toggleSelectedContactForGroupAddition,
OneTimeModalState,
} from '../../../groups/toggleSelectedContactForGroupAddition';
import { makeLookup } from '../../../util/makeLookup';
import { deconstructLookup } from '../../../util/deconstructLookup';
import { missingCaseError } from '../../../util/missingCaseError';
import type { RequestState } from './util';
import { ChooseGroupMembersModal } from './AddGroupMembersModal/ChooseGroupMembersModal';
import { ConfirmAdditionsModal } from './AddGroupMembersModal/ConfirmAdditionsModal';
type PropsType = {
candidateContacts: ReadonlyArray<ConversationType>;
clearRequestError: () => void;
conversationIdsAlreadyInGroup: Set<string>;
getPreferredBadge: PreferredBadgeSelectorType;
groupTitle: string;
i18n: LocalizerType;
makeRequest: (conversationIds: ReadonlyArray<string>) => Promise<void>;
onClose: () => void;
requestState: RequestState;
theme: ThemeType;
renderChooseGroupMembersModal: (
props: SmartChooseGroupMembersModalPropsType
) => JSX.Element;
renderConfirmAdditionsModal: (
props: SmartConfirmAdditionsModalPropsType
) => JSX.Element;
};
enum Stage {
@ -135,16 +135,15 @@ function reducer(
}
export const AddGroupMembersModal: FunctionComponent<PropsType> = ({
candidateContacts,
clearRequestError,
conversationIdsAlreadyInGroup,
getPreferredBadge,
groupTitle,
i18n,
onClose,
makeRequest,
requestState,
theme,
renderChooseGroupMembersModal,
renderConfirmAdditionsModal,
}) => {
const maxGroupSize = getMaximumNumberOfContacts();
const maxRecommendedGroupSize = getRecommendedMaximumNumberOfContacts();
@ -175,16 +174,6 @@ export const AddGroupMembersModal: FunctionComponent<PropsType> = ({
stage: Stage.ChoosingContacts,
});
const contactLookup = useMemo(
() => makeLookup(candidateContacts, 'id'),
[candidateContacts]
);
const selectedContacts = deconstructLookup(
contactLookup,
selectedConversationIds
);
if (maximumGroupSizeModalState === OneTimeModalState.Showing) {
return (
<AddGroupMemberErrorDialog
@ -239,23 +228,17 @@ export const AddGroupMembersModal: FunctionComponent<PropsType> = ({
});
};
return (
<ChooseGroupMembersModal
candidateContacts={candidateContacts}
confirmAdds={confirmAdds}
conversationIdsAlreadyInGroup={conversationIdsAlreadyInGroup}
getPreferredBadge={getPreferredBadge}
i18n={i18n}
maxGroupSize={maxGroupSize}
onClose={onClose}
removeSelectedContact={removeSelectedContact}
searchTerm={searchTerm}
selectedContacts={selectedContacts}
setSearchTerm={setSearchTerm}
theme={theme}
toggleSelectedContact={toggleSelectedContact}
/>
);
return renderChooseGroupMembersModal({
confirmAdds,
selectedConversationIds,
conversationIdsAlreadyInGroup,
maxGroupSize,
onClose,
removeSelectedContact,
searchTerm,
setSearchTerm,
toggleSelectedContact,
});
}
case Stage.ConfirmingAdds: {
const onCloseConfirmationDialog = () => {
@ -263,18 +246,15 @@ export const AddGroupMembersModal: FunctionComponent<PropsType> = ({
clearRequestError();
};
return (
<ConfirmAdditionsModal
groupTitle={groupTitle}
i18n={i18n}
makeRequest={() => {
makeRequest(selectedConversationIds);
}}
onClose={onCloseConfirmationDialog}
requestState={requestState}
selectedContacts={selectedContacts}
/>
);
return renderConfirmAdditionsModal({
groupTitle,
makeRequest: () => {
makeRequest(selectedConversationIds);
},
onClose: onCloseConfirmationDialog,
requestState,
selectedConversationIds,
});
}
default:
throw missingCaseError(stage);

172
ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx
View file

@ -2,7 +2,14 @@
// SPDX-License-Identifier: AGPL-3.0-only
import type { FunctionComponent } from 'react';
import React, { useEffect, useMemo, useState, useRef } from 'react';
import React, {
useEffect,
useMemo,
useState,
useRef,
useCallback,
} from 'react';
import { omit } from 'lodash';
import type { MeasuredComponentProps } from 'react-measure';
import Measure from 'react-measure';
@ -11,9 +18,16 @@ import { assert } from '../../../../util/assert';
import { refMerger } from '../../../../util/refMerger';
import { useRestoreFocus } from '../../../../hooks/useRestoreFocus';
import { missingCaseError } from '../../../../util/missingCaseError';
import type { LookupConversationWithoutUuidActionsType } from '../../../../util/lookupConversationWithoutUuid';
import { parseAndFormatPhoneNumber } from '../../../../util/libphonenumberInstance';
import { filterAndSortConversationsByTitle } from '../../../../util/filterAndSortConversations';
import type { ConversationType } from '../../../../state/ducks/conversations';
import type { PreferredBadgeSelectorType } from '../../../../state/selectors/badges';
import type {
UUIDFetchStateKeyType,
UUIDFetchStateType,
} from '../../../../util/uuidFetchState';
import { isFetchingByE164 } from '../../../../util/uuidFetchState';
import { ModalHost } from '../../../ModalHost';
import { ContactPills } from '../../../ContactPills';
import { ContactPill } from '../../../ContactPill';
@ -23,24 +37,37 @@ import { ContactCheckboxDisabledReason } from '../../../conversationList/Contact
import { Button, ButtonVariant } from '../../../Button';
import { SearchInput } from '../../../SearchInput';
type PropsType = {
export type StatePropsType = {
regionCode: string | undefined;
candidateContacts: ReadonlyArray<ConversationType>;
confirmAdds: () => void;
conversationIdsAlreadyInGroup: Set<string>;
getPreferredBadge: PreferredBadgeSelectorType;
i18n: LocalizerType;
theme: ThemeType;
maxGroupSize: number;
onClose: () => void;
removeSelectedContact: (_: string) => void;
searchTerm: string;
selectedContacts: ReadonlyArray<ConversationType>;
confirmAdds: () => void;
onClose: () => void;
removeSelectedContact: (_: string) => void;
setSearchTerm: (_: string) => void;
theme: ThemeType;
toggleSelectedContact: (conversationId: string) => void;
};
} & Pick<
LookupConversationWithoutUuidActionsType,
'lookupConversationWithoutUuid'
>;
type ActionPropsType = Omit<
LookupConversationWithoutUuidActionsType,
'setIsFetchingUUID' | 'lookupConversationWithoutUuid'
>;
type PropsType = StatePropsType & ActionPropsType;
// TODO: This should use <Modal>. See DESKTOP-1038.
export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
regionCode,
candidateContacts,
confirmAdds,
conversationIdsAlreadyInGroup,
@ -54,9 +81,24 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
setSearchTerm,
theme,
toggleSelectedContact,
lookupConversationWithoutUuid,
showUserNotFoundModal,
}) => {
const [focusRef] = useRestoreFocus();
const phoneNumber = parseAndFormatPhoneNumber(searchTerm, regionCode);
let isPhoneNumberChecked = false;
if (phoneNumber) {
isPhoneNumberChecked =
phoneNumber.isValid &&
selectedContacts.some(contact => contact.e164 === phoneNumber.e164);
}
const isPhoneNumberVisible =
phoneNumber &&
candidateContacts.every(contact => contact.e164 !== phoneNumber.e164);
const inputRef = useRef<null | HTMLInputElement>(null);
const numberOfContactsAlreadyInGroup = conversationIdsAlreadyInGroup.size;
@ -72,7 +114,7 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
const canContinue = Boolean(selectedContacts.length);
const [filteredContacts, setFilteredContacts] = useState(
filterAndSortConversationsByTitle(candidateContacts, '')
filterAndSortConversationsByTitle(candidateContacts, '', regionCode)
);
const normalizedSearchTerm = searchTerm.trim();
useEffect(() => {
@ -80,38 +122,106 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
setFilteredContacts(
filterAndSortConversationsByTitle(
candidateContacts,
normalizedSearchTerm
normalizedSearchTerm,
regionCode
)
);
}, 200);
return () => {
clearTimeout(timeout);
};
}, [candidateContacts, normalizedSearchTerm, setFilteredContacts]);
}, [
candidateContacts,
normalizedSearchTerm,
setFilteredContacts,
regionCode,
]);
const rowCount = filteredContacts.length;
const [uuidFetchState, setUuidFetchState] = useState<UUIDFetchStateType>({});
const setIsFetchingUUID = useCallback(
(identifier: UUIDFetchStateKeyType, isFetching: boolean) => {
setUuidFetchState(prevState => {
return isFetching
? {
...prevState,
[identifier]: isFetching,
}
: omit(prevState, identifier);
});
},
[setUuidFetchState]
);
let rowCount = 0;
if (filteredContacts.length) {
rowCount += filteredContacts.length;
}
if (isPhoneNumberVisible) {
// "Contacts" header
if (filteredContacts.length) {
rowCount += 1;
}
// "Find by phone number" + phone number
rowCount += 2;
}
const getRow = (index: number): undefined | Row => {
const contact = filteredContacts[index];
if (!contact) {
return undefined;
let virtualIndex = index;
if (isPhoneNumberVisible && filteredContacts.length) {
if (virtualIndex === 0) {
return {
type: RowType.Header,
i18nKey: 'contactsHeader',
};
}
virtualIndex -= 1;
}
const isSelected = selectedConversationIdsSet.has(contact.id);
const isAlreadyInGroup = conversationIdsAlreadyInGroup.has(contact.id);
if (virtualIndex < filteredContacts.length) {
const contact = filteredContacts[virtualIndex];
let disabledReason: undefined | ContactCheckboxDisabledReason;
if (isAlreadyInGroup) {
disabledReason = ContactCheckboxDisabledReason.AlreadyAdded;
} else if (hasSelectedMaximumNumberOfContacts && !isSelected) {
disabledReason = ContactCheckboxDisabledReason.MaximumContactsSelected;
const isSelected = selectedConversationIdsSet.has(contact.id);
const isAlreadyInGroup = conversationIdsAlreadyInGroup.has(contact.id);
let disabledReason: undefined | ContactCheckboxDisabledReason;
if (isAlreadyInGroup) {
disabledReason = ContactCheckboxDisabledReason.AlreadyAdded;
} else if (hasSelectedMaximumNumberOfContacts && !isSelected) {
disabledReason = ContactCheckboxDisabledReason.MaximumContactsSelected;
}
return {
type: RowType.ContactCheckbox,
contact,
isChecked: isSelected || isAlreadyInGroup,
disabledReason,
};
}
return {
type: RowType.ContactCheckbox,
contact,
isChecked: isSelected || isAlreadyInGroup,
disabledReason,
};
virtualIndex -= filteredContacts.length;
if (isPhoneNumberVisible) {
if (virtualIndex === 0) {
return {
type: RowType.Header,
i18nKey: 'findByPhoneNumberHeader',
};
}
if (virtualIndex === 1) {
return {
type: RowType.PhoneNumberCheckbox,
isChecked: isPhoneNumberChecked,
isFetching: isFetchingByE164(uuidFetchState, phoneNumber.e164),
phoneNumber,
};
}
virtualIndex -= 2;
}
return undefined;
};
return (
@ -207,6 +317,12 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
throw missingCaseError(disabledReason);
}
}}
lookupConversationWithoutUuid={
lookupConversationWithoutUuid
}
showUserNotFoundModal={showUserNotFoundModal}
setIsFetchingUUID={setIsFetchingUUID}
showConversation={shouldNeverBeCalled}
onSelectConversation={shouldNeverBeCalled}
renderMessageSearchResult={() => {
shouldNeverBeCalled();
@ -215,8 +331,6 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
rowCount={rowCount}
shouldRecomputeRowHeights={false}
showChooseGroupMembers={shouldNeverBeCalled}
startNewConversationFromPhoneNumber={shouldNeverBeCalled}
startNewConversationFromUsername={shouldNeverBeCalled}
theme={theme}
/>
</div>

4
ts/components/conversation/conversation-details/AddGroupMembersModal/ConfirmAdditionsModal.tsx
View file

@ -15,7 +15,7 @@ import { Intl } from '../../../Intl';
import { Emojify } from '../../Emojify';
import { ContactName } from '../../ContactName';
type PropsType = {
export type StatePropsType = {
groupTitle: string;
i18n: LocalizerType;
makeRequest: () => void;
@ -24,6 +24,8 @@ type PropsType = {
selectedContacts: ReadonlyArray<ConversationType>;
};
type PropsType = StatePropsType;
export const ConfirmAdditionsModal: FunctionComponent<PropsType> = ({
groupTitle,
i18n,

26
ts/components/conversation/conversation-details/ConversationDetails.stories.tsx
View file

@ -12,8 +12,11 @@ import { CapabilityError } from '../../../types/errors';
import enMessages from '../../../../_locales/en/messages.json';
import type { Props } from './ConversationDetails';
import { ConversationDetails } from './ConversationDetails';
import { ChooseGroupMembersModal } from './AddGroupMembersModal/ChooseGroupMembersModal';
import { ConfirmAdditionsModal } from './AddGroupMembersModal/ConfirmAdditionsModal';
import type { ConversationType } from '../../../state/ducks/conversations';
import { getDefaultConversation } from '../../../test-both/helpers/getDefaultConversation';
import { makeFakeLookupConversationWithoutUuid } from '../../../test-both/helpers/fakeLookupConversationWithoutUuid';
import { ThemeType } from '../../../types/Util';
const i18n = setupI18n('en', enMessages);
@ -33,13 +36,14 @@ const conversation: ConversationType = getDefaultConversation({
conversationColor: 'ultramarine' as const,
});
const allCandidateContacts = times(10, () => getDefaultConversation());
const createProps = (hasGroupLink = false, expireTimer?: number): Props => ({
addMembers: async () => {
action('addMembers');
},
areWeASubscriber: false,
canEditGroupInfo: false,
candidateContactsToAdd: times(10, () => getDefaultConversation()),
conversation: expireTimer
? {
...conversation,
@ -97,6 +101,26 @@ const createProps = (hasGroupLink = false, expireTimer?: number): Props => ({
),
searchInConversation: action('searchInConversation'),
theme: ThemeType.light,
renderChooseGroupMembersModal: props => {
return (
<ChooseGroupMembersModal
{...props}
candidateContacts={allCandidateContacts}
selectedContacts={[]}
regionCode="US"
getPreferredBadge={() => undefined}
theme={ThemeType.light}
i18n={i18n}
lookupConversationWithoutUuid={makeFakeLookupConversationWithoutUuid()}
showUserNotFoundModal={action('showUserNotFoundModal')}
/>
);
},
renderConfirmAdditionsModal: props => {
return (
<ConfirmAdditionsModal {...props} selectedContacts={[]} i18n={i18n} />
);
},
});
story.add('Basic', () => {

17
ts/components/conversation/conversation-details/ConversationDetails.tsx
View file

@ -8,6 +8,8 @@ import { Button, ButtonIconType, ButtonVariant } from '../../Button';
import { Tooltip } from '../../Tooltip';
import type { ConversationType } from '../../../state/ducks/conversations';
import type { PreferredBadgeSelectorType } from '../../../state/selectors/badges';
import type { SmartChooseGroupMembersModalPropsType } from '../../../state/smart/ChooseGroupMembersModal';
import type { SmartConfirmAdditionsModalPropsType } from '../../../state/smart/ConfirmAdditionsModal';
import { assert } from '../../../util/assert';
import { getMutedUntilText } from '../../../util/getMutedUntilText';
@ -59,7 +61,6 @@ export type StateProps = {
areWeASubscriber: boolean;
badges?: ReadonlyArray<BadgeType>;
canEditGroupInfo: boolean;
candidateContactsToAdd: Array<ConversationType>;
conversation?: ConversationType;
hasGroupLink: boolean;
getPreferredBadge: PreferredBadgeSelectorType;
@ -97,6 +98,12 @@ export type StateProps = {
setMuteExpiration: (muteExpiresAt: undefined | number) => unknown;
onOutgoingAudioCallInConversation: () => unknown;
onOutgoingVideoCallInConversation: () => unknown;
renderChooseGroupMembersModal: (
props: SmartChooseGroupMembersModalPropsType
) => JSX.Element;
renderConfirmAdditionsModal: (
props: SmartConfirmAdditionsModalPropsType
) => JSX.Element;
};
type ActionProps = {
@ -115,7 +122,6 @@ export const ConversationDetails: React.ComponentType<Props> = ({
areWeASubscriber,
badges,
canEditGroupInfo,
candidateContactsToAdd,
conversation,
deleteAvatarFromDisk,
hasGroupLink,
@ -133,6 +139,8 @@ export const ConversationDetails: React.ComponentType<Props> = ({
onUnblock,
pendingApprovalMemberships,
pendingMemberships,
renderChooseGroupMembersModal,
renderConfirmAdditionsModal,
replaceAvatar,
saveAvatarToDisk,
searchInConversation,
@ -228,7 +236,8 @@ export const ConversationDetails: React.ComponentType<Props> = ({
case ModalState.AddingGroupMembers:
modalNode = (
<AddGroupMembersModal
candidateContacts={candidateContactsToAdd}
renderChooseGroupMembersModal={renderChooseGroupMembersModal}
renderConfirmAdditionsModal={renderConfirmAdditionsModal}
clearRequestError={() => {
setAddGroupMembersRequestState(oldRequestState => {
assert(
@ -241,7 +250,6 @@ export const ConversationDetails: React.ComponentType<Props> = ({
conversationIdsAlreadyInGroup={
new Set(memberships.map(membership => membership.member.id))
}
getPreferredBadge={getPreferredBadge}
groupTitle={conversation.title}
i18n={i18n}
makeRequest={async conversationIds => {
@ -265,7 +273,6 @@ export const ConversationDetails: React.ComponentType<Props> = ({
setEditGroupAttributesRequestState(RequestState.Inactive);
}}
requestState={addGroupMembersRequestState}
theme={theme}
/>
);
break;

8
ts/components/conversationList/BaseConversationListItem.tsx
View file

@ -29,6 +29,7 @@ export const DATE_CLASS_NAME = `${HEADER_CLASS_NAME}__date`;
const MESSAGE_CLASS_NAME = `${CONTENT_CLASS_NAME}__message`;
export const MESSAGE_TEXT_CLASS_NAME = `${MESSAGE_CLASS_NAME}__text`;
const CHECKBOX_CLASS_NAME = `${BASE_CLASS_NAME}__checkbox`;
const SPINNER_CLASS_NAME = `${BASE_CLASS_NAME}__spinner`;
type PropsType = {
checked?: boolean;
@ -113,7 +114,12 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
let actionNode: ReactNode;
if (shouldShowSpinner) {
actionNode = (
<Spinner size="20px" svgSize="small" direction="on-progress-dialog" />
<Spinner
size="20px"
svgSize="small"
moduleClassName={SPINNER_CLASS_NAME}
direction="on-progress-dialog"
/>
);
} else if (isCheckbox) {
let ariaLabel: string;

1
ts/components/conversationList/ContactListItem.tsx
View file

@ -30,6 +30,7 @@ export type ContactListItemConversationType = Pick<
| 'title'
| 'type'
| 'unblurredAvatarPath'
| 'e164'
>;
type PropsDataType = ContactListItemConversationType & {

112
ts/components/conversationList/PhoneNumberCheckbox.tsx Normal file
View file

@ -0,0 +1,112 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { FunctionComponent } from 'react';
import React, { useState } from 'react';
import { ButtonVariant } from '../Button';
import { ConfirmationDialog } from '../ConfirmationDialog';
import { BaseConversationListItem } from './BaseConversationListItem';
import type { ParsedE164Type } from '../../util/libphonenumberInstance';
import type { LocalizerType, ThemeType } from '../../types/Util';
import { AvatarColors } from '../../types/Colors';
import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
export type PropsDataType = {
phoneNumber: ParsedE164Type;
isChecked: boolean;
isFetching: boolean;
};
type PropsHousekeepingType = {
i18n: LocalizerType;
theme: ThemeType;
toggleConversationInChooseMembers: (conversationId: string) => void;
} & LookupConversationWithoutUuidActionsType;
type PropsType = PropsDataType & PropsHousekeepingType;
export const PhoneNumberCheckbox: FunctionComponent<PropsType> = React.memo(
function PhoneNumberCheckbox({
phoneNumber,
isChecked,
isFetching,
theme,
i18n,
lookupConversationWithoutUuid,
showUserNotFoundModal,
setIsFetchingUUID,
toggleConversationInChooseMembers,
}) {
const [isModalVisible, setIsModalVisible] = useState(false);
const onClickItem = React.useCallback(async () => {
if (!phoneNumber.isValid) {
setIsModalVisible(true);
return;
}
if (isFetching) {
return;
}
const conversationId = await lookupConversationWithoutUuid({
showUserNotFoundModal,
setIsFetchingUUID,
type: 'e164',
e164: phoneNumber.e164,
phoneNumber: phoneNumber.userInput,
});
if (conversationId !== undefined) {
toggleConversationInChooseMembers(conversationId);
}
}, [
isFetching,
toggleConversationInChooseMembers,
lookupConversationWithoutUuid,
showUserNotFoundModal,
setIsFetchingUUID,
setIsModalVisible,
phoneNumber,
]);
let modal: JSX.Element | undefined;
if (isModalVisible) {
modal = (
<ConfirmationDialog
cancelText={i18n('ok')}
cancelButtonVariant={ButtonVariant.Secondary}
i18n={i18n}
onClose={() => setIsModalVisible(false)}
>
{i18n('startConversation--phone-number-not-valid', {
phoneNumber: phoneNumber.userInput,
})}
</ConfirmationDialog>
);
}
return (
<>
<BaseConversationListItem
acceptedMessageRequest={false}
checked={isChecked}
color={AvatarColors[0]}
conversationType="direct"
headerName={phoneNumber.userInput}
i18n={i18n}
isMe={false}
isSelected={false}
onClick={onClickItem}
phoneNumber={phoneNumber.userInput}
shouldShowSpinner={isFetching}
theme={theme}
sharedGroupNames={[]}
title={phoneNumber.userInput}
/>
{modal}
</>
);
}
);

113
ts/components/conversationList/StartNewConversation.tsx
View file

@ -2,54 +2,105 @@
// SPDX-License-Identifier: AGPL-3.0-only
import type { FunctionComponent } from 'react';
import React, { useCallback } from 'react';
import React, { useCallback, useState } from 'react';
import {
BaseConversationListItem,
MESSAGE_TEXT_CLASS_NAME,
} from './BaseConversationListItem';
import { ButtonVariant } from '../Button';
import { ConfirmationDialog } from '../ConfirmationDialog';
import { BaseConversationListItem } from './BaseConversationListItem';
import type { ParsedE164Type } from '../../util/libphonenumberInstance';
import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
import type { LocalizerType } from '../../types/Util';
import { AvatarColors } from '../../types/Colors';
const TEXT_CLASS_NAME = `${MESSAGE_TEXT_CLASS_NAME}__start-new-conversation`;
type PropsData = {
phoneNumber: string;
phoneNumber: ParsedE164Type;
isFetching: boolean;
};
type PropsHousekeeping = {
i18n: LocalizerType;
onClick: (phoneNumber: string) => void;
};
showConversation: (conversationId: string) => void;
} & LookupConversationWithoutUuidActionsType;
export type Props = PropsData & PropsHousekeeping;
export const StartNewConversation: FunctionComponent<Props> = React.memo(
function StartNewConversation({ i18n, onClick, phoneNumber }) {
const messageText = (
<div className={TEXT_CLASS_NAME}>{i18n('startConversation')}</div>
);
function StartNewConversation({
i18n,
phoneNumber,
isFetching,
lookupConversationWithoutUuid,
showUserNotFoundModal,
setIsFetchingUUID,
showConversation,
}) {
const [isModalVisible, setIsModalVisible] = useState(false);
const boundOnClick = useCallback(() => {
onClick(phoneNumber);
}, [onClick, phoneNumber]);
const boundOnClick = useCallback(async () => {
if (!phoneNumber.isValid) {
setIsModalVisible(true);
return;
}
if (isFetching) {
return;
}
const conversationId = await lookupConversationWithoutUuid({
showUserNotFoundModal,
setIsFetchingUUID,
type: 'e164',
e164: phoneNumber.e164,
phoneNumber: phoneNumber.userInput,
});
if (conversationId !== undefined) {
showConversation(conversationId);
}
}, [
showConversation,
lookupConversationWithoutUuid,
showUserNotFoundModal,
setIsFetchingUUID,
setIsModalVisible,
phoneNumber,
isFetching,
]);
let modal: JSX.Element | undefined;
if (isModalVisible) {
modal = (
<ConfirmationDialog
cancelText={i18n('ok')}
cancelButtonVariant={ButtonVariant.Secondary}
i18n={i18n}
onClose={() => setIsModalVisible(false)}
>
{i18n('startConversation--phone-number-not-valid', {
phoneNumber: phoneNumber.userInput,
})}
</ConfirmationDialog>
);
}
return (
<BaseConversationListItem
acceptedMessageRequest={false}
color={AvatarColors[0]}
conversationType="direct"
headerName={phoneNumber}
i18n={i18n}
isMe={false}
isSelected={false}
messageText={messageText}
onClick={boundOnClick}
phoneNumber={phoneNumber}
sharedGroupNames={[]}
title={phoneNumber}
/>
<>
<BaseConversationListItem
acceptedMessageRequest={false}
color={AvatarColors[0]}
conversationType="direct"
headerName={phoneNumber.userInput}
i18n={i18n}
isMe={false}
isSelected={false}
onClick={boundOnClick}
phoneNumber={phoneNumber.userInput}
shouldShowSpinner={isFetching}
sharedGroupNames={[]}
title={phoneNumber.userInput}
/>
{modal}
</>
);
}
);

40
ts/components/conversationList/UsernameSearchResultListItem.tsx
View file

@ -2,12 +2,13 @@
// SPDX-License-Identifier: AGPL-3.0-only
import type { FunctionComponent } from 'react';
import React from 'react';
import { noop } from 'lodash';
import React, { useCallback } from 'react';
import { BaseConversationListItem } from './BaseConversationListItem';
import type { LocalizerType } from '../../types/Util';
import { lookupConversationWithoutUuid } from '../../util/lookupConversationWithoutUuid';
import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
type PropsData = {
username: string;
@ -16,23 +17,42 @@ type PropsData = {
type PropsHousekeeping = {
i18n: LocalizerType;
onClick: (username: string) => void;
};
showConversation: (conversationId: string) => void;
} & LookupConversationWithoutUuidActionsType;
export type Props = PropsData & PropsHousekeeping;
export const UsernameSearchResultListItem: FunctionComponent<Props> = ({
i18n,
isFetchingUsername,
onClick,
username,
showUserNotFoundModal,
setIsFetchingUUID,
showConversation,
}) => {
const usernameText = i18n('at-username', { username });
const boundOnClick = isFetchingUsername
? noop
: () => {
onClick(username);
};
const boundOnClick = useCallback(async () => {
if (isFetchingUsername) {
return;
}
const conversationId = await lookupConversationWithoutUuid({
showUserNotFoundModal,
setIsFetchingUUID,
type: 'username',
username,
});
if (conversationId !== undefined) {
showConversation(conversationId);
}
}, [
username,
showUserNotFoundModal,
setIsFetchingUUID,
showConversation,
isFetchingUsername,
]);
return (
<BaseConversationListItem

7
ts/components/emoji/lib.ts
View file

@ -1,4 +1,4 @@
// Copyright 2019-2021 Signal Messenger, LLC
// Copyright 2019-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
// Camelcase disabled due to emoji-datasource using snake_case
@ -220,15 +220,12 @@ export function getImagePath(
const fuse = new Fuse(data, {
shouldSort: true,
threshold: 0.2,
maxPatternLength: 32,
minMatchCharLength: 1,
tokenize: true,
tokenSeparator: /[-_\s]+/,
keys: ['short_name', 'name'],
});
export function search(query: string, count = 0): Array<EmojiData> {
const results = fuse.search(query.substr(0, 32));
const results = fuse.search(query.substr(0, 32)).map(result => result.item);
if (count) {
return take(results, count);

128
ts/components/leftPane/LeftPaneChooseGroupMembersHelper.tsx
View file

@ -18,46 +18,78 @@ import {
} from '../AddGroupMemberErrorDialog';
import { Button } from '../Button';
import type { LocalizerType } from '../../types/Util';
import type { ParsedE164Type } from '../../util/libphonenumberInstance';
import { parseAndFormatPhoneNumber } from '../../util/libphonenumberInstance';
import type { UUIDFetchStateType } from '../../util/uuidFetchState';
import { isFetchingByE164 } from '../../util/uuidFetchState';
import {
getGroupSizeRecommendedLimit,
getGroupSizeHardLimit,
} from '../../groups/limits';
export type LeftPaneChooseGroupMembersPropsType = {
uuidFetchState: UUIDFetchStateType;
candidateContacts: ReadonlyArray<ConversationType>;
isShowingRecommendedGroupSizeModal: boolean;
isShowingMaximumGroupSizeModal: boolean;
searchTerm: string;
regionCode: string | undefined;
selectedContacts: Array<ConversationType>;
};
export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneChooseGroupMembersPropsType> {
private readonly candidateContacts: ReadonlyArray<ConversationType>;
private readonly isPhoneNumberChecked: boolean;
private readonly isShowingMaximumGroupSizeModal: boolean;
private readonly isShowingRecommendedGroupSizeModal: boolean;
private readonly searchTerm: string;
private readonly phoneNumber: ParsedE164Type | undefined;
private readonly selectedContacts: Array<ConversationType>;
private readonly selectedConversationIdsSet: Set<string>;
private readonly uuidFetchState: UUIDFetchStateType;
constructor({
candidateContacts,
isShowingMaximumGroupSizeModal,
isShowingRecommendedGroupSizeModal,
searchTerm,
regionCode,
selectedContacts,
uuidFetchState,
}: Readonly<LeftPaneChooseGroupMembersPropsType>) {
super();
this.uuidFetchState = uuidFetchState;
this.candidateContacts = candidateContacts;
this.isShowingMaximumGroupSizeModal = isShowingMaximumGroupSizeModal;
this.isShowingRecommendedGroupSizeModal =
isShowingRecommendedGroupSizeModal;
this.searchTerm = searchTerm;
const phoneNumber = parseAndFormatPhoneNumber(searchTerm, regionCode);
if (phoneNumber) {
this.isPhoneNumberChecked =
phoneNumber.isValid &&
selectedContacts.some(contact => contact.e164 === phoneNumber.e164);
const isVisible = this.candidateContacts.every(
contact => contact.e164 !== phoneNumber.e164
);
if (isVisible) {
this.phoneNumber = phoneNumber;
}
} else {
this.isPhoneNumberChecked = false;
}
this.selectedContacts = selectedContacts;
this.selectedConversationIdsSet = new Set(
@ -207,46 +239,90 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
}
getRowCount(): number {
if (!this.candidateContacts.length) {
return 0;
let rowCount = 0;
// Header + Phone Number
if (this.phoneNumber) {
rowCount += 2;
}
return this.candidateContacts.length + 2;
// Header + Contacts
if (this.candidateContacts.length) {
rowCount += 1 + this.candidateContacts.length;
}
// Footer
if (rowCount > 0) {
rowCount += 1;
}
return rowCount;
}
getRow(rowIndex: number): undefined | Row {
if (!this.candidateContacts.length) {
getRow(actualRowIndex: number): undefined | Row {
if (!this.candidateContacts.length && !this.phoneNumber) {
return undefined;
}
if (rowIndex === 0) {
return {
type: RowType.Header,
i18nKey: 'contactsHeader',
};
}
const rowCount = this.getRowCount();
// This puts a blank row for the footer.
if (rowIndex === this.candidateContacts.length + 1) {
if (actualRowIndex === rowCount - 1) {
return { type: RowType.Blank };
}
const contact = this.candidateContacts[rowIndex - 1];
if (!contact) {
return undefined;
let virtualRowIndex = actualRowIndex;
if (this.candidateContacts.length) {
if (virtualRowIndex === 0) {
return {
type: RowType.Header,
i18nKey: 'contactsHeader',
};
}
if (virtualRowIndex <= this.candidateContacts.length) {
const contact = this.candidateContacts[virtualRowIndex - 1];
const isChecked = this.selectedConversationIdsSet.has(contact.id);
const disabledReason =
!isChecked && this.hasSelectedMaximumNumberOfContacts()
? ContactCheckboxDisabledReason.MaximumContactsSelected
: undefined;
return {
type: RowType.ContactCheckbox,
contact,
isChecked,
disabledReason,
};
}
virtualRowIndex -= 1 + this.candidateContacts.length;
}
const isChecked = this.selectedConversationIdsSet.has(contact.id);
const disabledReason =
!isChecked && this.hasSelectedMaximumNumberOfContacts()
? ContactCheckboxDisabledReason.MaximumContactsSelected
: undefined;
if (this.phoneNumber) {
if (virtualRowIndex === 0) {
return {
type: RowType.Header,
i18nKey: 'findByPhoneNumberHeader',
};
}
if (virtualRowIndex === 1) {
return {
type: RowType.PhoneNumberCheckbox,
isChecked: this.isPhoneNumberChecked,
isFetching: isFetchingByE164(
this.uuidFetchState,
this.phoneNumber.e164
),
phoneNumber: this.phoneNumber,
};
}
virtualRowIndex -= 2;
}
return {
type: RowType.ContactCheckbox,
contact,
isChecked,
disabledReason,
};
return undefined;
}
// This is deliberately unimplemented because these keyboard shortcuts shouldn't work in

101
ts/components/leftPane/LeftPaneComposeHelper.tsx
View file

@ -3,7 +3,6 @@
import type { ReactChild, ChangeEvent } from 'react';
import React from 'react';
import type { PhoneNumber } from 'google-libphonenumber';
import { LeftPaneHelper } from './LeftPaneHelper';
import type { Row } from '../ConversationList';
@ -12,13 +11,15 @@ import type { ContactListItemConversationType } from '../conversationList/Contac
import type { PropsData as ConversationListItemPropsType } from '../conversationList/ConversationListItem';
import { SearchInput } from '../SearchInput';
import type { LocalizerType } from '../../types/Util';
import {
instance as phoneNumberInstance,
PhoneNumberFormat,
} from '../../util/libphonenumberInstance';
import { assert } from '../../util/assert';
import type { ParsedE164Type } from '../../util/libphonenumberInstance';
import { parseAndFormatPhoneNumber } from '../../util/libphonenumberInstance';
import { missingCaseError } from '../../util/missingCaseError';
import { getUsernameFromSearch } from '../../types/Username';
import type { UUIDFetchStateType } from '../../util/uuidFetchState';
import {
isFetchingByUsername,
isFetchingByE164,
} from '../../util/uuidFetchState';
export type LeftPaneComposePropsType = {
composeContacts: ReadonlyArray<ContactListItemConversationType>;
@ -26,14 +27,13 @@ export type LeftPaneComposePropsType = {
regionCode: string | undefined;
searchTerm: string;
isFetchingUsername: boolean;
uuidFetchState: UUIDFetchStateType;
isUsernamesEnabled: boolean;
};
enum TopButton {
None,
CreateNewGroup,
StartNewConversation,
}
export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsType> {
@ -41,13 +41,15 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
private readonly composeGroups: ReadonlyArray<ConversationListItemPropsType>;
private readonly isFetchingUsername: boolean;
private readonly uuidFetchState: UUIDFetchStateType;
private readonly isUsernamesEnabled: boolean;
private readonly searchTerm: string;
private readonly phoneNumber: undefined | PhoneNumber;
private readonly phoneNumber: ParsedE164Type | undefined;
private readonly isPhoneNumberVisible: boolean;
constructor({
composeContacts,
@ -55,15 +57,23 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
regionCode,
searchTerm,
isUsernamesEnabled,
isFetchingUsername,
uuidFetchState,
}: Readonly<LeftPaneComposePropsType>) {
super();
this.composeContacts = composeContacts;
this.composeGroups = composeGroups;
this.searchTerm = searchTerm;
this.phoneNumber = parsePhoneNumber(searchTerm, regionCode);
this.isFetchingUsername = isFetchingUsername;
this.phoneNumber = parseAndFormatPhoneNumber(searchTerm, regionCode);
if (this.phoneNumber) {
const { phoneNumber } = this;
this.isPhoneNumberVisible = this.composeContacts.every(
contact => contact.e164 !== phoneNumber.e164
);
} else {
this.isPhoneNumberVisible = false;
}
this.uuidFetchState = uuidFetchState;
this.isUsernamesEnabled = isUsernamesEnabled;
}
@ -141,6 +151,9 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
if (this.getUsernameFromSearch()) {
result += 2;
}
if (this.isPhoneNumberVisible) {
result += 2;
}
return result;
}
@ -153,18 +166,6 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
switch (topButton) {
case TopButton.None:
break;
case TopButton.StartNewConversation:
assert(
this.phoneNumber,
'LeftPaneComposeHelper: we should have a phone number if the top button is "Start new conversation"'
);
return {
type: RowType.StartNewConversation,
phoneNumber: phoneNumberInstance.format(
this.phoneNumber,
PhoneNumberFormat.E164
),
};
case TopButton.CreateNewGroup:
return { type: RowType.CreateNewGroup };
default:
@ -232,7 +233,34 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
return {
type: RowType.UsernameSearchResult,
username,
isFetchingUsername: this.isFetchingUsername,
isFetchingUsername: isFetchingByUsername(
this.uuidFetchState,
username
),
};
virtualRowIndex -= 1;
}
}
if (this.phoneNumber && this.isPhoneNumberVisible) {
if (virtualRowIndex === 0) {
return {
type: RowType.Header,
i18nKey: 'findByPhoneNumberHeader',
};
}
virtualRowIndex -= 1;
if (virtualRowIndex === 0) {
return {
type: RowType.StartNewConversation,
phoneNumber: this.phoneNumber,
isFetching: isFetchingByE164(
this.uuidFetchState,
this.phoneNumber.e164
),
};
virtualRowIndex -= 1;
@ -272,9 +300,6 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
}
private getTopButton(): TopButton {
if (this.phoneNumber) {
return TopButton.StartNewConversation;
}
if (this.searchTerm) {
return TopButton.None;
}
@ -352,21 +377,3 @@ function focusRef(el: HTMLElement | null) {
el.focus();
}
}
function parsePhoneNumber(
str: string,
regionCode: string | undefined
): undefined | PhoneNumber {
let result: PhoneNumber;
try {
result = phoneNumberInstance.parse(str, regionCode);
} catch (err) {
return undefined;
}
if (!phoneNumberInstance.isValidNumber(result)) {
return undefined;
}
return result;
}