// Copyright 2021 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only import React, { useState } from 'react'; import { Modal } from './Modal'; import { ConfirmationDialog } from './ConfirmationDialog'; import type { PropsType as ProfileEditorPropsType } from './ProfileEditor'; import { ProfileEditor, EditState } from './ProfileEditor'; import type { ProfileDataType } from '../state/ducks/conversations'; import type { AvatarUpdateType } from '../types/Avatar'; export type PropsDataType = { hasError: boolean; } & Pick<ProfileEditorPropsType, 'renderEditUsernameModalBody'>; type PropsType = { myProfileChanged: ( profileData: ProfileDataType, avatar: AvatarUpdateType ) => unknown; toggleProfileEditor: () => unknown; toggleProfileEditorHasError: () => unknown; } & PropsDataType & Omit<ProfileEditorPropsType, 'onEditStateChanged' | 'onProfileChanged'>; export function ProfileEditorModal({ hasError, i18n, myProfileChanged, onSetSkinTone, toggleProfileEditor, toggleProfileEditorHasError, ...restProps }: PropsType): JSX.Element { const MODAL_TITLES_BY_EDIT_STATE: Record<EditState, string | undefined> = { [EditState.BetterAvatar]: i18n('ProfileEditorModal--avatar'), [EditState.Bio]: i18n('ProfileEditorModal--about'), [EditState.None]: i18n('ProfileEditorModal--profile'), [EditState.ProfileName]: i18n('ProfileEditorModal--name'), [EditState.UsernameOnboarding]: undefined, [EditState.Username]: i18n('ProfileEditorModal--username'), }; const [modalTitle, setModalTitle] = useState( MODAL_TITLES_BY_EDIT_STATE[EditState.None] ); if (hasError) { return ( <ConfirmationDialog dialogName="ProfileEditorModal.error" cancelText={i18n('Confirmation--confirm')} i18n={i18n} onClose={toggleProfileEditorHasError} > {i18n('ProfileEditorModal--error')} </ConfirmationDialog> ); } return ( <Modal modalName="ProfileEditorModal" hasXButton i18n={i18n} onClose={toggleProfileEditor} title={modalTitle} > <ProfileEditor {...restProps} i18n={i18n} onEditStateChanged={editState => { setModalTitle(MODAL_TITLES_BY_EDIT_STATE[editState]); }} onProfileChanged={myProfileChanged} onSetSkinTone={onSetSkinTone} /> </Modal> ); }