[TS migration] Migrate 'ReportActionItemChronosOOOListActions.js' component to TypeS…

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;

src/components/ReportActionItem/ChronosOOOListActions.js → src/components/ReportActionItem/ChronosOOOListActions.tsx

@@ -1,69 +1,68 @@
-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 useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
-import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 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 (
-            <View style={[styles.flexRow, styles.alignItemsCenter, styles.pt, styles.ml18]}>
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.ml18]}>
                 <Text>You haven&apos;t created any events</Text>
             </View>
         );
     }
 
     return (
-        <OfflineWithFeedback pendingAction={lodashGet(props.action, 'pendingAction', null)}>
-            <View style={[styles.chatItemMessage]}>
-                {_.map(events, (event) => {
-                    const start = DateUtils.getLocalDateFromDatetime(props.preferredLocale, lodashGet(event, 'start.date', ''));
-                    const end = DateUtils.getLocalDateFromDatetime(props.preferredLocale, lodashGet(event, 'end.date', ''));
+        <OfflineWithFeedback pendingAction={action.pendingAction}>
+            <View style={styles.chatItemMessage}>
+                {events.map((event) => {
+                    const start = DateUtils.getLocalDateFromDatetime(preferredLocale, event?.end?.date ?? '');
+                    const end = DateUtils.getLocalDateFromDatetime(preferredLocale, event?.end?.date ?? '');
                     return (
                         <View
                             key={event.id}
-                            style={[styles.flexRow, styles.pt, styles.ml18, styles.pr4, styles.alignItemsCenter]}
+                            style={[styles.flexRow, styles.ml18, styles.pr4, styles.alignItemsCenter]}
                         >
-                            <Text style={[styles.flexShrink1]}>
+                            <Text style={styles.flexShrink1}>
                                 {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),
                                       })}
                             </Text>
                             <Button
                                 small
-                                style={[styles.pl2]}
-                                onPress={() => Chronos.removeEvent(props.reportID, props.action.reportActionID, event.id, events)}
+                                style={styles.pl2}
+                                onPress={() => Chronos.removeEvent(reportID, action.reportActionID, event.id, events)}
                             >
-                                <Text style={styles.buttonSmallText}>{props.translate('common.remove')}</Text>
+                                <Text style={styles.buttonSmallText}>{translate('common.remove')}</Text>
                             </Button>
                         </View>
                     );
@@ -73,7 +72,6 @@ function ChronosOOOListActions(props) {
     );
 }
 
-ChronosOOOListActions.propTypes = propTypes;
 ChronosOOOListActions.displayName = 'ChronosOOOListActions';
 
-export default withLocalize(ChronosOOOListActions);
+export default ChronosOOOListActions;

src/libs/DateUtils.ts

@@ -228,7 +228,7 @@ function getZoneAbbreviation(datetime: string | Date, selectedTimezone: Selected
  *
  * @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);
 }
 

src/types/onyx/OriginalMessage.ts

@@ -266,4 +266,5 @@ export type {
     OriginalMessageIOU,
     OriginalMessageCreated,
     OriginalMessageAddComment,
+    OriginalMessageChronosOOOList,
 };