Migrate 'SettingsProfile' page to TypeScript

src/ONYXKEYS.ts

@@ -418,7 +418,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.MONEY_REQUEST_HOLD_FORM]: FormTypes.MoneyRequestHoldReasonForm;
     [ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM]: FormTypes.Form;
     [ONYXKEYS.FORMS.WAYPOINT_FORM]: FormTypes.Form;
-    [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM]: FormTypes.Form;
+    [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM]: FormTypes.SettingsStatusSetForm;
     [ONYXKEYS.FORMS.SETTINGS_STATUS_CLEAR_DATE_FORM]: FormTypes.Form;
     [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_CLEAR_AFTER_FORM]: FormTypes.Form;
     [ONYXKEYS.FORMS.PRIVATE_NOTES_FORM]: FormTypes.PrivateNotesForm;

src/ROUTES.ts

@@ -37,7 +37,7 @@ const ROUTES = {
     },
     PROFILE_AVATAR: {
         route: 'a/:accountID/avatar',
-        getRoute: (accountID: string) => `a/${accountID}/avatar` as const,
+        getRoute: (accountID: string | number) => `a/${accountID}/avatar` as const,
     },
 
     TRANSITION_BETWEEN_APPS: 'transition',

src/components/Form/FormProvider.tsx

@@ -1,5 +1,5 @@
 import lodashIsEqual from 'lodash/isEqual';
-import type {ForwardedRef, MutableRefObject, ReactNode} from 'react';
+import type {ForwardedRef, MutableRefObject, ReactNode, RefAttributes} from 'react';
 import React, {createRef, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {NativeSyntheticEvent, StyleProp, TextInputSubmitEditingEventData, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -18,7 +18,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {RegisterInput} from './FormContext';
 import FormContext from './FormContext';
 import FormWrapper from './FormWrapper';
-import type {FormInputErrors, FormOnyxValues, FormProps, InputComponentBaseProps, InputRefs, ValueTypeKey} from './types';
+import type {FormInputErrors, FormOnyxValues, FormProps, FormRef, InputComponentBaseProps, InputRefs, ValueTypeKey} from './types';
 
 // In order to prevent Checkbox focus loss when the user are focusing a TextInput and proceeds to toggle a CheckBox in web and mobile web.
 // 200ms delay was chosen as a result of empirical testing.
@@ -73,10 +73,6 @@ type FormProviderProps<TFormID extends OnyxFormKey = OnyxFormKey> = FormProvider
         submitFlexEnabled?: boolean;
     };
 
-type FormRef<TFormID extends OnyxFormKey = OnyxFormKey> = {
-    resetForm: (optionalValue: FormOnyxValues<TFormID>) => void;
-};
-
 function FormProvider(
     {
         formID,
@@ -393,4 +389,4 @@ export default withOnyx<FormProviderProps, FormProviderOnyxProps>({
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-explicit-any
         key: (props) => `${props.formID}Draft` as any,
     },
-})(forwardRef(FormProvider)) as <TFormID extends OnyxFormKey>(props: Omit<FormProviderProps<TFormID>, keyof FormProviderOnyxProps>) => ReactNode;
+})(forwardRef(FormProvider)) as <TFormID extends OnyxFormKey>(props: Omit<FormProviderProps<TFormID> & RefAttributes<FormRef>, keyof FormProviderOnyxProps>) => ReactNode;

src/components/Form/types.ts

@@ -115,8 +115,25 @@ type FormProps<TFormID extends OnyxFormKey = OnyxFormKey> = {
     disablePressOnEnter?: boolean;
 };
 
+type FormRef<TFormID extends OnyxFormKey = OnyxFormKey> = {
+    resetForm: (optionalValue: FormOnyxValues<TFormID>) => void;
+};
+
 type InputRefs = Record<string, MutableRefObject<InputComponentBaseProps>>;
 
 type FormInputErrors<TFormID extends OnyxFormKey = OnyxFormKey> = Partial<Record<FormOnyxKeys<TFormID>, TranslationPaths>>;
 
-export type {FormProps, ValidInputs, InputComponentValueProps, FormValue, ValueTypeKey, FormOnyxValues, FormOnyxKeys, FormInputErrors, InputRefs, InputComponentBaseProps, ValueTypeMap};
+export type {
+    FormProps,
+    ValidInputs,
+    InputComponentValueProps,
+    FormValue,
+    ValueTypeKey,
+    FormOnyxValues,
+    FormOnyxKeys,
+    FormInputErrors,
+    InputRefs,
+    InputComponentBaseProps,
+    ValueTypeMap,
+    FormRef,
+};

src/components/MenuItem.tsx

