From 40cb3d8d089eb9d6a151eb1688382a13c027ca67 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Fri, 20 Oct 2023 14:13:08 +0200 Subject: [PATCH 1/8] Rename ExceededCommentLength --- .../{ExceededCommentLength.js => ExceededCommentLength.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/{ExceededCommentLength.js => ExceededCommentLength.tsx} (100%) diff --git a/src/components/ExceededCommentLength.js b/src/components/ExceededCommentLength.tsx similarity index 100% rename from src/components/ExceededCommentLength.js rename to src/components/ExceededCommentLength.tsx From 8b13df9ff5f986cdcbf97dcb0e8b340f4fe048bd Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 14 Nov 2023 14:59:34 +0100 Subject: [PATCH 2/8] [TS migration] Migrate 'ExceededCommentLength.js' component to TypeScript --- src/components/ExceededCommentLength.tsx | 29 +++++++++--------------- src/components/LocaleContextProvider.tsx | 2 +- 2 files changed, 12 insertions(+), 19 deletions(-) diff --git a/src/components/ExceededCommentLength.tsx b/src/components/ExceededCommentLength.tsx index 43589be566ff..f1d2321c6a26 100644 --- a/src/components/ExceededCommentLength.tsx +++ b/src/components/ExceededCommentLength.tsx @@ -1,5 +1,4 @@ -import {debounce} from 'lodash'; -import PropTypes from 'prop-types'; +import debounce from 'lodash/debounce'; import React, {useEffect, useMemo, useState} from 'react'; import {withOnyx} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; @@ -9,38 +8,34 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import Text from './Text'; -const propTypes = { +type ExceededCommentLengthProps = { /** Report ID to get the comment from (used in withOnyx) */ // eslint-disable-next-line react/no-unused-prop-types - reportID: PropTypes.string.isRequired, + reportID: string; /** Text Comment */ - comment: PropTypes.string, + comment: string; /** Update UI on parent when comment length is exceeded */ - onExceededMaxCommentLength: PropTypes.func.isRequired, + onExceededMaxCommentLength: () => void; }; -const defaultProps = { - comment: '', -}; - -function ExceededCommentLength(props) { +function ExceededCommentLength({comment = '', onExceededMaxCommentLength}: ExceededCommentLengthProps) { const {numberFormat, translate} = useLocalize(); const [commentLength, setCommentLength] = useState(0); const updateCommentLength = useMemo( () => - debounce((comment, onExceededMaxCommentLength) => { - const newCommentLength = ReportUtils.getCommentLength(comment); + debounce((newComment, onExceededMaxCommentLengthCallabck) => { + const newCommentLength = ReportUtils.getCommentLength(newComment); setCommentLength(newCommentLength); - onExceededMaxCommentLength(newCommentLength > CONST.MAX_COMMENT_LENGTH); + onExceededMaxCommentLengthCallabck(newCommentLength > CONST.MAX_COMMENT_LENGTH); }, CONST.TIMING.COMMENT_LENGTH_DEBOUNCE_TIME), [], ); useEffect(() => { - updateCommentLength(props.comment, props.onExceededMaxCommentLength); - }, [props.comment, props.onExceededMaxCommentLength, updateCommentLength]); + updateCommentLength(comment, onExceededMaxCommentLength); + }, [comment, onExceededMaxCommentLength, updateCommentLength]); if (commentLength <= CONST.MAX_COMMENT_LENGTH) { return null; @@ -56,8 +51,6 @@ function ExceededCommentLength(props) { ); } -ExceededCommentLength.propTypes = propTypes; -ExceededCommentLength.defaultProps = defaultProps; ExceededCommentLength.displayName = 'ExceededCommentLength'; export default withOnyx({ diff --git a/src/components/LocaleContextProvider.tsx b/src/components/LocaleContextProvider.tsx index 2fa4e1c749e6..8078798ea5c2 100644 --- a/src/components/LocaleContextProvider.tsx +++ b/src/components/LocaleContextProvider.tsx @@ -30,7 +30,7 @@ type LocaleContextProps = { translate: (phraseKey: TKey, ...phraseParameters: Localize.PhraseParameters>) => string; /** Formats number formatted according to locale and options */ - numberFormat: (number: number, options: Intl.NumberFormatOptions) => string; + numberFormat: (number: number, options?: Intl.NumberFormatOptions) => string; /** Converts a datetime into a localized string representation that's relative to current moment in time */ datetimeToRelative: (datetime: string) => string; From 8f4c6599585449802681342137feae0cb768de53 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Sun, 19 Nov 2023 15:11:04 +0100 Subject: [PATCH 3/8] fix: onyx types --- src/components/ExceededCommentLength.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/ExceededCommentLength.tsx b/src/components/ExceededCommentLength.tsx index f1d2321c6a26..3fc5bf772954 100644 --- a/src/components/ExceededCommentLength.tsx +++ b/src/components/ExceededCommentLength.tsx @@ -6,8 +6,13 @@ import * as ReportUtils from '@libs/ReportUtils'; import styles from '@styles/styles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import {OnyxEntry} from "react-native-onyx/lib/types"; import Text from './Text'; +type ExceededCommentLengthOnyxProps = { + comment: OnyxEntry +}; + type ExceededCommentLengthProps = { /** Report ID to get the comment from (used in withOnyx) */ // eslint-disable-next-line react/no-unused-prop-types @@ -20,7 +25,7 @@ type ExceededCommentLengthProps = { onExceededMaxCommentLength: () => void; }; -function ExceededCommentLength({comment = '', onExceededMaxCommentLength}: ExceededCommentLengthProps) { +function ExceededCommentLength({comment = '', onExceededMaxCommentLength}: ExceededCommentLengthProps & ExceededCommentLengthOnyxProps) { const {numberFormat, translate} = useLocalize(); const [commentLength, setCommentLength] = useState(0); const updateCommentLength = useMemo( @@ -53,7 +58,7 @@ function ExceededCommentLength({comment = '', onExceededMaxCommentLength}: Excee ExceededCommentLength.displayName = 'ExceededCommentLength'; -export default withOnyx({ +export default withOnyx({ comment: { key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`, initialValue: '', From 72da8a92460e9c33245f7e48a6df967da867c695 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Mon, 20 Nov 2023 12:23:30 +0100 Subject: [PATCH 4/8] fix: prettier --- src/components/ExceededCommentLength.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ExceededCommentLength.tsx b/src/components/ExceededCommentLength.tsx index 9292f00d5373..92312fec549b 100644 --- a/src/components/ExceededCommentLength.tsx +++ b/src/components/ExceededCommentLength.tsx @@ -1,16 +1,16 @@ import debounce from 'lodash/debounce'; import React, {useEffect, useMemo, useState} from 'react'; import {withOnyx} from 'react-native-onyx'; +import {OnyxEntry} from 'react-native-onyx/lib/types'; 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 {OnyxEntry} from "react-native-onyx/lib/types"; import Text from './Text'; type ExceededCommentLengthOnyxProps = { - comment: OnyxEntry + comment: OnyxEntry; }; type ExceededCommentLengthProps = { From 250d93ad4deb613a836500ffaaea9b7f9fb413cd Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Mon, 20 Nov 2023 14:06:07 +0100 Subject: [PATCH 5/8] fix: reorganize types --- src/components/ExceededCommentLength.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ExceededCommentLength.tsx b/src/components/ExceededCommentLength.tsx index 92312fec549b..abc90bd9af13 100644 --- a/src/components/ExceededCommentLength.tsx +++ b/src/components/ExceededCommentLength.tsx @@ -13,7 +13,7 @@ type ExceededCommentLengthOnyxProps = { comment: OnyxEntry; }; -type ExceededCommentLengthProps = { +type ExceededCommentLengthProps = ExceededCommentLengthOnyxProps & { /** Report ID to get the comment from (used in withOnyx) */ // eslint-disable-next-line react/no-unused-prop-types reportID: string; @@ -25,7 +25,7 @@ type ExceededCommentLengthProps = { onExceededMaxCommentLength: () => void; }; -function ExceededCommentLength({comment = '', onExceededMaxCommentLength}: ExceededCommentLengthProps & ExceededCommentLengthOnyxProps) { +function ExceededCommentLength({comment = '', onExceededMaxCommentLength}: ExceededCommentLengthProps) { const styles = useThemeStyles(); const {numberFormat, translate} = useLocalize(); const [commentLength, setCommentLength] = useState(0); From af41cf849b8b4eea6183ede701e1c91d65e6e2e0 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Thu, 30 Nov 2023 14:10:07 +0100 Subject: [PATCH 6/8] Fix: typo & optional prop --- src/components/ExceededCommentLength.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ExceededCommentLength.tsx b/src/components/ExceededCommentLength.tsx index abc90bd9af13..dc3a09322f19 100644 --- a/src/components/ExceededCommentLength.tsx +++ b/src/components/ExceededCommentLength.tsx @@ -19,7 +19,7 @@ type ExceededCommentLengthProps = ExceededCommentLengthOnyxProps & { reportID: string; /** Text Comment */ - comment: string; + comment?: string; /** Update UI on parent when comment length is exceeded */ onExceededMaxCommentLength: () => void; @@ -31,10 +31,10 @@ function ExceededCommentLength({comment = '', onExceededMaxCommentLength}: Excee const [commentLength, setCommentLength] = useState(0); const updateCommentLength = useMemo( () => - debounce((newComment, onExceededMaxCommentLengthCallabck) => { + debounce((newComment, onExceededMaxCommentLengthCallback) => { const newCommentLength = ReportUtils.getCommentLength(newComment); setCommentLength(newCommentLength); - onExceededMaxCommentLengthCallabck(newCommentLength > CONST.MAX_COMMENT_LENGTH); + onExceededMaxCommentLengthCallback(newCommentLength > CONST.MAX_COMMENT_LENGTH); }, CONST.TIMING.COMMENT_LENGTH_DEBOUNCE_TIME), [], ); From eae6241f56c438650e23f1b1ec516d9865b2b9fc Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Mon, 18 Dec 2023 13:15:26 +0100 Subject: [PATCH 7/8] fix: remove shouldShowError --- src/components/ExceededCommentLength.tsx | 11 +---------- .../report/ReportActionCompose/ReportActionCompose.js | 2 +- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/src/components/ExceededCommentLength.tsx b/src/components/ExceededCommentLength.tsx index dddb084b0d18..6cd11cc44a5c 100644 --- a/src/components/ExceededCommentLength.tsx +++ b/src/components/ExceededCommentLength.tsx @@ -4,19 +4,10 @@ import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import Text from './Text'; -type ExceededCommentLengthProps = { - /** Show error when comment length is exceeded */ - shouldShowError: boolean; -}; - -function ExceededCommentLength({shouldShowError}: ExceededCommentLengthProps) { +function ExceededCommentLength() { const styles = useThemeStyles(); const {numberFormat, translate} = useLocalize(); - if (!shouldShowError) { - return null; - } - return ( {!isSmallScreenWidth && } - + {hasExceededMaxCommentLength && } diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 3da0fad72f0a..f8a5fa282c88 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -475,7 +475,7 @@ function ReportActionItemMessageEdit(props) { - + {hasExceededMaxCommentLength && } ); } From 790b602b1ff70cad206f1ae9c164919608b15f73 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Mon, 18 Dec 2023 13:17:06 +0100 Subject: [PATCH 8/8] fix: lint --- .../home/report/ReportActionCompose/ReportActionCompose.js | 2 +- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index c227476e6cc6..b23d9b554488 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -446,7 +446,7 @@ function ReportActionCompose({ > {!isSmallScreenWidth && } - {hasExceededMaxCommentLength && } + {hasExceededMaxCommentLength && } diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index f8a5fa282c88..41e411d398b8 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -475,7 +475,7 @@ function ReportActionItemMessageEdit(props) { - {hasExceededMaxCommentLength && } + {hasExceededMaxCommentLength && } ); }