[TS migration] Migrate useLocalize

src/components/LocaleContextProvider.tsx

@@ -0,0 +1,144 @@
+import React, {createContext, useMemo} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import {ValueOf} from 'type-fest';
+import ONYXKEYS from '../ONYXKEYS';
+import * as Localize from '../libs/Localize';
+import DateUtils from '../libs/DateUtils';
+import * as NumberFormatUtils from '../libs/NumberFormatUtils';
+import * as LocaleDigitUtils from '../libs/LocaleDigitUtils';
+import CONST from '../CONST';
+import compose from '../libs/compose';
+import withCurrentUserPersonalDetails, {WithCurrentUserPersonalDetailsProps} from './withCurrentUserPersonalDetails';
+import * as LocalePhoneNumber from '../libs/LocalePhoneNumber';
+import {TranslationPaths, TranslationFlatObject} from '../languages/types';
+
+type LocaleContextProviderOnyxProps = {
+    /** The user's preferred locale e.g. 'en', 'es-ES' */
+    preferredLocale: ValueOf<typeof CONST.LOCALES>;
+};
+
+type LocaleContextProviderProps = LocaleContextProviderOnyxProps &
+    WithCurrentUserPersonalDetailsProps & {
+        /** Actual content wrapped by this component */
+        children: React.ReactNode;
+    };
+
+type PhraseParameters<T> = T extends (...args: infer A) => string ? A : never[];
+
+type Phrase<TKey extends TranslationPaths> = TranslationFlatObject[TKey] extends (...args: infer A) => unknown ? (...args: A) => string : string;
+
+type Translate = <TKey extends TranslationPaths>(phrase: TKey, variables?: PhraseParameters<Phrase<TKey>>) => string;
+
+type NumberFormat = (number: number, options: Intl.NumberFormatOptions) => string;
+
+type DatetimeToRelative = (datetime: string) => string;
+
+type DatetimeToCalendarTime = (datetime: string, includeTimezone: boolean, isLowercase: boolean) => string;
+
+type UpdateLocale = () => void;
+
+type FormatPhoneNumber = (phoneNumber: string) => string;
+
+type ToLocaleDigit = (digit: string) => string;
+
+type FromLocaleDigit = (digit: string) => string;
+
+type LocaleContextProps = {
+    /** Returns translated string for given locale and phrase */
+    translate: Translate;
+
+    /** Formats number formatted according to locale and options */
+    numberFormat: NumberFormat;
+
+    /** Converts a datetime into a localized string representation that's relative to current moment in time */
+    datetimeToRelative: DatetimeToRelative;
+
+    /** Formats a datetime to local date and time string */
+    datetimeToCalendarTime: DatetimeToCalendarTime;
+
+    /** Updates date-fns internal locale */
+    updateLocale: UpdateLocale;
+
+    /** Returns a locally converted phone number for numbers from the same region
+     * and an internationally converted phone number with the country code for numbers from other regions */
+    formatPhoneNumber: FormatPhoneNumber;
+
+    /** Gets the locale digit corresponding to a standard digit */
+    toLocaleDigit: ToLocaleDigit;
+
+    /** Gets the standard digit corresponding to a locale digit */
+    fromLocaleDigit: FromLocaleDigit;
+
+    /** The user's preferred locale e.g. 'en', 'es-ES' */
+    preferredLocale: ValueOf<typeof CONST.LOCALES>;
+};
+
+const LocaleContext = createContext<LocaleContextProps>({
+    translate: () => '',
+    numberFormat: () => '',
+    datetimeToRelative: () => '',
+    datetimeToCalendarTime: () => '',
+    updateLocale: () => '',
+    formatPhoneNumber: () => '',
+    toLocaleDigit: () => '',
+    fromLocaleDigit: () => '',
+    preferredLocale: CONST.LOCALES.DEFAULT,
+});
+
+function LocaleContextProvider({preferredLocale = CONST.LOCALES.DEFAULT, currentUserPersonalDetails = {}, children}: LocaleContextProviderProps) {
+    const selectedTimezone = useMemo(() => currentUserPersonalDetails?.timezone?.selected, [currentUserPersonalDetails]);
+
+    const translate = useMemo<Translate>(() => (phrase, variables) => Localize.translate(preferredLocale, phrase, variables), [preferredLocale]);
+
+    const numberFormat = useMemo<NumberFormat>(() => (number, options) => NumberFormatUtils.format(preferredLocale, number, options), [preferredLocale]);
+
+    const datetimeToRelative = useMemo<DatetimeToRelative>(() => (datetime) => DateUtils.datetimeToRelative(preferredLocale, datetime), [preferredLocale]);
+
+    const datetimeToCalendarTime = useMemo<DatetimeToCalendarTime>(
+        () =>
+            (datetime, includeTimezone, isLowercase = false) =>
+                DateUtils.datetimeToCalendarTime(preferredLocale, datetime, includeTimezone, selectedTimezone, isLowercase),
+        [preferredLocale, selectedTimezone],
+    );
+
+    const updateLocale = useMemo<UpdateLocale>(() => () => DateUtils.setLocale(preferredLocale), [preferredLocale]);
+
+    const formatPhoneNumber = useMemo<FormatPhoneNumber>(() => (phoneNumber) => LocalePhoneNumber.formatPhoneNumber(phoneNumber), []);
+
+    const toLocaleDigit = useMemo<ToLocaleDigit>(() => (digit) => LocaleDigitUtils.toLocaleDigit(preferredLocale, digit), [preferredLocale]);
+
+    const fromLocaleDigit = useMemo<FromLocaleDigit>(() => (localeDigit) => LocaleDigitUtils.fromLocaleDigit(preferredLocale, localeDigit), [preferredLocale]);
+
+    const contextValue = useMemo(
+        () => ({
+            translate,
+            numberFormat,
+            datetimeToRelative,
+            datetimeToCalendarTime,
+            updateLocale,
+            formatPhoneNumber,
+            toLocaleDigit,
+            fromLocaleDigit,
+            preferredLocale,
+        }),
+        [translate, numberFormat, datetimeToRelative, datetimeToCalendarTime, updateLocale, formatPhoneNumber, toLocaleDigit, fromLocaleDigit, preferredLocale],
+    );
+
+    return <LocaleContext.Provider value={contextValue}>{children}</LocaleContext.Provider>;
+}
+
+const Provider = compose(
+    withOnyx<LocaleContextProviderProps, LocaleContextProviderOnyxProps>({
+        preferredLocale: {
+            key: ONYXKEYS.NVP_PREFERRED_LOCALE,
+            selector: (preferredLocale) => preferredLocale ?? CONST.LOCALES.DEFAULT,
+        },
+    }),
+    withCurrentUserPersonalDetails,
+)(LocaleContextProvider);
+
+Provider.displayName = 'withOnyx(LocaleContextProvider)';
+
+export {Provider as LocaleContextProvider, LocaleContext};
+
+export type {LocaleContextProps};

