From 82a0275f45083737f74288c95d40a4d791c7e218 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:03:55 +0100 Subject: [PATCH 01/10] add FormProvider in page --- src/pages/workspace/WorkspaceInviteMessagePage.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index 85dd65377dcf..739f7bf3695a 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -27,6 +27,8 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import {policyDefaultProps, policyPropTypes} from './withPolicy'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; const personalDetailsPropTypes = PropTypes.shape({ /** The accountID of the person */ @@ -178,7 +180,7 @@ class WorkspaceInviteMessagePage extends React.Component { onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(this.props.route.params.policyID))} /> -
{this.props.translate('workspace.inviteMessage.inviteMessagePrompt')} - (this.welcomeMessageInputRef = el)} role={CONST.ACCESSIBILITY_ROLE.TEXT} inputID="welcomeMessage" @@ -233,7 +236,7 @@ class WorkspaceInviteMessagePage extends React.Component { shouldSaveDraft /> -
+ ); From 4f479e2f4116b114f79c1a3c82d1073d1c509c70 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:04:30 +0100 Subject: [PATCH 02/10] fix prettier --- src/pages/workspace/WorkspaceInviteMessagePage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index 739f7bf3695a..273bcba6e6c2 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -6,6 +6,8 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import Form from '@components/Form'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import MultipleAvatars from '@components/MultipleAvatars'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; @@ -27,8 +29,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import {policyDefaultProps, policyPropTypes} from './withPolicy'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; -import FormProvider from '@components/Form/FormProvider'; -import InputWrapper from '@components/Form/InputWrapper'; const personalDetailsPropTypes = PropTypes.shape({ /** The accountID of the person */ From 148798661d3f72556e3134583245ba8d951e6965 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:05:17 +0100 Subject: [PATCH 03/10] remove unused imports --- src/pages/workspace/WorkspaceInviteMessagePage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index 273bcba6e6c2..825c130eeaac 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -5,7 +5,6 @@ import {Keyboard, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; -import Form from '@components/Form'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; From e307df9285066974f117ce2bbd028a546c6ae84d Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Fri, 8 Dec 2023 16:13:13 +0100 Subject: [PATCH 04/10] migrate from class based component to functional --- .../workspace/WorkspaceInviteMessagePage.js | 252 +++++++----------- 1 file changed, 98 insertions(+), 154 deletions(-) diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index 6d761b1130a8..e8dd1257b01b 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -18,7 +18,6 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withNavigationFocus from '@components/withNavigationFocus'; import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles'; import compose from '@libs/compose'; -import * as Localize from '@libs/Localize'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -71,181 +70,126 @@ const defaultProps = { invitedEmailsToAccountIDsDraft: {}, }; -class WorkspaceInviteMessagePage extends React.Component { - constructor(props) { - super(props); - - this.sendInvitation = this.sendInvitation.bind(this); - this.validate = this.validate.bind(this); - this.openPrivacyURL = this.openPrivacyURL.bind(this); - this.debouncedSaveDraf = _.debounce((newDraft) => { - Policy.setWorkspaceInviteMessageDraft(this.props.route.params.policyID, newDraft); - }, 2000); - this.state = { - welcomeNote: this.props.workspaceInviteMessageDraft || this.getDefaultWelcomeNote(), - }; - } - - componentDidMount() { - if (_.isEmpty(this.props.invitedEmailsToAccountIDsDraft)) { - Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(this.props.route.params.policyID), true); - return; - } - this.focusWelcomeMessageInput(); +function WorkspaceInviteMessagePage(props) { + if (_.isEmpty(props.invitedEmailsToAccountIDsDraft)) { + Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID), true); + return; } - componentDidUpdate(prevProps) { - if (!prevProps.isFocused && this.props.isFocused) { - this.focusWelcomeMessageInput(); - } - - if ( - !( - (prevProps.preferredLocale !== this.props.preferredLocale || prevProps.policy.name !== this.props.policy.name) && - this.state.welcomeNote === Localize.translate(prevProps.preferredLocale, 'workspace.inviteMessage.welcomeNote', {workspaceName: prevProps.policy.name}) - ) - ) { - return; - } - this.setState({welcomeNote: this.getDefaultWelcomeNote()}); - } - - componentWillUnmount() { - if (!this.focusTimeout) { - return; - } - clearTimeout(this.focusTimeout); - } + const saveDraft = (newDraft) => { + Policy.setWorkspaceInviteMessageDraft(props.route.params.policyID, newDraft); + }; - getDefaultWelcomeNote() { - return this.props.translate('workspace.inviteMessage.welcomeNote', { - workspaceName: this.props.policy.name, + const getDefaultWelcomeNote = () => + props.translate('workspace.inviteMessage.welcomeNote', { + workspaceName: props.policy.name, }); - } - sendInvitation() { + const welcomeMessage = props.workspaceInviteMessageDraft || getDefaultWelcomeNote(); + + const sendInvitation = () => { Keyboard.dismiss(); - Policy.addMembersToWorkspace(this.props.invitedEmailsToAccountIDsDraft, this.state.welcomeNote, this.props.route.params.policyID); - Policy.setWorkspaceInviteMembersDraft(this.props.route.params.policyID, {}); + Policy.addMembersToWorkspace(props.invitedEmailsToAccountIDsDraft, welcomeMessage, props.route.params.policyID); + Policy.setWorkspaceInviteMembersDraft(props.route.params.policyID, {}); // Pop the invite message page before navigating to the members page. Navigation.goBack(ROUTES.HOME); - Navigation.navigate(ROUTES.WORKSPACE_MEMBERS.getRoute(this.props.route.params.policyID)); - } + Navigation.navigate(ROUTES.WORKSPACE_MEMBERS.getRoute(props.route.params.policyID)); + }; /** * Opens privacy url as an external link * @param {Object} event */ - openPrivacyURL(event) { + const openPrivacyURL = (event) => { event.preventDefault(); Link.openExternalLink(CONST.PRIVACY_URL); - } - - focusWelcomeMessageInput() { - this.focusTimeout = setTimeout(() => { - this.welcomeMessageInputRef.focus(); - // Below condition is needed for web, desktop and mweb only, for native cursor is set at end by default. - if (this.welcomeMessageInputRef.value && this.welcomeMessageInputRef.setSelectionRange) { - const length = this.welcomeMessageInputRef.value.length; - this.welcomeMessageInputRef.setSelectionRange(length, length); - } - }, CONST.ANIMATED_TRANSITION); - } + }; - validate() { + const validate = () => { const errorFields = {}; - if (_.isEmpty(this.props.invitedEmailsToAccountIDsDraft)) { + if (_.isEmpty(props.invitedEmailsToAccountIDsDraft)) { errorFields.welcomeMessage = 'workspace.inviteMessage.inviteNoMembersError'; } return errorFields; - } - - render() { - const policyName = lodashGet(this.props.policy, 'name'); - - return ( - + Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)} > - Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)} + Navigation.dismissModal()} + onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID))} + /> + + + + {props.translate('common.privacy')} + + + } > - Navigation.dismissModal()} - onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(this.props.route.params.policyID))} - /> - - - - {this.props.translate('common.privacy')} - - - } - > - - - - - {this.props.translate('workspace.inviteMessage.inviteMessagePrompt')} - - - (this.welcomeMessageInputRef = el)} - role={CONST.ACCESSIBILITY_ROLE.TEXT} - inputID="welcomeMessage" - label={this.props.translate('workspace.inviteMessage.personalMessagePrompt')} - accessibilityLabel={this.props.translate('workspace.inviteMessage.personalMessagePrompt')} - autoCompleteType="off" - autoCorrect={false} - autoGrowHeight - inputStyle={[this.props.themeStyles.verticalAlignTop]} - containerStyles={[this.props.themeStyles.autoGrowHeightMultilineInput]} - defaultValue={this.state.welcomeNote} - value={this.state.welcomeNote} - onChangeText={(text) => { - this.debouncedSaveDraf(text); - this.setState({welcomeNote: text}); - }} - /> - - - - - ); - } + + + + + {props.translate('workspace.inviteMessage.inviteMessagePrompt')} + + + { + saveDraft(text); + }} + /> + + + + + ); } WorkspaceInviteMessagePage.propTypes = propTypes; From 0b91ff11fe572dda9809b993cf8215694e9a2fdc Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Mon, 11 Dec 2023 12:36:59 +0100 Subject: [PATCH 05/10] add timeoutRef clear on unmount --- src/pages/workspace/WorkspaceInviteMessagePage.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index 7ae3e9f16897..164a2d6f2ffb 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -75,6 +75,13 @@ function WorkspaceInviteMessagePage(props) { const focusTimeoutRef = useRef(); const welcomeMessageInputRef = useRef(null); + useEffect( + () => () => { + clearTimeout(focusTimeoutRef.current); + }, + [], + ); + const focusWelcomeMessageInput = () => { focusTimeoutRef.current = setTimeout(() => { welcomeMessageInputRef.current.focus(); From d547223eeaa63a8381f1cfaae42f96817cb65703 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 14 Dec 2023 10:54:32 +0100 Subject: [PATCH 06/10] change code for auto focus input --- .../workspace/WorkspaceInviteMessagePage.js | 39 ++++++------------- 1 file changed, 11 insertions(+), 28 deletions(-) diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index 164a2d6f2ffb..c6b88216a1ee 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -1,7 +1,7 @@ import {isEmpty} from 'lodash'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; -import React, {useEffect, useRef} from 'react'; +import React from 'react'; import {Keyboard, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; @@ -17,10 +17,12 @@ import TextInput from '@components/TextInput'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withNavigationFocus from '@components/withNavigationFocus'; import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles'; +import useAutoFocusInput from '@hooks/useAutoFocusInput'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; +import updateMultilineInputRange from '@libs/updateMultilineInputRange'; import * as Link from '@userActions/Link'; import * as Policy from '@userActions/Policy'; import CONST from '@src/CONST'; @@ -72,33 +74,11 @@ const defaultProps = { }; function WorkspaceInviteMessagePage(props) { - const focusTimeoutRef = useRef(); - const welcomeMessageInputRef = useRef(null); + const {inputCallbackRef} = useAutoFocusInput(); - useEffect( - () => () => { - clearTimeout(focusTimeoutRef.current); - }, - [], - ); - - const focusWelcomeMessageInput = () => { - focusTimeoutRef.current = setTimeout(() => { - welcomeMessageInputRef.current.focus(); - // Below condition is needed for web, desktop and mweb only, for native cursor is set at end by default. - if (welcomeMessageInputRef.current.value && welcomeMessageInputRef.current.setSelectionRange) { - const length = welcomeMessageInputRef.current.value.length; - welcomeMessageInputRef.current.setSelectionRange(length, length); - } - }, CONST.ANIMATED_TRANSITION); - }; - - useEffect(() => { - if (_.isEmpty(props.invitedEmailsToAccountIDsDraft)) { - Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID), true); - } - focusWelcomeMessageInput(); - }, [props.invitedEmailsToAccountIDsDraft, props.route.params.policyID]); + if (_.isEmpty(props.invitedEmailsToAccountIDsDraft)) { + Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID), true); + } const saveDraft = (newDraft) => { Policy.setWorkspaceInviteMessageDraft(props.route.params.policyID, newDraft); @@ -209,7 +189,10 @@ function WorkspaceInviteMessagePage(props) { onChangeText={(text) => { saveDraft(text); }} - ref={(el) => (welcomeMessageInputRef.current = el)} + ref={(el) => { + updateMultilineInputRange(el); + inputCallbackRef(el); + }} /> From d7b57a50710ed83bbf308b74b96cf91599efff7b Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Fri, 15 Dec 2023 13:18:48 +0100 Subject: [PATCH 07/10] use hooks for translate and styles --- .../workspace/WorkspaceInviteMessagePage.js | 45 +++++++++---------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index d8de68bd6cc2..14178c35fb70 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -14,10 +14,10 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withNavigationFocus from '@components/withNavigationFocus'; -import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; @@ -63,8 +63,6 @@ const propTypes = { }).isRequired, ...policyPropTypes, - ...withLocalizePropTypes, - ...withThemeStylesPropTypes, }; const defaultProps = { @@ -74,6 +72,9 @@ const defaultProps = { }; function WorkspaceInviteMessagePage(props) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const {inputCallbackRef} = useAutoFocusInput(); if (_.isEmpty(props.invitedEmailsToAccountIDsDraft)) { @@ -85,7 +86,7 @@ function WorkspaceInviteMessagePage(props) { }; const getDefaultWelcomeNote = () => - props.translate('workspace.inviteMessage.welcomeNote', { + translate('workspace.inviteMessage.welcomeNote', { workspaceName: props.policy.name, }); @@ -131,7 +132,7 @@ function WorkspaceInviteMessagePage(props) { onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)} > Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID))} /> - - {props.translate('common.privacy')} + + {translate('common.privacy')} } > - + - - {props.translate('workspace.inviteMessage.inviteMessagePrompt')} + + {translate('workspace.inviteMessage.inviteMessagePrompt')} - + { saveDraft(text); @@ -205,7 +206,6 @@ WorkspaceInviteMessagePage.defaultProps = defaultProps; WorkspaceInviteMessagePage.displayName = 'WorkspaceInviteMessagePage'; export default compose( - withLocalize, withPolicyAndFullscreenLoading, withOnyx({ allPersonalDetails: { @@ -220,5 +220,4 @@ export default compose( }, }), withNavigationFocus, - withThemeStyles, )(WorkspaceInviteMessagePage); From d62872eeeebac8277e8905a612d16bd2864b60a3 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 19 Dec 2023 13:42:34 +0100 Subject: [PATCH 08/10] review fixes --- .../workspace/WorkspaceInviteMessagePage.js | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index 14178c35fb70..7b7350823168 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -141,7 +141,7 @@ function WorkspaceInviteMessagePage(props) { onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID))} /> - - {translate('common.privacy')} + + {translate('common.privacy')} } > - + - + {translate('workspace.inviteMessage.inviteMessagePrompt')} - + { saveDraft(text); }} ref={(el) => { - updateMultilineInputRange(el); + if (!el) { + return; + } inputCallbackRef(el); + updateMultilineInputRange(el); }} /> From b4b2c57b32b9d3ba967e848f13a92f4199d5b517 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 19 Dec 2023 14:03:57 +0100 Subject: [PATCH 09/10] fix correct navigation on invite --- src/pages/workspace/WorkspaceInviteMessagePage.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index 7b7350823168..260214066e3e 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -1,7 +1,7 @@ import {isEmpty} from 'lodash'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; -import React from 'react'; +import React, {useEffect} from 'react'; import {Keyboard, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; @@ -77,9 +77,13 @@ function WorkspaceInviteMessagePage(props) { const {inputCallbackRef} = useAutoFocusInput(); - if (_.isEmpty(props.invitedEmailsToAccountIDsDraft)) { + useEffect(() => { + if (!_.isEmpty(props.invitedEmailsToAccountIDsDraft)) { + return; + } Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID), true); - } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); const saveDraft = (newDraft) => { Policy.setWorkspaceInviteMessageDraft(props.route.params.policyID, newDraft); From 14d38208d4e28e30798f7b6990e7c3fe93c56a96 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 19 Dec 2023 16:11:03 +0100 Subject: [PATCH 10/10] fix input value and space placement --- .../workspace/WorkspaceInviteMessagePage.js | 31 ++++++++++--------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index 260214066e3e..d60f187fa7d2 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -1,7 +1,7 @@ import {isEmpty} from 'lodash'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; -import React, {useEffect} from 'react'; +import React, {useEffect, useState} from 'react'; import {Keyboard, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; @@ -75,30 +75,32 @@ function WorkspaceInviteMessagePage(props) { const styles = useThemeStyles(); const {translate} = useLocalize(); + const [welcomeNote, setWelcomeNote] = useState(); + const {inputCallbackRef} = useAutoFocusInput(); + const getDefaultWelcomeNote = () => + props.workspaceInviteMessageDraft || + translate('workspace.inviteMessage.welcomeNote', { + workspaceName: props.policy.name, + }); + useEffect(() => { if (!_.isEmpty(props.invitedEmailsToAccountIDsDraft)) { + setWelcomeNote(getDefaultWelcomeNote()); return; } Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID), true); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const saveDraft = (newDraft) => { + const debouncedSaveDraft = _.debounce((newDraft) => { Policy.setWorkspaceInviteMessageDraft(props.route.params.policyID, newDraft); - }; - - const getDefaultWelcomeNote = () => - translate('workspace.inviteMessage.welcomeNote', { - workspaceName: props.policy.name, - }); - - const welcomeMessage = props.workspaceInviteMessageDraft || getDefaultWelcomeNote(); + }); const sendInvitation = () => { Keyboard.dismiss(); - Policy.addMembersToWorkspace(props.invitedEmailsToAccountIDsDraft, welcomeMessage, props.route.params.policyID); + Policy.addMembersToWorkspace(props.invitedEmailsToAccountIDsDraft, welcomeNote, props.route.params.policyID); Policy.setWorkspaceInviteMembersDraft(props.route.params.policyID, {}); SearchInputManager.searchInput = ''; // Pop the invite message page before navigating to the members page. @@ -187,11 +189,12 @@ function WorkspaceInviteMessagePage(props) { autoCompleteType="off" autoCorrect={false} autoGrowHeight - inputStyle={[styles.verticalAlignTop]} containerStyles={[styles.autoGrowHeightMultilineInput]} - value={welcomeMessage} + defaultValue={getDefaultWelcomeNote()} + value={welcomeNote} onChangeText={(text) => { - saveDraft(text); + setWelcomeNote(text); + debouncedSaveDraft(text); }} ref={(el) => { if (!el) {