From 06d2fbb62cc56eddac9bbf4895456eb6762dd733 Mon Sep 17 00:00:00 2001 From: Antony Kithinzi Date: Fri, 12 Jan 2024 16:49:56 -0500 Subject: [PATCH 1/8] feat: ReportActionItemCreated.js file TS migration * Created ReportActionItemCreated.tsx * feat: ReportActionItemCreated.js migration * "Migrated ReportActionItemCreated.js to TS" * "Created ReportActionItemCreated.tsx --- ...Created.js => ReportActionItemCreated.tsx} | 77 ++++++++++--------- 1 file changed, 40 insertions(+), 37 deletions(-) rename src/pages/home/report/{ReportActionItemCreated.js => ReportActionItemCreated.tsx} (68%) diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.tsx similarity index 68% rename from src/pages/home/report/ReportActionItemCreated.js rename to src/pages/home/report/ReportActionItemCreated.tsx index e5ec3e4b8744..22f9d6665e06 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -1,56 +1,61 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; import React, {memo} from 'react'; import {View} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import MultipleAvatars from '@components/MultipleAvatars'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import participantPropTypes from '@components/participantPropTypes'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import ReportWelcomeText from '@components/ReportWelcomeText'; +import type {WithLocalizeProps} from '@components/withLocalize'; import withLocalize from '@components/withLocalize'; -import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import withWindowDimensions from '@components/withWindowDimensions'; +import type {WindowDimensionsProps} from '@components/withWindowDimensions/types'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import reportWithoutHasDraftSelector from '@libs/OnyxSelectors/reportWithoutHasDraftSelector'; import * as ReportUtils from '@libs/ReportUtils'; -import reportPropTypes from '@pages/reportPropTypes'; -import * as Report from '@userActions/Report'; +import {navigateToConciergeChatAndDeleteReport} from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx'; import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; -const propTypes = { - /** The id of the report */ - reportID: PropTypes.string.isRequired, - +type OnyxProps = { /** The report currently being looked at */ - report: reportPropTypes, + report: OnyxEntry; + + /** The policy being used */ + policy: OnyxEntry; /** Personal details of all the users */ - personalDetails: PropTypes.objectOf(participantPropTypes), + personalDetails: OnyxEntry; +}; + +type ReportActionItemCreatedProps = { + /** The id of the report */ + reportID: string; + + /** The id of the policy */ + // eslint-disable-next-line react/no-unused-prop-types + policyID: string; /** The policy object for the current route */ - policy: PropTypes.shape({ + policy?: { /** The name of the policy */ - name: PropTypes.string, + name?: string; /** The URL for the policy avatar */ - avatar: PropTypes.string, - }), - - ...windowDimensionsPropTypes, -}; -const defaultProps = { - report: {}, - personalDetails: {}, - policy: {}, -}; + avatar?: string; + }; +} & WindowDimensionsProps & + WithLocalizeProps & + OnyxProps; -function ReportActionItemCreated(props) { +function ReportActionItemCreated(props: ReportActionItemCreatedProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + if (!ReportUtils.isChatReport(props.report)) { return null; } @@ -60,10 +65,10 @@ function ReportActionItemCreated(props) { return ( Report.navigateToConciergeChatAndDeleteReport(props.report.reportID)} + onClose={() => navigateToConciergeChatAndDeleteReport(props.report?.reportID ?? props.reportID)} needsOffscreenAlphaCompositing > @@ -99,14 +104,12 @@ function ReportActionItemCreated(props) { ); } -ReportActionItemCreated.defaultProps = defaultProps; -ReportActionItemCreated.propTypes = propTypes; ReportActionItemCreated.displayName = 'ReportActionItemCreated'; export default compose( - withWindowDimensions, + withWindowDimensions, withLocalize, - withOnyx({ + withOnyx({ report: { key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, selector: reportWithoutHasDraftSelector, @@ -122,10 +125,10 @@ export default compose( memo( ReportActionItemCreated, (prevProps, nextProps) => - lodashGet(prevProps.props, 'policy.name') === lodashGet(nextProps, 'policy.name') && - lodashGet(prevProps.props, 'policy.avatar') === lodashGet(nextProps, 'policy.avatar') && - lodashGet(prevProps.props, 'report.lastReadTime') === lodashGet(nextProps, 'report.lastReadTime') && - lodashGet(prevProps.props, 'report.statusNum') === lodashGet(nextProps, 'report.statusNum') && - lodashGet(prevProps.props, 'report.stateNum') === lodashGet(nextProps, 'report.stateNum'), + prevProps.policy?.name === nextProps.policy?.name && + prevProps.policy?.avatar === nextProps.policy?.avatar && + prevProps.report?.lastReadTime === nextProps.report?.lastReadTime && + prevProps.report?.statusNum === nextProps.report?.statusNum && + prevProps.report?.stateNum === nextProps.report?.stateNum, ), ); From f2dbeb169c26723ebfbb65c837e5c210aa42a8e6 Mon Sep 17 00:00:00 2001 From: Antony Kithinzi Date: Sat, 13 Jan 2024 00:10:37 +0100 Subject: [PATCH 2/8] refactor: improving code quality --- .../home/report/ReportActionItemCreated.tsx | 49 +++++++++---------- 1 file changed, 23 insertions(+), 26 deletions(-) diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index 22f9d6665e06..c1af2d08321a 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -6,19 +6,16 @@ import MultipleAvatars from '@components/MultipleAvatars'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import ReportWelcomeText from '@components/ReportWelcomeText'; -import type {WithLocalizeProps} from '@components/withLocalize'; -import withLocalize from '@components/withLocalize'; -import withWindowDimensions from '@components/withWindowDimensions'; -import type {WindowDimensionsProps} from '@components/withWindowDimensions/types'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; -import compose from '@libs/compose'; import reportWithoutHasDraftSelector from '@libs/OnyxSelectors/reportWithoutHasDraftSelector'; import * as ReportUtils from '@libs/ReportUtils'; import {navigateToConciergeChatAndDeleteReport} from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx'; +import useLocalize from '@hooks/useLocalize'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; type OnyxProps = { @@ -32,7 +29,7 @@ type OnyxProps = { personalDetails: OnyxEntry; }; -type ReportActionItemCreatedProps = { +type ReportActionItemCreatedProps = OnyxProps & { /** The id of the report */ reportID: string; @@ -48,14 +45,15 @@ type ReportActionItemCreatedProps = { /** The URL for the policy avatar */ avatar?: string; }; -} & WindowDimensionsProps & - WithLocalizeProps & - OnyxProps; - +} function ReportActionItemCreated(props: ReportActionItemCreatedProps) { + const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + const {translate} = useLocalize(); + const {isSmallScreenWidth, isLargeScreenWidth} = useWindowDimensions(); + if (!ReportUtils.isChatReport(props.report)) { return null; } @@ -71,25 +69,25 @@ function ReportActionItemCreated(props: ReportActionItemCreatedProps) { onClose={() => navigateToConciergeChatAndDeleteReport(props.report?.reportID ?? props.reportID)} needsOffscreenAlphaCompositing > - + ReportUtils.navigateToDetailsPage(props.report)} style={[styles.mh5, styles.mb3, styles.alignSelfStart]} - accessibilityLabel={props.translate('common.details')} + accessibilityLabel={translate('common.details')} role={CONST.ROLE.BUTTON} disabled={shouldDisableDetailPage} > @@ -106,22 +104,21 @@ function ReportActionItemCreated(props: ReportActionItemCreatedProps) { ReportActionItemCreated.displayName = 'ReportActionItemCreated'; -export default compose( - withWindowDimensions, - withLocalize, - withOnyx({ +export default withOnyx({ report: { key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, selector: reportWithoutHasDraftSelector, }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, + policy: { key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, }, - }), -)( + + personalDetails: { + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + }, + + })( memo( ReportActionItemCreated, (prevProps, nextProps) => From 8e521b407ea9a934e2dfa3d031a3ba5f50ef27f4 Mon Sep 17 00:00:00 2001 From: Antony Kithinzi Date: Sat, 13 Jan 2024 00:15:05 +0100 Subject: [PATCH 3/8] fmt: prettier --- .../home/report/ReportActionItemCreated.tsx | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index c1af2d08321a..86b7eef2c8ae 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -6,16 +6,16 @@ import MultipleAvatars from '@components/MultipleAvatars'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import ReportWelcomeText from '@components/ReportWelcomeText'; +import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import reportWithoutHasDraftSelector from '@libs/OnyxSelectors/reportWithoutHasDraftSelector'; import * as ReportUtils from '@libs/ReportUtils'; import {navigateToConciergeChatAndDeleteReport} from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx'; -import useLocalize from '@hooks/useLocalize'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; type OnyxProps = { @@ -45,9 +45,8 @@ type ReportActionItemCreatedProps = OnyxProps & { /** The URL for the policy avatar */ avatar?: string; }; -} +}; function ReportActionItemCreated(props: ReportActionItemCreatedProps) { - const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -105,27 +104,26 @@ function ReportActionItemCreated(props: ReportActionItemCreatedProps) { ReportActionItemCreated.displayName = 'ReportActionItemCreated'; export default withOnyx({ - report: { - key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, - selector: reportWithoutHasDraftSelector, - }, + report: { + key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + selector: reportWithoutHasDraftSelector, + }, + + policy: { + key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, + }, - policy: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, - }, - - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - - })( + personalDetails: { + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + }, +})( memo( ReportActionItemCreated, (prevProps, nextProps) => prevProps.policy?.name === nextProps.policy?.name && prevProps.policy?.avatar === nextProps.policy?.avatar && - prevProps.report?.lastReadTime === nextProps.report?.lastReadTime && + prevProps.report?.stateNum === nextProps.report?.stateNum && prevProps.report?.statusNum === nextProps.report?.statusNum && - prevProps.report?.stateNum === nextProps.report?.stateNum, + prevProps.report?.lastReadTime === nextProps.report?.lastReadTime, ), ); From 11a225f4b1ec4265c27c097710fb00dd2a978874 Mon Sep 17 00:00:00 2001 From: Antony Kithinzi Date: Wed, 17 Jan 2024 22:47:27 +0300 Subject: [PATCH 4/8] Update src/pages/home/report/ReportActionItemCreated.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- src/pages/home/report/ReportActionItemCreated.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index 86b7eef2c8ae..edf8b1c9c48e 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -37,14 +37,6 @@ type ReportActionItemCreatedProps = OnyxProps & { // eslint-disable-next-line react/no-unused-prop-types policyID: string; - /** The policy object for the current route */ - policy?: { - /** The name of the policy */ - name?: string; - - /** The URL for the policy avatar */ - avatar?: string; - }; }; function ReportActionItemCreated(props: ReportActionItemCreatedProps) { const styles = useThemeStyles(); From 9bad7da3a1dd29734e7a79f226e7d1ac81cc1b44 Mon Sep 17 00:00:00 2001 From: Antony Kithinzi Date: Wed, 17 Jan 2024 22:48:50 +0300 Subject: [PATCH 5/8] Update src/pages/home/report/ReportActionItemCreated.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- src/pages/home/report/ReportActionItemCreated.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index edf8b1c9c48e..bc423c72afc7 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -22,7 +22,7 @@ type OnyxProps = { /** The report currently being looked at */ report: OnyxEntry; - /** The policy being used */ + /** The policy object for the current route */ policy: OnyxEntry; /** Personal details of all the users */ From 0d802ffca22643faab94f5828ddc608ba8d54481 Mon Sep 17 00:00:00 2001 From: Antony Kithinzi Date: Wed, 17 Jan 2024 22:49:20 +0300 Subject: [PATCH 6/8] Update src/pages/home/report/ReportActionItemCreated.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- src/pages/home/report/ReportActionItemCreated.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index bc423c72afc7..47dc71cf43cd 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -18,7 +18,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx'; import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; -type OnyxProps = { +type ReportActionItemCreatedOnyxProps = { /** The report currently being looked at */ report: OnyxEntry; From 34636db8d9d3288d7fcdfddea8ce37e52d7dfeca Mon Sep 17 00:00:00 2001 From: Antony Kithinzi Date: Wed, 17 Jan 2024 22:53:37 +0300 Subject: [PATCH 7/8] Update src/pages/home/report/ReportActionItemCreated.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- src/pages/home/report/ReportActionItemCreated.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index 47dc71cf43cd..5ca74647fe4e 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -54,8 +54,8 @@ function ReportActionItemCreated(props: ReportActionItemCreatedProps) { return ( navigateToConciergeChatAndDeleteReport(props.report?.reportID ?? props.reportID)} needsOffscreenAlphaCompositing From 3be468ac7e28bc2fa18a16c98c212449a565783d Mon Sep 17 00:00:00 2001 From: Antony Kithinzi Date: Wed, 17 Jan 2024 20:28:11 +0000 Subject: [PATCH 8/8] fixing typescript checks --- src/pages/home/report/ReportActionItemCreated.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index 5ca74647fe4e..82c6bebd9ba1 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -29,14 +29,13 @@ type ReportActionItemCreatedOnyxProps = { personalDetails: OnyxEntry; }; -type ReportActionItemCreatedProps = OnyxProps & { +type ReportActionItemCreatedProps = ReportActionItemCreatedOnyxProps & { /** The id of the report */ reportID: string; /** The id of the policy */ // eslint-disable-next-line react/no-unused-prop-types policyID: string; - }; function ReportActionItemCreated(props: ReportActionItemCreatedProps) { const styles = useThemeStyles(); @@ -95,7 +94,7 @@ function ReportActionItemCreated(props: ReportActionItemCreatedProps) { ReportActionItemCreated.displayName = 'ReportActionItemCreated'; -export default withOnyx({ +export default withOnyx({ report: { key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, selector: reportWithoutHasDraftSelector,