From 56ae3dfbf17a270de55e2616a10e240f780ec625 Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Thu, 23 Nov 2023 10:52:03 +0700 Subject: [PATCH 1/7] fix no error message when editing a chat --- src/components/ExceededCommentLength.js | 44 +++---------------- .../ComposerWithSuggestions.js | 12 +++++ .../ReportActionCompose.js | 7 ++- .../report/ReportActionItemMessageEdit.js | 16 ++++--- 4 files changed, 31 insertions(+), 48 deletions(-) diff --git a/src/components/ExceededCommentLength.js b/src/components/ExceededCommentLength.js index 6353bdf40283..2cc1c50e2f66 100644 --- a/src/components/ExceededCommentLength.js +++ b/src/components/ExceededCommentLength.js @@ -1,52 +1,23 @@ -import {debounce} from 'lodash'; import PropTypes from 'prop-types'; -import React, {useEffect, useMemo, useState} from 'react'; -import {withOnyx} from 'react-native-onyx'; +import React from 'react'; import useLocalize from '@hooks/useLocalize'; -import * as ReportUtils from '@libs/ReportUtils'; import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import Text from './Text'; const propTypes = { - /** Report ID to get the comment from (used in withOnyx) */ - // eslint-disable-next-line react/no-unused-prop-types - reportID: PropTypes.string.isRequired, - - /** Text Comment */ - comment: PropTypes.string, - - /** Update UI on parent when comment length is exceeded */ - onExceededMaxCommentLength: PropTypes.func.isRequired, + shouldShowError: PropTypes.bool.isRequired, }; -const defaultProps = { - comment: '', -}; +const defaultProps = {}; function ExceededCommentLength(props) { const styles = useThemeStyles(); const {numberFormat, translate} = useLocalize(); - const [commentLength, setCommentLength] = useState(0); - const updateCommentLength = useMemo( - () => - debounce((comment, onExceededMaxCommentLength) => { - const newCommentLength = ReportUtils.getCommentLength(comment); - setCommentLength(newCommentLength); - onExceededMaxCommentLength(newCommentLength > CONST.MAX_COMMENT_LENGTH); - }, CONST.TIMING.COMMENT_LENGTH_DEBOUNCE_TIME), - [], - ); - - useEffect(() => { - updateCommentLength(props.comment, props.onExceededMaxCommentLength); - }, [props.comment, props.onExceededMaxCommentLength, updateCommentLength]); - if (commentLength <= CONST.MAX_COMMENT_LENGTH) { + if (!props.shouldShowError) { return null; } - return ( `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`, - initialValue: '', - }, -})(ExceededCommentLength); +export default ExceededCommentLength; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index e376e8481c0c..234a066a1047 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -104,6 +104,8 @@ function ComposerWithSuggestions({ forwardedRef, isNextModalWillOpenRef, editFocused, + setExceededMaxCommentLength, + hasExceededMaxCommentLength, // For testing children, }) { @@ -526,6 +528,16 @@ function ComposerWithSuggestions({ [blur, focus, prepareCommentAndResetComposer, replaceSelectionWithText], ); + useEffect(() => { + if (ReportUtils.getCommentLength(value) <= CONST.MAX_COMMENT_LENGTH) { + if (hasExceededMaxCommentLength) { + setExceededMaxCommentLength(false); + } + return; + } + setExceededMaxCommentLength(true); + }, [value, setExceededMaxCommentLength, hasExceededMaxCommentLength]); + return ( <> diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 7bce37dc3826..5ec94a09960c 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -416,6 +416,8 @@ function ReportActionCompose({ onBlur={onBlur} measureParentContainer={measureContainer} listHeight={listHeight} + setExceededMaxCommentLength={setExceededMaxCommentLength} + hasExceededMaxCommentLength={hasExceededMaxCommentLength} /> { @@ -452,10 +454,7 @@ function ReportActionCompose({ > {!isSmallScreenWidth && } - + diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index b723ddd93582..3e47c5c7790f 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -365,6 +365,16 @@ function ReportActionItemMessageEdit(props) { */ const focus = focusComposerWithDelay(textInputRef.current); + useEffect(() => { + if (ReportUtils.getCommentLength(draft) <= CONST.MAX_COMMENT_LENGTH) { + if (hasExceededMaxCommentLength) { + setHasExceededMaxCommentLength(false); + } + return; + } + setHasExceededMaxCommentLength(true); + }, [draft, hasExceededMaxCommentLength]); + return ( <> @@ -466,11 +476,7 @@ function ReportActionItemMessageEdit(props) { - setHasExceededMaxCommentLength(hasExceeded)} - /> + ); } From 9344c1ee0eb294350359a4a5cdd8359673837201 Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Tue, 28 Nov 2023 20:29:51 +0700 Subject: [PATCH 2/7] fix refactor the onValueChange --- .../ComposerWithSuggestions.js | 13 +++---------- .../ReportActionCompose/ReportActionCompose.js | 16 ++++++++++++++-- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index 234a066a1047..d24a74e0c505 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -82,6 +82,7 @@ function ComposerWithSuggestions({ // Focus onFocus, onBlur, + onValueChange, // Composer isComposerFullSize, isMenuVisible, @@ -104,8 +105,6 @@ function ComposerWithSuggestions({ forwardedRef, isNextModalWillOpenRef, editFocused, - setExceededMaxCommentLength, - hasExceededMaxCommentLength, // For testing children, }) { @@ -529,14 +528,8 @@ function ComposerWithSuggestions({ ); useEffect(() => { - if (ReportUtils.getCommentLength(value) <= CONST.MAX_COMMENT_LENGTH) { - if (hasExceededMaxCommentLength) { - setExceededMaxCommentLength(false); - } - return; - } - setExceededMaxCommentLength(true); - }, [value, setExceededMaxCommentLength, hasExceededMaxCommentLength]); + onValueChange(value); + }, [onValueChange, value]); return ( <> diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 5ec94a09960c..3e5e98df157b 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -342,6 +342,19 @@ function ReportActionCompose({ runOnJS(submitForm)(); }, [isSendDisabled, resetFullComposerSize, submitForm, animatedRef, isReportReadyForDisplay]); + const handleValueChange = useCallback( + (value) => { + if (ReportUtils.getCommentLength(value) <= CONST.MAX_COMMENT_LENGTH) { + if (hasExceededMaxCommentLength) { + setExceededMaxCommentLength(false); + } + return; + } + setExceededMaxCommentLength(true); + }, + [hasExceededMaxCommentLength], + ); + return ( @@ -416,8 +429,7 @@ function ReportActionCompose({ onBlur={onBlur} measureParentContainer={measureContainer} listHeight={listHeight} - setExceededMaxCommentLength={setExceededMaxCommentLength} - hasExceededMaxCommentLength={hasExceededMaxCommentLength} + onValueChange={handleValueChange} /> { From dd81868f68ccc2dc65652d813497df40f341f2cb Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Wed, 6 Dec 2023 21:35:33 +0700 Subject: [PATCH 3/7] fix perf issue --- .../ReportActionCompose.js | 4 ++- .../report/ReportActionItemMessageEdit.js | 25 +++++++++++++------ 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 3e666c6284ae..c5e9c94f7464 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -344,6 +344,8 @@ function ReportActionCompose({ [hasExceededMaxCommentLength], ); + const handleValueChangeDebounce = useMemo(() => _.debounce(handleValueChange, 1500), [handleValueChange]); + return ( @@ -421,7 +423,7 @@ function ReportActionCompose({ onBlur={onBlur} measureParentContainer={measureContainer} listHeight={listHeight} - onValueChange={handleValueChange} + onValueChange={handleValueChangeDebounce} /> { diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 8aa2d7092d89..a1dc6c2f4a32 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -368,15 +368,24 @@ function ReportActionItemMessageEdit(props) { */ const focus = focusComposerWithDelay(textInputRef.current); - useEffect(() => { - if (ReportUtils.getCommentLength(draft) <= CONST.MAX_COMMENT_LENGTH) { - if (hasExceededMaxCommentLength) { - setHasExceededMaxCommentLength(false); + const handleValueChange = useCallback( + (value) => { + if (ReportUtils.getCommentLength(value) <= CONST.MAX_COMMENT_LENGTH) { + if (hasExceededMaxCommentLength) { + setHasExceededMaxCommentLength(false); + } + return; } - return; - } - setHasExceededMaxCommentLength(true); - }, [draft, hasExceededMaxCommentLength]); + setHasExceededMaxCommentLength(true); + }, + [hasExceededMaxCommentLength], + ); + + const handleValueChangeDebounce = useMemo(() => _.debounce(handleValueChange, 1500), [handleValueChange]); + + useEffect(() => { + handleValueChangeDebounce(draft); + }, [draft, handleValueChangeDebounce]); return ( <> From 89094202dcb731fa5d4ba9a75ff99c0757ff9f5d Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Tue, 12 Dec 2023 23:35:45 +0700 Subject: [PATCH 4/7] fix create useHandleExceedMaxCommentLength --- src/hooks/useHandleExceedMaxCommentLength.ts | 26 +++++++++++++++++++ .../ReportActionCompose.js | 18 ++----------- .../report/ReportActionItemMessageEdit.js | 18 ++----------- 3 files changed, 30 insertions(+), 32 deletions(-) create mode 100644 src/hooks/useHandleExceedMaxCommentLength.ts diff --git a/src/hooks/useHandleExceedMaxCommentLength.ts b/src/hooks/useHandleExceedMaxCommentLength.ts new file mode 100644 index 000000000000..4ecd3b466c4a --- /dev/null +++ b/src/hooks/useHandleExceedMaxCommentLength.ts @@ -0,0 +1,26 @@ +import {useCallback, useMemo, useState} from 'react'; +import * as ReportUtils from '@libs/ReportUtils'; +import CONST from '@src/CONST'; + +const useHandleExceedMaxCommentLength = () => { + const [hasExceededMaxCommentLength, setHasExceededMaxCommentLength] = useState(false); + + const handleValueChange = useCallback( + (value: string) => { + if (ReportUtils.getCommentLength(value) <= CONST.MAX_COMMENT_LENGTH) { + if (hasExceededMaxCommentLength) { + setHasExceededMaxCommentLength(false); + } + return; + } + setHasExceededMaxCommentLength(true); + }, + [hasExceededMaxCommentLength], + ); + + const handleValueChangeDebounce = useMemo(() => _.debounce(handleValueChange, 1500), [handleValueChange]); + + return {hasExceededMaxCommentLength, handleValueChangeDebounce}; +}; + +export default useHandleExceedMaxCommentLength; diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index c5e9c94f7464..f107b4d76007 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -13,6 +13,7 @@ import OfflineIndicator from '@components/OfflineIndicator'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {usePersonalDetails, withNetwork} from '@components/OnyxProvider'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; +import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength'; import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; @@ -144,7 +145,7 @@ function ReportActionCompose({ * Updates the composer when the comment length is exceeded * Shows red borders and prevents the comment from being sent */ - const [hasExceededMaxCommentLength, setExceededMaxCommentLength] = useState(false); + const {handleValueChangeDebounce, hasExceededMaxCommentLength} = useHandleExceedMaxCommentLength(); const suggestionsRef = useRef(null); const composerRef = useRef(null); @@ -331,21 +332,6 @@ function ReportActionCompose({ runOnJS(submitForm)(); }, [isSendDisabled, resetFullComposerSize, submitForm, animatedRef, isReportReadyForDisplay]); - const handleValueChange = useCallback( - (value) => { - if (ReportUtils.getCommentLength(value) <= CONST.MAX_COMMENT_LENGTH) { - if (hasExceededMaxCommentLength) { - setExceededMaxCommentLength(false); - } - return; - } - setExceededMaxCommentLength(true); - }, - [hasExceededMaxCommentLength], - ); - - const handleValueChangeDebounce = useMemo(() => _.debounce(handleValueChange, 1500), [handleValueChange]); - return ( diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index a1dc6c2f4a32..2ff3deed97c8 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -13,6 +13,7 @@ import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import refPropTypes from '@components/refPropTypes'; import Tooltip from '@components/Tooltip'; +import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; import useReportScrollManager from '@hooks/useReportScrollManager'; @@ -115,7 +116,7 @@ function ReportActionItemMessageEdit(props) { }); const [selection, setSelection] = useState(getInitialSelection); const [isFocused, setIsFocused] = useState(false); - const [hasExceededMaxCommentLength, setHasExceededMaxCommentLength] = useState(false); + const {handleValueChangeDebounce, hasExceededMaxCommentLength} = useHandleExceedMaxCommentLength(); const [modal, setModal] = useState(false); const [onyxFocused, setOnyxFocused] = useState(false); @@ -368,21 +369,6 @@ function ReportActionItemMessageEdit(props) { */ const focus = focusComposerWithDelay(textInputRef.current); - const handleValueChange = useCallback( - (value) => { - if (ReportUtils.getCommentLength(value) <= CONST.MAX_COMMENT_LENGTH) { - if (hasExceededMaxCommentLength) { - setHasExceededMaxCommentLength(false); - } - return; - } - setHasExceededMaxCommentLength(true); - }, - [hasExceededMaxCommentLength], - ); - - const handleValueChangeDebounce = useMemo(() => _.debounce(handleValueChange, 1500), [handleValueChange]); - useEffect(() => { handleValueChangeDebounce(draft); }, [draft, handleValueChangeDebounce]); From 80638787c5b35943af978a5f9a4ba053d4ae6419 Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Tue, 12 Dec 2023 23:42:55 +0700 Subject: [PATCH 5/7] fix add underscore lib --- src/hooks/useHandleExceedMaxCommentLength.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/hooks/useHandleExceedMaxCommentLength.ts b/src/hooks/useHandleExceedMaxCommentLength.ts index 4ecd3b466c4a..70c185ce204f 100644 --- a/src/hooks/useHandleExceedMaxCommentLength.ts +++ b/src/hooks/useHandleExceedMaxCommentLength.ts @@ -1,4 +1,5 @@ import {useCallback, useMemo, useState} from 'react'; +import _ from 'underscore'; import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; From 62718fcb6732184f90e3fdf6474c07ab629c329b Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Tue, 12 Dec 2023 23:51:29 +0700 Subject: [PATCH 6/7] fix add lodash lib --- src/hooks/useHandleExceedMaxCommentLength.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useHandleExceedMaxCommentLength.ts b/src/hooks/useHandleExceedMaxCommentLength.ts index 70c185ce204f..6a9b6997f5ea 100644 --- a/src/hooks/useHandleExceedMaxCommentLength.ts +++ b/src/hooks/useHandleExceedMaxCommentLength.ts @@ -1,5 +1,5 @@ +import _ from 'lodash'; import {useCallback, useMemo, useState} from 'react'; -import _ from 'underscore'; import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; From 37acb422288ac5f7a18369ba62643ccd788b76c9 Mon Sep 17 00:00:00 2001 From: DylanDylann Date: Wed, 13 Dec 2023 15:05:25 +0700 Subject: [PATCH 7/7] fix rename function --- src/hooks/useHandleExceedMaxCommentLength.ts | 4 ++-- .../home/report/ReportActionCompose/ReportActionCompose.js | 4 ++-- src/pages/home/report/ReportActionItemMessageEdit.js | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/hooks/useHandleExceedMaxCommentLength.ts b/src/hooks/useHandleExceedMaxCommentLength.ts index 6a9b6997f5ea..9700999bb004 100644 --- a/src/hooks/useHandleExceedMaxCommentLength.ts +++ b/src/hooks/useHandleExceedMaxCommentLength.ts @@ -19,9 +19,9 @@ const useHandleExceedMaxCommentLength = () => { [hasExceededMaxCommentLength], ); - const handleValueChangeDebounce = useMemo(() => _.debounce(handleValueChange, 1500), [handleValueChange]); + const validateCommentMaxLength = useMemo(() => _.debounce(handleValueChange, 1500), [handleValueChange]); - return {hasExceededMaxCommentLength, handleValueChangeDebounce}; + return {hasExceededMaxCommentLength, validateCommentMaxLength}; }; export default useHandleExceedMaxCommentLength; diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index f107b4d76007..3d29aa4918ad 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -145,7 +145,7 @@ function ReportActionCompose({ * Updates the composer when the comment length is exceeded * Shows red borders and prevents the comment from being sent */ - const {handleValueChangeDebounce, hasExceededMaxCommentLength} = useHandleExceedMaxCommentLength(); + const {hasExceededMaxCommentLength, validateCommentMaxLength} = useHandleExceedMaxCommentLength(); const suggestionsRef = useRef(null); const composerRef = useRef(null); @@ -409,7 +409,7 @@ function ReportActionCompose({ onBlur={onBlur} measureParentContainer={measureContainer} listHeight={listHeight} - onValueChange={handleValueChangeDebounce} + onValueChange={validateCommentMaxLength} /> { diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 2ff3deed97c8..6c4ad03a11e6 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -116,7 +116,7 @@ function ReportActionItemMessageEdit(props) { }); const [selection, setSelection] = useState(getInitialSelection); const [isFocused, setIsFocused] = useState(false); - const {handleValueChangeDebounce, hasExceededMaxCommentLength} = useHandleExceedMaxCommentLength(); + const {hasExceededMaxCommentLength, validateCommentMaxLength} = useHandleExceedMaxCommentLength(); const [modal, setModal] = useState(false); const [onyxFocused, setOnyxFocused] = useState(false); @@ -370,8 +370,8 @@ function ReportActionItemMessageEdit(props) { const focus = focusComposerWithDelay(textInputRef.current); useEffect(() => { - handleValueChangeDebounce(draft); - }, [draft, handleValueChangeDebounce]); + validateCommentMaxLength(draft); + }, [draft, validateCommentMaxLength]); return ( <>