address comments

Expensify · Feb 22, 2024 · f16ad88 · f16ad88
1 parent 329aa95
commit f16ad88
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 150 deletions.
diff --git a/src/pages/tasks/NewTaskDescriptionPage.tsx b/src/pages/tasks/NewTaskDescriptionPage.tsx
@@ -1,11 +1,12 @@
+import type {StackScreenProps} from '@react-navigation/stack';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 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';
@@ -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<Task>;
 };
 
+type NewTaskDescriptionPageProps = NewTaskDescriptionPageOnyxProps & StackScreenProps<NewTaskNavigatorParamList, typeof SCREENS.NEW_TASK.DESCRIPTION>;
+
 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<typeof ONYXKEYS.FORMS.NEW_TASK_FORM>) => {
+    const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.NEW_TASK_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.NEW_TASK_FORM> => {
         const errors = {};
 
         if (values.taskDescription.length > CONST.DESCRIPTION_LIMIT) {
@@ -94,7 +99,7 @@ function NewTaskDescriptionPage({task}: NewTaskDescriptionPageProps) {
 
 NewTaskDescriptionPage.displayName = 'NewTaskDescriptionPage';
 
-export default withOnyx<NewTaskDescriptionPageProps, NewTaskDescriptionPageProps>({
+export default withOnyx<NewTaskDescriptionPageProps, NewTaskDescriptionPageOnyxProps>({
     task: {
         key: ONYXKEYS.TASK,
     },

diff --git a/src/pages/tasks/NewTaskDetailsPage copy.tsx b/src/pages/tasks/NewTaskDetailsPage copy.tsx
diff --git a/src/pages/tasks/NewTaskDetailsPage.tsx b/src/pages/tasks/NewTaskDetailsPage.tsx
@@ -1,11 +1,12 @@
+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';
 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<Task>;
 };
 
+type NewTaskDetailsPageProps = NewTaskDetailsPageOnyxProps & StackScreenProps<NewTaskNavigatorParamList, typeof SCREENS.NEW_TASK.DETAILS>;
+
 const parser = new ExpensiMark();
 
 function NewTaskDetailsPage({task}: NewTaskDetailsPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const [taskTitle, setTaskTitle] = useState<string>(task?.title ?? '');
-    const [taskDescription, setTaskDescription] = useState<string>(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<typeof ONYXKEYS.FORMS.NEW_TASK_FORM>) => {
+    const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.NEW_TASK_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.NEW_TASK_FORM> => {
         const errors = {};
 
         if (!values.taskTitle) {
@@ -121,7 +126,7 @@ function NewTaskDetailsPage({task}: NewTaskDetailsPageProps) {
 
 NewTaskDetailsPage.displayName = 'NewTaskDetailsPage';
 
-export default withOnyx<NewTaskDetailsPageProps, NewTaskDetailsPageProps>({
+export default withOnyx<NewTaskDetailsPageProps, NewTaskDetailsPageOnyxProps>({
     task: {
         key: ONYXKEYS.TASK,
     },

diff --git 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<Task>;
 
@@ -32,11 +35,16 @@ type NewTaskPageProps = {
     reports: OnyxCollection<Report>;
 };
 
+type NewTaskPageProps = NewTaskPageOnyxProps & StackScreenProps<NewTaskNavigatorParamList, typeof SCREENS.NEW_TASK.ROOT>;
+
 function NewTaskPage({task, reports, personalDetails}: NewTaskPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [assignee, setAssignee] = useState<TaskActions.Assignee>();
-    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<TaskActions.ShareDestination>();
     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 (
         <ScreenWrapper
@@ -175,11 +183,11 @@ function NewTaskPage({task, reports, personalDetails}: NewTaskPageProps) {
                             />
                         </View>
                     </View>
-                    <View style={[styles.flexShrink0]}>
+                    <View style={styles.flexShrink0}>
                         <FormAlertWithSubmitButton
                             isAlertVisible={!isEmptyObject(errorMessage)}
                             message={errorMessage}
-                            onSubmit={() => 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<NewTaskPageProps, NewTaskPageProps>({
+export default withOnyx<NewTaskPageProps, NewTaskPageOnyxProps>({
     task: {
         key: ONYXKEYS.TASK,
     },

diff --git 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,25 +14,28 @@ 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<Task>;
 };
+type NewTaskTitlePageProps = NewTaskTitlePageOnyxProps & StackScreenProps<NewTaskNavigatorParamList, typeof SCREENS.NEW_TASK.TITLE>;
 
 function NewTaskTitlePage({task}: NewTaskTitlePageProps) {
     const styles = useThemeStyles();
     const {inputCallbackRef} = useAutoFocusInput();
 
     const {translate} = useLocalize();
 
-    const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.NEW_TASK_FORM>) => {
+    const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.NEW_TASK_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.NEW_TASK_FORM> => {
         const errors = {};
 
         if (!values.taskTitle) {
@@ -89,7 +93,7 @@ function NewTaskTitlePage({task}: NewTaskTitlePageProps) {
 
 NewTaskTitlePage.displayName = 'NewTaskTitlePage';
 
-export default withOnyx<NewTaskTitlePageProps, NewTaskTitlePageProps>({
+export default withOnyx<NewTaskTitlePageProps, NewTaskTitlePageOnyxProps>({
     task: {
         key: ONYXKEYS.TASK,
     },