From ef1dea2d65c83a5c06956e09fa55ab61f7a448ea Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Fri, 8 Dec 2023 11:05:56 +0100 Subject: [PATCH 1/3] Migrate 'ReportActionItemThread.js' component to TypeScript --- ...emThread.js => ReportActionItemThread.tsx} | 50 +++++++++---------- 1 file changed, 24 insertions(+), 26 deletions(-) rename src/pages/home/report/{ReportActionItemThread.js => ReportActionItemThread.tsx} (59%) diff --git a/src/pages/home/report/ReportActionItemThread.js b/src/pages/home/report/ReportActionItemThread.tsx similarity index 59% rename from src/pages/home/report/ReportActionItemThread.js rename to src/pages/home/report/ReportActionItemThread.tsx index 35ef49dc97fd..cc28d9e4205a 100644 --- a/src/pages/home/report/ReportActionItemThread.js +++ b/src/pages/home/report/ReportActionItemThread.tsx @@ -1,62 +1,61 @@ -import PropTypes from 'prop-types'; import React from 'react'; import {Text, View} from 'react-native'; -import avatarPropTypes from '@components/avatarPropTypes'; import MultipleAvatars from '@components/MultipleAvatars'; import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import withWindowDimensions from '@components/withWindowDimensions'; +import {WindowDimensionsProps} from '@components/withWindowDimensions/types'; +import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import compose from '@libs/compose'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; +import {Icon} from '@src/types/onyx/OnyxCommon'; -const propTypes = { +type ReportActionItemThreadProps = WindowDimensionsProps & { /** List of participant icons for the thread */ - icons: PropTypes.arrayOf(avatarPropTypes).isRequired, + icons: Icon[]; /** Number of comments under the thread */ - numberOfReplies: PropTypes.number.isRequired, + numberOfReplies: number; /** Time of the most recent reply */ - mostRecentReply: PropTypes.string.isRequired, + mostRecentReply: string; /** ID of child thread report */ - childReportID: PropTypes.string.isRequired, + childReportID: string; /** Whether the thread item / message is being hovered */ - isHovered: PropTypes.bool.isRequired, + isHovered: boolean; /** The function that should be called when the thread is LongPressed or right-clicked */ - onSecondaryInteraction: PropTypes.func.isRequired, - - ...withLocalizePropTypes, - ...windowDimensionsPropTypes, + onSecondaryInteraction: () => void; }; -function ReportActionItemThread(props) { +function ReportActionItemThread({numberOfReplies, icons, mostRecentReply, childReportID, isHovered, onSecondaryInteraction}: ReportActionItemThreadProps): React.ReactElement { const styles = useThemeStyles(); - const numberOfRepliesText = props.numberOfReplies > CONST.MAX_THREAD_REPLIES_PREVIEW ? `${CONST.MAX_THREAD_REPLIES_PREVIEW}+` : `${props.numberOfReplies}`; - const replyText = props.numberOfReplies === 1 ? props.translate('threads.reply') : props.translate('threads.replies'); - const timeStamp = props.datetimeToCalendarTime(props.mostRecentReply, false); + const {translate, datetimeToRelative} = useLocalize(); + + const numberOfRepliesText = numberOfReplies > CONST.MAX_THREAD_REPLIES_PREVIEW ? `${CONST.MAX_THREAD_REPLIES_PREVIEW}+` : `${numberOfReplies}`; + const replyText = numberOfReplies === 1 ? translate('threads.reply') : translate('threads.replies'); + + const timeStamp = datetimeToRelative(mostRecentReply); return ( { - Report.navigateToAndOpenChildReport(props.childReportID); + Report.navigateToAndOpenChildReport(childReportID); }} role={CONST.ROLE.BUTTON} - accessibilityLabel={`${props.numberOfReplies} ${replyText}`} - onSecondaryInteraction={props.onSecondaryInteraction} + accessibilityLabel={`${numberOfReplies} ${replyText}`} + onSecondaryInteraction={onSecondaryInteraction} > @@ -80,7 +79,6 @@ function ReportActionItemThread(props) { ); } -ReportActionItemThread.propTypes = propTypes; ReportActionItemThread.displayName = 'ReportActionItemThread'; -export default compose(withLocalize, withWindowDimensions)(ReportActionItemThread); +export default withWindowDimensions(ReportActionItemThread); From 9a660011f08000e3c2d9b728149ce3e5635d0b0f Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Mon, 11 Dec 2023 14:10:11 +0100 Subject: [PATCH 2/3] remove redundant hoc --- src/pages/home/report/ReportActionItemThread.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/pages/home/report/ReportActionItemThread.tsx b/src/pages/home/report/ReportActionItemThread.tsx index cc28d9e4205a..8490d3d61ea4 100644 --- a/src/pages/home/report/ReportActionItemThread.tsx +++ b/src/pages/home/report/ReportActionItemThread.tsx @@ -2,15 +2,13 @@ import React from 'react'; import {Text, View} from 'react-native'; import MultipleAvatars from '@components/MultipleAvatars'; import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction'; -import withWindowDimensions from '@components/withWindowDimensions'; -import {WindowDimensionsProps} from '@components/withWindowDimensions/types'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import {Icon} from '@src/types/onyx/OnyxCommon'; -type ReportActionItemThreadProps = WindowDimensionsProps & { +type ReportActionItemThreadProps = { /** List of participant icons for the thread */ icons: Icon[]; @@ -30,7 +28,7 @@ type ReportActionItemThreadProps = WindowDimensionsProps & { onSecondaryInteraction: () => void; }; -function ReportActionItemThread({numberOfReplies, icons, mostRecentReply, childReportID, isHovered, onSecondaryInteraction}: ReportActionItemThreadProps): React.ReactElement { +function ReportActionItemThread({numberOfReplies, icons, mostRecentReply, childReportID, isHovered, onSecondaryInteraction}: ReportActionItemThreadProps) { const styles = useThemeStyles(); const {translate, datetimeToRelative} = useLocalize(); @@ -81,4 +79,4 @@ function ReportActionItemThread({numberOfReplies, icons, mostRecentReply, childR ReportActionItemThread.displayName = 'ReportActionItemThread'; -export default withWindowDimensions(ReportActionItemThread); +export default ReportActionItemThread; From 83b093e845220627a13545bcc862e22ec8ef8970 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Mon, 11 Dec 2023 14:40:25 +0100 Subject: [PATCH 3/3] fix type import, date format --- src/components/LocaleContextProvider.tsx | 2 +- src/pages/home/report/ReportActionItemThread.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/LocaleContextProvider.tsx b/src/components/LocaleContextProvider.tsx index 2fa4e1c749e6..2e68197bbaf0 100644 --- a/src/components/LocaleContextProvider.tsx +++ b/src/components/LocaleContextProvider.tsx @@ -36,7 +36,7 @@ type LocaleContextProps = { datetimeToRelative: (datetime: string) => string; /** Formats a datetime to local date and time string */ - datetimeToCalendarTime: (datetime: string, includeTimezone: boolean, isLowercase: boolean) => string; + datetimeToCalendarTime: (datetime: string, includeTimezone: boolean, isLowercase?: boolean) => string; /** Updates date-fns internal locale */ updateLocale: () => void; diff --git a/src/pages/home/report/ReportActionItemThread.tsx b/src/pages/home/report/ReportActionItemThread.tsx index 8490d3d61ea4..e38021cf6ec1 100644 --- a/src/pages/home/report/ReportActionItemThread.tsx +++ b/src/pages/home/report/ReportActionItemThread.tsx @@ -6,7 +6,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; -import {Icon} from '@src/types/onyx/OnyxCommon'; +import type {Icon} from '@src/types/onyx/OnyxCommon'; type ReportActionItemThreadProps = { /** List of participant icons for the thread */ @@ -31,12 +31,12 @@ type ReportActionItemThreadProps = { function ReportActionItemThread({numberOfReplies, icons, mostRecentReply, childReportID, isHovered, onSecondaryInteraction}: ReportActionItemThreadProps) { const styles = useThemeStyles(); - const {translate, datetimeToRelative} = useLocalize(); + const {translate, datetimeToCalendarTime} = useLocalize(); const numberOfRepliesText = numberOfReplies > CONST.MAX_THREAD_REPLIES_PREVIEW ? `${CONST.MAX_THREAD_REPLIES_PREVIEW}+` : `${numberOfReplies}`; const replyText = numberOfReplies === 1 ? translate('threads.reply') : translate('threads.replies'); - const timeStamp = datetimeToRelative(mostRecentReply); + const timeStamp = datetimeToCalendarTime(mostRecentReply, false); return (