src/components/withCurrentUserPersonalDetails.tsx

@@ -19,7 +19,7 @@ type HOCProps = {
     currentUserPersonalDetails: CurrentUserPersonalDetails;
 };
 
-type ComponentProps = OnyxProps & HOCProps;
+type WithCurrentUserPersonalDetailsProps = OnyxProps & HOCProps;
 
 // TODO: remove when all components that use it will be migrated to TS
 const withCurrentUserPersonalDetailsPropTypes = {
@@ -30,7 +30,7 @@ const withCurrentUserPersonalDetailsDefaultProps: HOCProps = {
     currentUserPersonalDetails: {},
 };
 
-export default function <TProps extends ComponentProps, TRef>(
+export default function <TProps extends WithCurrentUserPersonalDetailsProps, TRef>(
     WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
 ): ComponentType<Omit<Omit<TProps, keyof HOCProps> & RefAttributes<TRef>, keyof OnyxProps>> {
     function WithCurrentUserPersonalDetails(props: Omit<TProps, keyof HOCProps>, ref: ForwardedRef<TRef>) {
@@ -65,3 +65,4 @@ export default function <TProps extends ComponentProps, TRef>(
 }
 
 export {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps};
+export type {WithCurrentUserPersonalDetailsProps};

src/hooks/useLocalize.ts

@@ -0,0 +1,6 @@
+import {useContext} from 'react';
+import {LocaleContext, LocaleContextProps} from '../components/LocaleContextProvider';
+
+export default function useLocalize(): LocaleContextProps {
+    return useContext(LocaleContext);
+}

src/languages/types.ts

@@ -243,6 +243,8 @@ type TranslationFlatObject = {
 
 export type {
     TranslationBase,
+    TranslateType,
+    TranslationPaths,
     EnglishTranslation,
     TranslationFlatObject,
     AddressLineParams,