Merge pull request #36819 from aswin-s/fix/issue-34324

fix: prevent lag when adding code block in task description
Expensify · Feb 27, 2024 · e4c2ee2 · e4c2ee2
2 parents 174a032 + d4b599f
commit e4c2ee2
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -101,7 +101,7 @@
     "date-fns-tz": "^2.0.0",
     "dom-serializer": "^0.2.2",
     "domhandler": "^4.3.0",
-    "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#a8ed0f8e1be3a1e09016e07a74cfd13c85bbc167",
+    "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#83ae6194b3e4feb363ea9d061085a7ab76e35ffb",
     "expo": "^50.0.3",
     "expo-av": "~13.10.4",
     "expo-image": "1.10.1",

diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -1,6 +1,6 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
@@ -42,6 +42,7 @@ const parser = new ExpensiMark();
 function NewTaskDescriptionPage(props) {
     const styles = useThemeStyles();
     const {inputCallbackRef} = useAutoFocusInput();
+    const defaultDescriptionValue = useMemo(() => parser.htmlToMarkdown(parser.replace(props.task.description)), [props.task.description]);
 
     const onSubmit = (values) => {
         Task.setDescriptionValue(values.taskDescription);
@@ -85,7 +86,7 @@ function NewTaskDescriptionPage(props) {
                     <View style={styles.mb5}>
                         <InputWrapperWithRef
                             InputComponent={TextInput}
-                            defaultValue={parser.htmlToMarkdown(parser.replace(props.task.description))}
+                            defaultValue={defaultDescriptionValue}
                             inputID={INPUT_IDS.TASK_DESCRIPTION}
                             label={props.translate('newTaskPage.descriptionOptional')}
                             accessibilityLabel={props.translate('newTaskPage.descriptionOptional')}

diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
@@ -1,6 +1,6 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import PropTypes from 'prop-types';
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
@@ -42,11 +42,12 @@ function NewTaskDetailsPage(props) {
     const [taskDescription, setTaskDescription] = useState(props.task.description || '');
 
     const {inputCallbackRef} = useAutoFocusInput();
+    const defaultDescriptionValue = useMemo(() => parser.htmlToMarkdown(parser.replace(taskDescription)), [taskDescription]);
 
     useEffect(() => {
         setTaskTitle(props.task.title);
         setTaskDescription(parser.htmlToMarkdown(parser.replace(props.task.description || '')));
-    }, [props.task]);
+    }, [props.task.title, props.task.description]);
 
     /**
      * @param {Object} values - form input values passed by the Form component
@@ -118,7 +119,7 @@ function NewTaskDetailsPage(props) {
                         autoGrowHeight
                         shouldSubmitForm
                         containerStyles={[styles.autoGrowHeightMultilineInput]}
-                        defaultValue={parser.htmlToMarkdown(parser.replace(taskDescription))}
+                        defaultValue={defaultDescriptionValue}
                         value={taskDescription}
                         onValueChange={(value) => setTaskDescription(value)}
                     />

diff --git a/src/pages/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js
@@ -1,6 +1,6 @@
 import {useFocusEffect} from '@react-navigation/native';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import React, {useCallback, useRef} from 'react';
+import React, {useCallback, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
@@ -80,6 +80,7 @@ function TaskDescriptionPage(props) {
     const isOpen = ReportUtils.isOpenTaskReport(props.report);
     const canModifyTask = Task.canModifyTask(props.report, props.currentUserPersonalDetails.accountID);
     const isTaskNonEditable = ReportUtils.isTaskReport(props.report) && (!canModifyTask || !isOpen);
+    const defaultDescriptionValue = useMemo(() => parser.htmlToMarkdown((props.report && parser.replace(props.report.description)) || ''), [props.report]);
 
     useFocusEffect(
         useCallback(() => {
@@ -121,7 +122,7 @@ function TaskDescriptionPage(props) {
                             name={INPUT_IDS.DESCRIPTION}
                             label={props.translate('newTaskPage.descriptionOptional')}
                             accessibilityLabel={props.translate('newTaskPage.descriptionOptional')}
-                            defaultValue={parser.htmlToMarkdown((props.report && parser.replace(props.report.description)) || '')}
+                            defaultValue={defaultDescriptionValue}
                             ref={(el) => {
                                 if (!el) {
                                     return;