@@ -194,7 +194,7 @@ type MenuItemBaseProps = {
     isSmallAvatarSubscriptMenu?: boolean;
 
     /** The type of brick road indicator to show. */
-    brickRoadIndicator?: ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS>;
+    brickRoadIndicator?: ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | '' | null;
 
     /** Should render the content in HTML format */
     shouldRenderAsHTML?: boolean;

src/components/TextInput/BaseTextInput/types.ts

@@ -1,4 +1,4 @@
-import type {GestureResponderEvent, StyleProp, TextInputProps, TextStyle, ViewStyle} from 'react-native';
+import type {GestureResponderEvent, Role, StyleProp, TextInputProps, TextStyle, ViewStyle} from 'react-native';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import type {MaybePhraseKey} from '@libs/Localize';
 import type IconAsset from '@src/types/utils/IconAsset';
@@ -108,6 +108,9 @@ type CustomBaseTextInputProps = {
 
     /** Type of autocomplete */
     autoCompleteType?: string;
+
+    /** Keyboard type */
+    role?: Role;
 };
 
 type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef;

src/libs/UserUtils.ts

@@ -12,7 +12,7 @@ type AvatarRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
 
 type AvatarSource = IconAsset | string;
 
-type LoginListIndicator = ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | '';
+type LoginListIndicator = ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | undefined;
 
 /**
  * Searches through given loginList for any contact method / login with an error.
@@ -59,7 +59,7 @@ function getLoginListBrickRoadIndicator(loginList: Record<string, Login>): Login
     if (hasLoginListInfo(loginList)) {
         return CONST.BRICK_ROAD_INDICATOR_STATUS.INFO;
     }
-    return '';
+    return undefined;
 }
 
 /**

src/libs/ValidationUtils.ts

@@ -356,7 +356,7 @@ function isValidPersonName(value: string) {
 /**
  * Checks if the provided string includes any of the provided reserved words
  */
-function doesContainReservedWord(value: string, reservedWords: string[]): boolean {
+function doesContainReservedWord(value: string, reservedWords: readonly string[]): boolean {
     const valueToCheck = value.trim().toLowerCase();
     return reservedWords.some((reservedWord) => valueToCheck.includes(reservedWord.toLowerCase()));
 }

src/pages/settings/Profile/CustomStatus/StatusPage.js → src/pages/settings/Profile/CustomStatus/StatusPage.tsx

@@ -1,10 +1,12 @@
-import lodashGet from 'lodash/get';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {InteractionManager, View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
 import EmojiPickerButtonDropdown from '@components/EmojiPicker/EmojiPickerButtonDropdown';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues, FormRef} from '@components/Form/types';
 import HeaderPageLayout from '@components/HeaderPageLayout';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -13,57 +15,57 @@
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
+import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
+import INPUT_IDS from '@src/types/form/SettingsStatusSetForm';
+import type {Status} from '@src/types/onyx/PersonalDetails';
 
-const INPUT_IDS = {
-    EMOJI_CODE: 'emojiCode',
-    STATUS_TEXT: 'statusText',
+type StatusPageOnyxProps = {
+    draftStatus: OnyxEntry<Status>;
 };
 
-const propTypes = {
-    ...withCurrentUserPersonalDetailsPropTypes,
-};
+type StatusPageProps = StatusPageOnyxProps & WithCurrentUserPersonalDetailsProps;
 
 const initialEmoji = '💬';
 
-function StatusPage({draftStatus, currentUserPersonalDetails}) {
+function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
-    const formRef = useRef(null);
-    const [brickRoadIndicator, setBrickRoadIndicator] = useState('');
-    const currentUserEmojiCode = lodashGet(currentUserPersonalDetails, 'status.emojiCode', '');
-    const currentUserStatusText = lodashGet(currentUserPersonalDetails, 'status.text', '');
-    const currentUserClearAfter = lodashGet(currentUserPersonalDetails, 'status.clearAfter', '');
-    const draftEmojiCode = lodashGet(draftStatus, 'emojiCode');
-    const draftText = lodashGet(draftStatus, 'text');
-    const draftClearAfter = lodashGet(draftStatus, 'clearAfter');
-
-    const defaultEmoji = draftEmojiCode || currentUserEmojiCode;
-    const defaultText = draftText || currentUserStatusText;
+    const formRef = useRef<FormRef>(null);
+    const [brickRoadIndicator, setBrickRoadIndicator] = useState<ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | '' | null>('');
+    const currentUserEmojiCode = currentUserPersonalDetails?.status?.emojiCode ?? '';
+    const currentUserStatusText = currentUserPersonalDetails?.status?.text ?? '';
+    const currentUserClearAfter = currentUserPersonalDetails?.status?.clearAfter ?? '';
+    const draftEmojiCode = draftStatus?.emojiCode;
+    const draftText = draftStatus?.text;
+    const draftClearAfter = draftStatus?.clearAfter;
+
+    const defaultEmoji = draftEmojiCode ?? currentUserEmojiCode;
+    const defaultText = draftText ?? currentUserStatusText;
 
     const customClearAfter = useMemo(() => {
-        const dataToShow = draftClearAfter || currentUserClearAfter;
+        const dataToShow = draftClearAfter ?? currentUserClearAfter;
         return DateUtils.getLocalizedTimePeriodDescription(dataToShow);
     }, [draftClearAfter, currentUserClearAfter]);
 
     const isValidClearAfterDate = useCallback(() => {
-        const clearAfterTime = draftClearAfter || currentUserClearAfter;
-        if (clearAfterTime === CONST.CUSTOM_STATUS_TYPES.NEVER || clearAfterTime === '') {
+        const clearAfterTime = draftClearAfter ?? currentUserClearAfter;
+        if (clearAfterTime === CONST.CUSTOM_STATUS_TYPES.NEVER ?? clearAfterTime === '') {
             return true;
         }
 
@@ -72,8 +74,9 @@
 
     const navigateBackToPreviousScreen = useCallback(() => Navigation.goBack(), []);
     const updateStatus = useCallback(
-        ({emojiCode, statusText}) => {
-            const clearAfterTime = draftClearAfter || currentUserClearAfter || CONST.CUSTOM_STATUS_TYPES.NEVER;
+        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM>) => {
+            const {emojiCode, statusText} = values;
+            const clearAfterTime = draftClearAfter ?? currentUserClearAfter ?? CONST.CUSTOM_STATUS_TYPES.NEVER;
             const isValid = DateUtils.isTimeAtLeastOneMinuteInFuture({dateTimeString: clearAfterTime});
             if (!isValid && clearAfterTime !== CONST.CUSTOM_STATUS_TYPES.NEVER) {
                 setBrickRoadIndicator(isValidClearAfterDate() ? null : CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR);
@@ -100,7 +103,7 @@
             emojiCode: '',
             clearAfter: DateUtils.getEndOfToday(),
         });
-        formRef.current.resetForm({[INPUT_IDS.EMOJI_CODE]: ''});
+        formRef.current?.resetForm?.({[INPUT_IDS.EMOJI_CODE]: ''});
         InteractionManager.runAfterInteractions(() => {
             navigateBackToPreviousScreen();
         });
@@ -110,18 +113,18 @@
 
     useEffect(() => {
         if (!currentUserEmojiCode && !currentUserClearAfter && !draftClearAfter) {
-            User.updateDraftCustomStatus({clearAfter: DateUtils.getEndOfToday()});
+            User.updateDraftCustomStatus({clearAfter: DateUtils.getEndOfToday()} as Status);
         } else {
-            User.updateDraftCustomStatus({clearAfter: currentUserClearAfter});
+            User.updateDraftCustomStatus({clearAfter: currentUserClearAfter} as Status);
         }
 
         return () => User.clearDraftCustomStatus();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const validateForm = useCallback(() => {
+    const validateForm = useCallback((): FormInputErrors<typeof ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM> => {
         if (brickRoadIndicator) {
-            return {clearAfter: ''};
+            return {clearAfter: '' as TranslationPaths};
         }
         return {};
     }, [brickRoadIndicator]);
@@ -157,6 +160,7 @@
                         <InputWrapper
                             InputComponent={EmojiPickerButtonDropdown}
                             inputID={INPUT_IDS.EMOJI_CODE}
+                            // @ts-expect-error TODO: Remove ts-expect-error when EmojiPickerButtonDropdown migration is done
                             accessibilityLabel={INPUT_IDS.EMOJI_CODE}
                             role={CONST.ACCESSIBILITY_ROLE.TEXT}
                             defaultValue={defaultEmoji}
@@ -166,7 +170,7 @@
                             InputComponent={TextInput}
                             ref={inputCallbackRef}
                             inputID={INPUT_IDS.STATUS_TEXT}
                             role={CONST.ACCESSIBILITY_ROLE.TEXT}
                             label={translate('statusPage.message')}
                             accessibilityLabel={INPUT_IDS.STATUS_TEXT}
                             defaultValue={defaultText}
@@ -181,7 +185,7 @@
                         containerStyle={styles.pr2}
                         brickRoadIndicator={brickRoadIndicator}
                     />
-                    {(!!currentUserEmojiCode || !!currentUserStatusText) && (
+                    {(!!currentUserEmojiCode ?? !!currentUserStatusText) && (
                         <MenuItem
                             title={translate('statusPage.clearStatus')}
                             titleStyle={styles.ml0}
@@ -198,13 +202,11 @@
 }
 
 StatusPage.displayName = 'StatusPage';
-StatusPage.propTypes = propTypes;
 
-export default compose(
-    withCurrentUserPersonalDetails,
-    withOnyx({
+export default withCurrentUserPersonalDetails(
+    withOnyx<StatusPageProps, StatusPageOnyxProps>({
         draftStatus: {
             key: () => ONYXKEYS.CUSTOM_STATUS_DRAFT,
         },
-    }),
-)(StatusPage);
+    })(StatusPage),
+);