[TS migration] Migrate 'SettingsProfileReport' page to TypeScript

src/ONYXKEYS.ts

@@ -499,8 +499,8 @@ type OnyxValues = {
     [ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM_DRAFT]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.DISPLAY_NAME_FORM]: OnyxTypes.DisplayNameForm;
     [ONYXKEYS.FORMS.DISPLAY_NAME_FORM_DRAFT]: OnyxTypes.DisplayNameForm;
-    [ONYXKEYS.FORMS.ROOM_NAME_FORM]: OnyxTypes.Form;
-    [ONYXKEYS.FORMS.ROOM_NAME_FORM_DRAFT]: OnyxTypes.Form;
+    [ONYXKEYS.FORMS.ROOM_NAME_FORM]: OnyxTypes.RoomNameForm;
+    [ONYXKEYS.FORMS.ROOM_NAME_FORM_DRAFT]: OnyxTypes.RoomNameForm;
     [ONYXKEYS.FORMS.WELCOME_MESSAGE_FORM]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.WELCOME_MESSAGE_FORM_DRAFT]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.LEGAL_NAME_FORM]: OnyxTypes.Form;

src/components/DisplayNames/DisplayNamesWithTooltip.tsx

@@ -56,7 +56,7 @@ function DisplayNamesWithToolTip({shouldUseFullTitle, fullTitle, displayNamesWit
         >
             {shouldUseFullTitle
                 ? ReportUtils.formatReportLastMessageText(fullTitle)
-                : displayNamesWithTooltips.map(({displayName, accountID, avatar, login}, index) => (
+                : displayNamesWithTooltips?.map(({displayName, accountID, avatar, login}, index) => (
                       // eslint-disable-next-line react/no-array-index-key
                       <Fragment key={index}>
                           <DisplayNamesTooltipItem

src/components/DisplayNames/index.tsx

@@ -18,9 +18,19 @@ function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, sho
         );
     }
 
+    if (shouldUseFullTitle) {
+        return (
+            <DisplayNamesWithToolTip
+                shouldUseFullTitle
+                fullTitle={title}
+                textStyles={textStyles}
+                numberOfLines={numberOfLines}
+            />
+        );
+    }
+
     return (
         <DisplayNamesWithToolTip
-            shouldUseFullTitle={shouldUseFullTitle}
             fullTitle={title}
             displayNamesWithTooltips={displayNamesWithTooltips}
             textStyles={textStyles}

src/components/DisplayNames/types.ts

@@ -20,7 +20,7 @@ type DisplayNamesProps = {
     fullTitle: string;
 
     /** Array of objects that map display names to their corresponding tooltip */
-    displayNamesWithTooltips: DisplayNameWithTooltip[];
+    displayNamesWithTooltips?: DisplayNameWithTooltip[];
 
     /** Number of lines before wrapping */
     numberOfLines: number;

src/languages/en.ts

@@ -679,6 +679,7 @@ export default {
             always: 'Immediately',
             daily: 'Daily',
             mute: 'Mute',
+            hidden: 'Hidden',
         },
     },
     loginField: {

src/languages/es.ts

@@ -673,6 +673,7 @@ export default {
             always: 'Inmediatamente',
             daily: 'Cada día',
             mute: 'Nunca',
+            hidden: 'Oculto',
         },
     },
     loginField: {

src/libs/ErrorUtils.ts

@@ -113,7 +113,7 @@ type ErrorsList = Record<string, string | [string, {isTranslated: boolean}]>;
  * @param errors - An object containing current errors in the form
  * @param message - Message to assign to the inputID errors
  */
-function addErrorMessage<TKey extends TranslationPaths>(errors: ErrorsList, inputID?: string, message?: TKey) {
+function addErrorMessage<TKey extends TranslationPaths>(errors: ErrorsList, inputID?: string, message?: TKey | Localize.MaybePhraseKey) {
     if (!message || !inputID) {
         return;
     }

src/libs/ValidationUtils.ts

@@ -4,6 +4,7 @@ import {URL_REGEX_WITH_REQUIRED_PROTOCOL} from 'expensify-common/lib/Url';
 import isDate from 'lodash/isDate';
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
+import type {OnyxCollection} from 'react-native-onyx';
 import CONST from '@src/CONST';
 import type {Report} from '@src/types/onyx';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
@@ -361,8 +362,8 @@ function isReservedRoomName(roomName: string): boolean {
 /**
  * Checks if the room name already exists.
  */
-function isExistingRoomName(roomName: string, reports: Record<string, Report>, policyID: string): boolean {
-    return Object.values(reports).some((report) => report && report.policyID === policyID && report.reportName === roomName);
+function isExistingRoomName(roomName: string, reports: OnyxCollection<Report>, policyID: string): boolean {
+    return Object.values(reports ?? {}).some((report) => report && report.policyID === policyID && report.reportName === roomName);
 }
 
 /**

src/pages/settings/Report/NotificationPreferencePage.tsx

@@ -0,0 +1,54 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React from 'react';
+import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import useLocalize from '@hooks/useLocalize';
+import * as ReportUtils from '@libs/ReportUtils';
+import type {ReportSettingsNavigatorParamList} from '@navigation/types';
+import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
+import type {WithReportOrNotFoundProps} from '@pages/home/report/withReportOrNotFound';
+import * as ReportActions from '@userActions/Report';
+import CONST from '@src/CONST';
+import type SCREENS from '@src/SCREENS';
+
+type NotificationPreferencePageProps = WithReportOrNotFoundProps & StackScreenProps<ReportSettingsNavigatorParamList, typeof SCREENS.REPORT_SETTINGS.NOTIFICATION_PREFERENCES>;
+
+function NotificationPreferencePage({report}: NotificationPreferencePageProps) {
+    const {translate} = useLocalize();
+    const shouldDisableNotificationPreferences = ReportUtils.isArchivedRoom(report);
+    const notificationPreferenceOptions = Object.values(CONST.REPORT.NOTIFICATION_PREFERENCE)
+        .filter((pref) => pref !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN)
+        .map((preference) => ({
+            value: preference,
+            text: translate(`notificationPreferencesPage.notificationPreferences.${preference}`),
+            keyForList: preference,
+            isSelected: preference === report?.notificationPreference,
+        }));
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID={NotificationPreferencePage.displayName}
+        >
+            <FullPageNotFoundView shouldShow={shouldDisableNotificationPreferences}>
+                <HeaderWithBackButton
+                    title={translate('notificationPreferencesPage.header')}
+                    onBackButtonPress={() => ReportUtils.goBackToDetailsPage(report)}
+                />
+                <SelectionList
+                    sections={[{data: notificationPreferenceOptions}]}
+                    onSelectRow={(option) =>
+                        report && ReportActions.updateNotificationPreference(report.reportID, report.notificationPreference, option.value, true, undefined, undefined, report)
+                    }
+                    initiallyFocusedOptionKey={notificationPreferenceOptions.find((locale) => locale.isSelected)?.keyForList}
+                />
+            </FullPageNotFoundView>
+        </ScreenWrapper>
+    );
+}
+
+NotificationPreferencePage.displayName = 'NotificationPreferencePage';
+
+export default withReportOrNotFound()(NotificationPreferencePage);