Merge pull request #31521 from software-mansion-labs/ts-migration/aut…

…o-update-time-component

[TS migration] Migrate 'AutoUpdateTime.js' component to TypeScript

src/components/AutoUpdateTime.js → src/components/AutoUpdateTime.tsx

@@ -2,42 +2,35 @@
  * Displays the user's local time and updates it every minute.
  * The time auto-update logic is extracted to this component to avoid re-rendering a more complex component, e.g. DetailsPage.
  */
-import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
+import {Timezone} from '@src/types/onyx/PersonalDetails';
 import Text from './Text';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import withLocalize, {WithLocalizeProps} from './withLocalize';
 
-const propTypes = {
+type AutoUpdateTimeProps = WithLocalizeProps & {
     /** Timezone of the user from their personal details */
-    timezone: PropTypes.shape({
-        /** Value of selected timezone */
-        selected: PropTypes.string,
-
-        /** Whether timezone is automatically set */
-        automatic: PropTypes.bool,
-    }).isRequired,
-    ...withLocalizePropTypes,
+    timezone: Timezone;
 };
 
-function AutoUpdateTime(props) {
+function AutoUpdateTime({timezone, preferredLocale, translate}: AutoUpdateTimeProps) {
     const styles = useThemeStyles();
-    /**
-     * @returns {Date} Returns the locale Date object
-     */
-    const getCurrentUserLocalTime = useCallback(
-        () => DateUtils.getLocalDateFromDatetime(props.preferredLocale, null, props.timezone.selected),
-        [props.preferredLocale, props.timezone.selected],
-    );
+    /** @returns Returns the locale Date object */
+    const getCurrentUserLocalTime = useCallback(() => DateUtils.getLocalDateFromDatetime(preferredLocale, undefined, timezone.selected), [preferredLocale, timezone.selected]);
 
     const [currentUserLocalTime, setCurrentUserLocalTime] = useState(getCurrentUserLocalTime);
     const minuteRef = useRef(new Date().getMinutes());
-    const timezoneName = useMemo(() => DateUtils.getZoneAbbreviation(currentUserLocalTime, props.timezone.selected), [currentUserLocalTime, props.timezone.selected]);
+    const timezoneName = useMemo(() => {
+        if (timezone.selected) {
+            return DateUtils.getZoneAbbreviation(currentUserLocalTime, timezone.selected);
+        }
+        return '';
+    }, [currentUserLocalTime, timezone.selected]);
 
     useEffect(() => {
-        // If the any of the props that getCurrentUserLocalTime depends on change, we want to update the displayed time immediately
+        // If any of the props that getCurrentUserLocalTime depends on change, we want to update the displayed time immediately
         setCurrentUserLocalTime(getCurrentUserLocalTime());
 
         // Also, if the user leaves this page open, we want to make sure the displayed time is updated every minute when the clock changes
@@ -58,7 +51,7 @@ function AutoUpdateTime(props) {
                 style={[styles.textLabelSupporting, styles.mb1]}
                 numberOfLines={1}
             >
-                {props.translate('detailsPage.localTime')}
+                {translate('detailsPage.localTime')}
             </Text>
             <Text numberOfLines={1}>
                 {DateUtils.formatToLocalTime(currentUserLocalTime)} {timezoneName}
@@ -67,6 +60,5 @@ function AutoUpdateTime(props) {
     );
 }
 
-AutoUpdateTime.propTypes = propTypes;
 AutoUpdateTime.displayName = 'AutoUpdateTime';
 export default withLocalize(AutoUpdateTime);

src/libs/DateUtils.ts

@@ -88,7 +88,7 @@ function setLocale(localeString: Locale) {
  * Gets the user's stored time zone NVP and returns a localized
  * Date object for the given ISO-formatted datetime string
  */
-function getLocalDateFromDatetime(locale: Locale, datetime: string, currentSelectedTimezone: SelectedTimezone = timezone.selected): Date {
+function getLocalDateFromDatetime(locale: Locale, datetime?: string, currentSelectedTimezone: SelectedTimezone = timezone.selected): Date {
     setLocale(locale);
     if (!datetime) {
         return utcToZonedTime(new Date(), currentSelectedTimezone);
@@ -209,7 +209,7 @@ function datetimeToRelative(locale: Locale, datetime: string): string {
  * @param selectedTimezone
  * @returns
  */
-function getZoneAbbreviation(datetime: string, selectedTimezone: SelectedTimezone): string {
+function getZoneAbbreviation(datetime: string | Date, selectedTimezone: SelectedTimezone): string {
     return formatInTimeZone(datetime, selectedTimezone, 'zzz');
 }
 
@@ -236,7 +236,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);
 }