Allow adding to a group by phone number
This commit is contained in:
parent
76a1a805ef
commit
9568d5792e
49 changed files with 1842 additions and 693 deletions
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
]
|
||||
);
|
||||
|
|
|
@ -60,6 +60,7 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
removeLinkPreview: action('removeLinkPreview'),
|
||||
skinTone: 0,
|
||||
theme: React.useContext(StorybookThemeContext),
|
||||
regionCode: 'US',
|
||||
});
|
||||
|
||||
story.add('Modal', () => {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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', () => (
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
22
ts/components/ToastFailedToFetchPhoneNumber.tsx
Normal 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>
|
||||
);
|
||||
};
|
|
@ -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', () => (
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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', () => {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -30,6 +30,7 @@ export type ContactListItemConversationType = Pick<
|
|||
| 'title'
|
||||
| 'type'
|
||||
| 'unblurredAvatarPath'
|
||||
| 'e164'
|
||||
>;
|
||||
|
||||
type PropsDataType = ContactListItemConversationType & {
|
||||
|
|
112
ts/components/conversationList/PhoneNumberCheckbox.tsx
Normal file
112
ts/components/conversationList/PhoneNumberCheckbox.tsx
Normal 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}
|
||||
</>
|
||||
);
|
||||
}
|
||||
);
|
|
@ -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}
|
||||
</>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue