From f16ad888c2991a229f183b1c8cedfa30c86a773b Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Thu, 22 Feb 2024 13:06:27 +0100 Subject: [PATCH] address comments --- src/pages/tasks/NewTaskDescriptionPage.tsx | 13 +- src/pages/tasks/NewTaskDetailsPage copy.tsx | 128 -------------------- src/pages/tasks/NewTaskDetailsPage.tsx | 17 ++- src/pages/tasks/NewTaskPage.tsx | 24 ++-- src/pages/tasks/NewTaskTitlePage.tsx | 12 +- 5 files changed, 44 insertions(+), 150 deletions(-) delete mode 100644 src/pages/tasks/NewTaskDetailsPage copy.tsx diff --git a/src/pages/tasks/NewTaskDescriptionPage.tsx b/src/pages/tasks/NewTaskDescriptionPage.tsx index 3422fa9d1b1f..623d13fdda26 100644 --- a/src/pages/tasks/NewTaskDescriptionPage.tsx +++ b/src/pages/tasks/NewTaskDescriptionPage.tsx @@ -1,3 +1,4 @@ +import type {StackScreenProps} from '@react-navigation/stack'; import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import React from 'react'; import {View} from 'react-native'; @@ -5,7 +6,7 @@ import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; import InputWrapperWithRef from '@components/Form/InputWrapper'; -import type {FormOnyxValues} from '@components/Form/types'; +import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import TextInput from '@components/TextInput'; @@ -14,19 +15,23 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {NewTaskNavigatorParamList} from '@libs/Navigation/types'; import updateMultilineInputRange from '@libs/updateMultilineInputRange'; import * as TaskActions from '@userActions/Task'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/NewTaskForm'; import type {Task} from '@src/types/onyx'; -type NewTaskDescriptionPageProps = { +type NewTaskDescriptionPageOnyxProps = { /** Grab the Share title of the Task */ task: OnyxEntry; }; +type NewTaskDescriptionPageProps = NewTaskDescriptionPageOnyxProps & StackScreenProps; + const parser = new ExpensiMark(); function NewTaskDescriptionPage({task}: NewTaskDescriptionPageProps) { @@ -39,7 +44,7 @@ function NewTaskDescriptionPage({task}: NewTaskDescriptionPageProps) { Navigation.goBack(ROUTES.NEW_TASK); }; - const validate = (values: FormOnyxValues) => { + const validate = (values: FormOnyxValues): FormInputErrors => { const errors = {}; if (values.taskDescription.length > CONST.DESCRIPTION_LIMIT) { @@ -94,7 +99,7 @@ function NewTaskDescriptionPage({task}: NewTaskDescriptionPageProps) { NewTaskDescriptionPage.displayName = 'NewTaskDescriptionPage'; -export default withOnyx({ +export default withOnyx({ task: { key: ONYXKEYS.TASK, }, diff --git a/src/pages/tasks/NewTaskDetailsPage copy.tsx b/src/pages/tasks/NewTaskDetailsPage copy.tsx deleted file mode 100644 index a7d98724a2f1..000000000000 --- a/src/pages/tasks/NewTaskDetailsPage copy.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import ExpensiMark from 'expensify-common/lib/ExpensiMark'; -import React, {useEffect, useState} from 'react'; -import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; -import FormProvider from '@components/Form/FormProvider'; -import InputWrapper from '@components/Form/InputWrapper'; -import type {FormOnyxValues} from '@components/Form/types'; -import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import ScreenWrapper from '@components/ScreenWrapper'; -import TextInput from '@components/TextInput'; -import useAutoFocusInput from '@hooks/useAutoFocusInput'; -import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@hooks/useThemeStyles'; -import * as ErrorUtils from '@libs/ErrorUtils'; -import Navigation from '@libs/Navigation/Navigation'; -import * as TaskActions from '@userActions/Task'; -import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; -import INPUT_IDS from '@src/types/form/NewTaskForm'; -import type {Task} from '@src/types/onyx'; - -type NewTaskDetailsPageProps = { - /** Grab the Share title of the Task */ - task: OnyxEntry; -}; - -const parser = new ExpensiMark(); - -function NewTaskDetailsPage({task}: NewTaskDetailsPageProps) { - const styles = useThemeStyles(); - const {translate} = useLocalize(); - const [taskTitle, setTaskTitle] = useState(task?.title ?? ''); - const [taskDescription, setTaskDescription] = useState(task?.description ?? ''); - - const {inputCallbackRef} = useAutoFocusInput(); - - useEffect(() => { - setTaskTitle(task?.title ?? ''); - setTaskDescription(parser.htmlToMarkdown(parser.replace(task?.description ?? ''))); - }, [task]); - - const validate = (values: FormOnyxValues) => { - const errors = {}; - - if (!values.taskTitle) { - // We error if the user doesn't enter a task name - ErrorUtils.addErrorMessage(errors, 'taskTitle', 'newTaskPage.pleaseEnterTaskName'); - } else if (values.taskTitle.length > CONST.TITLE_CHARACTER_LIMIT) { - ErrorUtils.addErrorMessage(errors, 'taskTitle', ['common.error.characterLimitExceedCounter', {length: values.taskTitle.length, limit: CONST.TITLE_CHARACTER_LIMIT}]); - } - if (values.taskDescription.length > CONST.DESCRIPTION_LIMIT) { - ErrorUtils.addErrorMessage(errors, 'taskDescription', ['common.error.characterLimitExceedCounter', {length: values.taskDescription.length, limit: CONST.DESCRIPTION_LIMIT}]); - } - - return errors; - }; - - // On submit, we want to call the assignTask function and wait to validate - // the response - const onSubmit = (values: FormOnyxValues) => { - TaskActions.setDetailsValue(values.taskTitle, values.taskDescription); - Navigation.navigate(ROUTES.NEW_TASK); - }; - - return ( - - TaskActions.dismissModalAndClearOutTaskInfo()} - shouldShowBackButton - onBackButtonPress={() => TaskActions.dismissModalAndClearOutTaskInfo()} - /> - - - - - - - - - - ); -} - -NewTaskDetailsPage.displayName = 'NewTaskDetailsPage'; - -export default withOnyx({ - task: { - key: ONYXKEYS.TASK, - }, -})(NewTaskDetailsPage); diff --git a/src/pages/tasks/NewTaskDetailsPage.tsx b/src/pages/tasks/NewTaskDetailsPage.tsx index a7d98724a2f1..f51a8acf0251 100644 --- a/src/pages/tasks/NewTaskDetailsPage.tsx +++ b/src/pages/tasks/NewTaskDetailsPage.tsx @@ -1,3 +1,4 @@ +import type {StackScreenProps} from '@react-navigation/stack'; import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; @@ -5,7 +6,7 @@ import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; -import type {FormOnyxValues} from '@components/Form/types'; +import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import TextInput from '@components/TextInput'; @@ -14,25 +15,29 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {NewTaskNavigatorParamList} from '@libs/Navigation/types'; import * as TaskActions from '@userActions/Task'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/NewTaskForm'; import type {Task} from '@src/types/onyx'; -type NewTaskDetailsPageProps = { +type NewTaskDetailsPageOnyxProps = { /** Grab the Share title of the Task */ task: OnyxEntry; }; +type NewTaskDetailsPageProps = NewTaskDetailsPageOnyxProps & StackScreenProps; + const parser = new ExpensiMark(); function NewTaskDetailsPage({task}: NewTaskDetailsPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const [taskTitle, setTaskTitle] = useState(task?.title ?? ''); - const [taskDescription, setTaskDescription] = useState(task?.description ?? ''); + const [taskTitle, setTaskTitle] = useState(task?.title ?? ''); + const [taskDescription, setTaskDescription] = useState(task?.description ?? ''); const {inputCallbackRef} = useAutoFocusInput(); @@ -41,7 +46,7 @@ function NewTaskDetailsPage({task}: NewTaskDetailsPageProps) { setTaskDescription(parser.htmlToMarkdown(parser.replace(task?.description ?? ''))); }, [task]); - const validate = (values: FormOnyxValues) => { + const validate = (values: FormOnyxValues): FormInputErrors => { const errors = {}; if (!values.taskTitle) { @@ -121,7 +126,7 @@ function NewTaskDetailsPage({task}: NewTaskDetailsPageProps) { NewTaskDetailsPage.displayName = 'NewTaskDetailsPage'; -export default withOnyx({ +export default withOnyx({ task: { key: ONYXKEYS.TASK, }, diff --git a/src/pages/tasks/NewTaskPage.tsx b/src/pages/tasks/NewTaskPage.tsx index 3ca6e998d534..62a513a75265 100644 --- a/src/pages/tasks/NewTaskPage.tsx +++ b/src/pages/tasks/NewTaskPage.tsx @@ -1,3 +1,4 @@ +import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useMemo, useState} from 'react'; import {ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; @@ -12,16 +13,18 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; +import type {NewTaskNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; import playSound, {SOUNDS} from '@libs/Sound'; import * as TaskActions from '@userActions/Task'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; import type {PersonalDetailsList, Report, Task} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type NewTaskPageProps = { +type NewTaskPageOnyxProps = { /** Task Creation Data */ task: OnyxEntry; @@ -32,11 +35,16 @@ type NewTaskPageProps = { reports: OnyxCollection; }; +type NewTaskPageProps = NewTaskPageOnyxProps & StackScreenProps; + function NewTaskPage({task, reports, personalDetails}: NewTaskPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const [assignee, setAssignee] = useState(); - const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([task?.assigneeAccountID ?? 0], personalDetails), false); + const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips( + OptionsListUtils.getPersonalDetailsForAccountIDs(task?.assigneeAccountID ? [task.assigneeAccountID] : [], personalDetails), + false, + ); const [shareDestination, setShareDestination] = useState(); const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); @@ -51,7 +59,7 @@ function NewTaskPage({task, reports, personalDetails}: NewTaskPageProps) { // If we have an assignee, we want to set the assignee data // If there's an issue with the assignee chosen, we want to notify the user if (task?.assignee) { - const displayDetails = TaskActions.getAssignee(task?.assigneeAccountID ?? 0, personalDetails); + const displayDetails = TaskActions.getAssignee(task?.assigneeAccountID ?? -1, personalDetails); setAssignee(displayDetails); } @@ -83,7 +91,7 @@ function NewTaskPage({task, reports, personalDetails}: NewTaskPageProps) { // On submit, we want to call the createTask function and wait to validate // the response - function onSubmit() { + const onSubmit = () => { if (!task?.title && !task?.shareDestination) { setErrorMessage('newTaskPage.confirmError'); return; @@ -109,7 +117,7 @@ function NewTaskPage({task, reports, personalDetails}: NewTaskPageProps) { task.assigneeChatReport, parentReport?.policyID, ); - } + }; return ( - + onSubmit()} + onSubmit={onSubmit} enabledWhenOffline buttonText={translate('newTaskPage.confirmTask')} containerStyles={[styles.mh0, styles.mt5, styles.flex1, styles.ph5]} @@ -193,7 +201,7 @@ function NewTaskPage({task, reports, personalDetails}: NewTaskPageProps) { NewTaskPage.displayName = 'NewTaskPage'; -export default withOnyx({ +export default withOnyx({ task: { key: ONYXKEYS.TASK, }, diff --git a/src/pages/tasks/NewTaskTitlePage.tsx b/src/pages/tasks/NewTaskTitlePage.tsx index 4bf6f7bee6f5..0eec7a272a79 100644 --- a/src/pages/tasks/NewTaskTitlePage.tsx +++ b/src/pages/tasks/NewTaskTitlePage.tsx @@ -1,10 +1,11 @@ +import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; import InputWrapperWithRef from '@components/Form/InputWrapper'; -import type {FormOnyxValues} from '@components/Form/types'; +import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import TextInput from '@components/TextInput'; @@ -13,17 +14,20 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; +import type {NewTaskNavigatorParamList} from '@libs/Navigation/types'; import * as TaskActions from '@userActions/Task'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/NewTaskForm'; import type {Task} from '@src/types/onyx'; -type NewTaskTitlePageProps = { +type NewTaskTitlePageOnyxProps = { /** Grab the Share title of the Task */ task: OnyxEntry; }; +type NewTaskTitlePageProps = NewTaskTitlePageOnyxProps & StackScreenProps; function NewTaskTitlePage({task}: NewTaskTitlePageProps) { const styles = useThemeStyles(); @@ -31,7 +35,7 @@ function NewTaskTitlePage({task}: NewTaskTitlePageProps) { const {translate} = useLocalize(); - const validate = (values: FormOnyxValues) => { + const validate = (values: FormOnyxValues): FormInputErrors => { const errors = {}; if (!values.taskTitle) { @@ -89,7 +93,7 @@ function NewTaskTitlePage({task}: NewTaskTitlePageProps) { NewTaskTitlePage.displayName = 'NewTaskTitlePage'; -export default withOnyx({ +export default withOnyx({ task: { key: ONYXKEYS.TASK, },