From 2e192b379e11718445f51af79e9b0b50714bb0c3 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Tue, 12 Dec 2023 16:19:32 +0100 Subject: [PATCH 1/3] Migrate 'ReportActionItemChronosOOOListActions.js' component to TypeScript --- src/components/OfflineWithFeedback.tsx | 2 +- ...stActions.js => ChronosOOOListActions.tsx} | 52 +++++++++---------- src/libs/DateUtils.ts | 4 +- src/types/onyx/OriginalMessage.ts | 14 ++++- 4 files changed, 41 insertions(+), 31 deletions(-) rename src/components/ReportActionItem/{ChronosOOOListActions.js => ChronosOOOListActions.tsx} (58%) diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx index 78c93c250f84..331b818af462 100644 --- a/src/components/OfflineWithFeedback.tsx +++ b/src/components/OfflineWithFeedback.tsx @@ -18,7 +18,7 @@ import MessagesRow from './MessagesRow'; type OfflineWithFeedbackProps = ChildrenProps & { /** The type of action that's pending */ - pendingAction: OnyxCommon.PendingAction; + pendingAction?: OnyxCommon.PendingAction; /** Determine whether to hide the component's children if deletion is pending */ shouldHideOnDelete?: boolean; diff --git a/src/components/ReportActionItem/ChronosOOOListActions.js b/src/components/ReportActionItem/ChronosOOOListActions.tsx similarity index 58% rename from src/components/ReportActionItem/ChronosOOOListActions.js rename to src/components/ReportActionItem/ChronosOOOListActions.tsx index 7c918b6a2d9c..2496e4233111 100644 --- a/src/components/ReportActionItem/ChronosOOOListActions.js +++ b/src/components/ReportActionItem/ChronosOOOListActions.tsx @@ -1,58 +1,57 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; -import _ from 'underscore'; import Button from '@components/Button'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import Text from '@components/Text'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useLocalize from '@hooks/useLocalize'; import DateUtils from '@libs/DateUtils'; -import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; import useThemeStyles from '@styles/useThemeStyles'; import * as Chronos from '@userActions/Chronos'; +import type {OriginalMessageChronosOOOList} from '@src/types/onyx/OriginalMessage'; +import type {ReportActionBase} from '@src/types/onyx/ReportAction'; -const propTypes = { +type ChronosOOOListActionsProps = { /** The ID of the report */ - reportID: PropTypes.string.isRequired, + reportID: string; /** All the data of the action */ - action: PropTypes.shape(reportActionPropTypes).isRequired, - - ...withLocalizePropTypes, + action: ReportActionBase & OriginalMessageChronosOOOList; }; -function ChronosOOOListActions(props) { +function ChronosOOOListActions({reportID, action}: ChronosOOOListActionsProps) { const styles = useThemeStyles(); - const events = lodashGet(props.action, 'originalMessage.events', []); + + const {translate, preferredLocale} = useLocalize(); + + const events = action.originalMessage?.events ?? []; if (!events.length) { return ( - + You haven't created any events ); } return ( - - - {_.map(events, (event) => { - const start = DateUtils.getLocalDateFromDatetime(props.preferredLocale, lodashGet(event, 'start.date', '')); - const end = DateUtils.getLocalDateFromDatetime(props.preferredLocale, lodashGet(event, 'end.date', '')); + + + {events.map((event) => { + const start = DateUtils.getLocalDateFromDatetime(preferredLocale, event?.end?.date ?? ''); + const end = DateUtils.getLocalDateFromDatetime(preferredLocale, event?.end?.date ?? ''); return ( - + {event.lengthInDays > 0 - ? props.translate('chronos.oooEventSummaryFullDay', { + ? translate('chronos.oooEventSummaryFullDay', { summary: event.summary, dayCount: event.lengthInDays, date: DateUtils.formatToLongDateWithWeekday(end), }) - : props.translate('chronos.oooEventSummaryPartialDay', { + : translate('chronos.oooEventSummaryPartialDay', { summary: event.summary, timePeriod: `${DateUtils.formatToLocalTime(start)} - ${DateUtils.formatToLocalTime(end)}`, date: DateUtils.formatToLongDateWithWeekday(end), @@ -60,10 +59,10 @@ function ChronosOOOListActions(props) { ); @@ -73,7 +72,6 @@ function ChronosOOOListActions(props) { ); } -ChronosOOOListActions.propTypes = propTypes; ChronosOOOListActions.displayName = 'ChronosOOOListActions'; -export default withLocalize(ChronosOOOListActions); +export default ChronosOOOListActions; diff --git a/src/libs/DateUtils.ts b/src/libs/DateUtils.ts index 80eae24d9367..e7eaca2aab6a 100644 --- a/src/libs/DateUtils.ts +++ b/src/libs/DateUtils.ts @@ -210,7 +210,7 @@ function getZoneAbbreviation(datetime: string, selectedTimezone: SelectedTimezon * * @returns Sunday, July 9, 2023 */ -function formatToLongDateWithWeekday(datetime: string): string { +function formatToLongDateWithWeekday(datetime: string | Date): string { return format(new Date(datetime), CONST.DATE.LONG_DATE_FORMAT_WITH_WEEKDAY); } @@ -228,7 +228,7 @@ function formatToDayOfWeek(datetime: string): string { * * @returns 2:30 PM */ -function formatToLocalTime(datetime: string): string { +function formatToLocalTime(datetime: string | Date): string { return format(new Date(datetime), CONST.DATE.LOCAL_TIME_FORMAT); } diff --git a/src/types/onyx/OriginalMessage.ts b/src/types/onyx/OriginalMessage.ts index fc7f8eb8ba31..1b949ac48a3f 100644 --- a/src/types/onyx/OriginalMessage.ts +++ b/src/types/onyx/OriginalMessage.ts @@ -234,4 +234,16 @@ type OriginalMessage = | OriginalMessageMoved; export default OriginalMessage; -export type {ChronosOOOEvent, Decision, Reaction, ActionName, IOUMessage, Closed, OriginalMessageActionName, ChangeLog, OriginalMessageIOU, OriginalMessageCreated}; +export type { + ChronosOOOEvent, + Decision, + Reaction, + ActionName, + IOUMessage, + Closed, + OriginalMessageActionName, + ChangeLog, + OriginalMessageIOU, + OriginalMessageCreated, + OriginalMessageChronosOOOList, +}; From 6dbcba93d0e57860d8a857066438a723060fa8e2 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Thu, 28 Dec 2023 10:16:58 +0100 Subject: [PATCH 2/3] apply prettier --- src/components/ReportActionItem/ChronosOOOListActions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ChronosOOOListActions.tsx b/src/components/ReportActionItem/ChronosOOOListActions.tsx index fc83e1be5a30..616404195c2f 100644 --- a/src/components/ReportActionItem/ChronosOOOListActions.tsx +++ b/src/components/ReportActionItem/ChronosOOOListActions.tsx @@ -4,8 +4,8 @@ import Button from '@components/Button'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; -import DateUtils from '@libs/DateUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import DateUtils from '@libs/DateUtils'; import * as Chronos from '@userActions/Chronos'; import type {OriginalMessageChronosOOOList} from '@src/types/onyx/OriginalMessage'; import type {ReportActionBase} from '@src/types/onyx/ReportAction'; From f14a7cac12167a2ec165f081a15e26a0eea3271e Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Wed, 31 Jan 2024 18:26:05 +0100 Subject: [PATCH 3/3] fix start date --- src/components/ReportActionItem/ChronosOOOListActions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ChronosOOOListActions.tsx b/src/components/ReportActionItem/ChronosOOOListActions.tsx index 616404195c2f..52e0c52873d6 100644 --- a/src/components/ReportActionItem/ChronosOOOListActions.tsx +++ b/src/components/ReportActionItem/ChronosOOOListActions.tsx @@ -37,7 +37,7 @@ function ChronosOOOListActions({reportID, action}: ChronosOOOListActionsProps) { {events.map((event) => { - const start = DateUtils.getLocalDateFromDatetime(preferredLocale, event?.end?.date ?? ''); + const start = DateUtils.getLocalDateFromDatetime(preferredLocale, event?.start?.date ?? ''); const end = DateUtils.getLocalDateFromDatetime(preferredLocale, event?.end?.date ?? ''); return (