[TS Migration] Migrate WorkspaceProfilePage and WorkspaceProfileCurrencyPage

src/CONST.ts

@@ -1515,6 +1515,7 @@ const CONST = {
         WORKSPACE_TRAVEL: 'WorkspaceBookTravel',
         WORKSPACE_MEMBERS: 'WorkspaceManageMembers',
         WORKSPACE_BANK_ACCOUNT: 'WorkspaceBankAccount',
+        WORKSPACE_SETTINGS: 'WorkspaceSettings',
     },
     get EXPENSIFY_EMAILS() {
         return [

src/ONYXKEYS.ts

@@ -393,7 +393,7 @@ type OnyxValues = {
     [ONYXKEYS.PERSONAL_DETAILS_LIST]: OnyxTypes.PersonalDetailsList;
     [ONYXKEYS.PRIVATE_PERSONAL_DETAILS]: OnyxTypes.PrivatePersonalDetails;
     [ONYXKEYS.TASK]: OnyxTypes.Task;
-    [ONYXKEYS.CURRENCY_LIST]: Record<string, OnyxTypes.Currency>;
+    [ONYXKEYS.CURRENCY_LIST]: OnyxTypes.CurrencyList;
     [ONYXKEYS.UPDATE_AVAILABLE]: boolean;
     [ONYXKEYS.SCREEN_SHARE_REQUEST]: OnyxTypes.ScreenShareRequest;
     [ONYXKEYS.COUNTRY_CODE]: number;

src/libs/UserUtils.ts

@@ -184,7 +184,7 @@ function getAvatarUrl(avatarSource: AvatarSource | undefined, accountID: number)
  * Avatars uploaded by users will have a _128 appended so that the asset server returns a small version.
  * This removes that part of the URL so the full version of the image can load.
  */
-function getFullSizeAvatar(avatarSource: AvatarSource, accountID: number): AvatarSource {
+function getFullSizeAvatar(avatarSource: AvatarSource, accountID?: number): AvatarSource {
     const source = getAvatar(avatarSource, accountID);
     if (typeof source !== 'string') {
         return source;

src/pages/workspace/WorkspaceOverviewCurrencyPage.js → src/pages/workspace/WorkspaceOverviewCurrencyPage.tsx

@@ -1,64 +1,61 @@
-import PropTypes from 'prop-types';
 import React, {useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import type {OnyxEntry} from 'react-native-onyx';
 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 compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as Policy from '@userActions/Policy';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {policyDefaultProps, policyPropTypes} from './withPolicy';
+import type {CurrencyList} from '@src/types/onyx/Currency';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 
-const propTypes = {
+type WorkspaceSettingsCurrentPageOnyxProps = {
     /** Constant, list of available currencies */
-    currencyList: PropTypes.objectOf(
-        PropTypes.shape({
-            /** Symbol of the currency */
-            symbol: PropTypes.string.isRequired,
-        }),
-    ),
-    isLoadingReportData: PropTypes.bool,
-    ...policyPropTypes,
+    currencyList: OnyxEntry<CurrencyList>;
 };
 
-const defaultProps = {
-    currencyList: {},
-    isLoadingReportData: true,
-    ...policyDefaultProps,
+type WorkspaceSettingsCurrentPageProps = WithPolicyAndFullscreenLoadingProps & WorkspaceSettingsCurrentPageOnyxProps;
+
+type WorkspaceSettingsCurrencyPageSectionItem = {
+    text: string;
+    keyForList: string;
+    isSelected: boolean;
 };
 
-const getDisplayText = (currencyCode, currencySymbol) => `${currencyCode} - ${currencySymbol}`;
+const getDisplayText = (currencyCode: string, currencySymbol: string) => `${currencyCode} - ${currencySymbol}`;
 
-function WorkspaceSettingsCurrencyPage({currencyList, policy, isLoadingReportData}) {
+function WorkspaceSettingsCurrencyPage({currencyList = {}, policy, isLoadingReportData = true}: WorkspaceSettingsCurrentPageProps) {
     const {translate} = useLocalize();
     const [searchText, setSearchText] = useState('');
     const trimmedText = searchText.trim().toLowerCase();
-    const currencyListKeys = _.keys(currencyList);
+    const currencyListKeys = Object.keys(currencyList ?? {});
 
-    const filteredItems = _.filter(currencyListKeys, (currencyCode) => {
-        const currency = currencyList[currencyCode];
-        return getDisplayText(currencyCode, currency.symbol).toLowerCase().includes(trimmedText);
+    const filteredItems = currencyListKeys.filter((currencyCode: string) => {
+        const currency = currencyList?.[currencyCode];
+        return getDisplayText(currencyCode, currency?.symbol ?? '')
+            .toLowerCase()
+            .includes(trimmedText);
     });
 
     let initiallyFocusedOptionKey;
 
-    const currencyItems = _.map(filteredItems, (currencyCode) => {
-        const currency = currencyList[currencyCode];
-        const isSelected = policy.outputCurrency === currencyCode;
+    const currencyItems: WorkspaceSettingsCurrencyPageSectionItem[] = filteredItems.map((currencyCode: string) => {
+        const currency = currencyList?.[currencyCode];
+        const isSelected = policy?.outputCurrency === currencyCode;
 
         if (isSelected) {
             initiallyFocusedOptionKey = currencyCode;
         }
 
         return {
-            text: getDisplayText(currencyCode, currency.symbol),
+            text: getDisplayText(currencyCode, currency?.symbol ?? ''),
             keyForList: currencyCode,
             isSelected,
         };
@@ -68,8 +65,8 @@ function WorkspaceSettingsCurrencyPage({currencyList, policy, isLoadingReportDat
 
     const headerMessage = searchText.trim() && !currencyItems.length ? translate('common.noResultsFound') : '';
 
-    const onSelectCurrency = (item) => {
-        Policy.updateGeneralSettings(policy.id, policy.name, item.keyForList);
+    const onSelectCurrency = (item: WorkspaceSettingsCurrencyPageSectionItem) => {
+        Policy.updateGeneralSettings(policy?.id ?? '', policy?.name ?? '', item.keyForList);
         Navigation.goBack();
     };
 
@@ -80,8 +77,8 @@ function WorkspaceSettingsCurrencyPage({currencyList, policy, isLoadingReportDat
         >
             <FullPageNotFoundView
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
-                shouldShow={(_.isEmpty(policy) && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)}
-                subtitleKey={_.isEmpty(policy) ? undefined : 'workspace.common.notAuthorized'}
+                shouldShow={(isEmptyObject(policy) && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)}
+                subtitleKey={isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized'}
             >
                 <HeaderWithBackButton
                     title={translate('workspace.editor.currencyInputLabel')}
@@ -104,12 +101,9 @@ function WorkspaceSettingsCurrencyPage({currencyList, policy, isLoadingReportDat
 }
 
 WorkspaceSettingsCurrencyPage.displayName = 'WorkspaceSettingsCurrencyPage';
-WorkspaceSettingsCurrencyPage.propTypes = propTypes;
-WorkspaceSettingsCurrencyPage.defaultProps = defaultProps;
 
-export default compose(
-    withPolicyAndFullscreenLoading,
-    withOnyx({
+export default withPolicyAndFullscreenLoading(
+    withOnyx<WorkspaceSettingsCurrentPageProps, WorkspaceSettingsCurrentPageOnyxProps>({
         currencyList: {key: ONYXKEYS.CURRENCY_LIST},
-    }),
-)(WorkspaceSettingsCurrencyPage);
+    })(WorkspaceSettingsCurrencyPage),
+);

src/pages/workspace/WorkspaceSettingsCurrencyPage.tsx

@@ -0,0 +1,109 @@
+import React, {useState} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+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 Navigation from '@libs/Navigation/Navigation';
+import * as PolicyUtils from '@libs/PolicyUtils';
+import * as Policy from '@userActions/Policy';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {CurrencyList} from '@src/types/onyx/Currency';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
+import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
+
+type WorkspaceSettingsCurrentPageOnyxProps = {
+    /** Constant, list of available currencies */
+    currencyList: OnyxEntry<CurrencyList>;
+};
+
+type WorkspaceSettingsCurrentPageProps = WithPolicyAndFullscreenLoadingProps & WorkspaceSettingsCurrentPageOnyxProps;
+
+type WorkspaceSettingsCurrencyPageSectionItem = {
+    text: string;
+    keyForList: string;
+    isSelected: boolean;
+};
+
+const getDisplayText = (currencyCode: string, currencySymbol: string) => `${currencyCode} - ${currencySymbol}`;
+
+function WorkspaceSettingsCurrencyPage({currencyList = {}, policy, isLoadingReportData = true}: WorkspaceSettingsCurrentPageProps) {
+    const {translate} = useLocalize();
+    const [searchText, setSearchText] = useState('');
+    const trimmedText = searchText.trim().toLowerCase();
+    const currencyListKeys = Object.keys(currencyList ?? {});
+
+    const filteredItems = currencyListKeys.filter((currencyCode: string) => {
+        const currency = currencyList?.[currencyCode];
+        return getDisplayText(currencyCode, currency?.symbol ?? '')
+            .toLowerCase()
+            .includes(trimmedText);
+    });
+
+    let initiallyFocusedOptionKey;
+
+    const currencyItems: WorkspaceSettingsCurrencyPageSectionItem[] = filteredItems.map((currencyCode: string) => {
+        const currency = currencyList?.[currencyCode];
+        const isSelected = policy?.outputCurrency === currencyCode;
+
+        if (isSelected) {
+            initiallyFocusedOptionKey = currencyCode;
+        }
+
+        return {
+            text: getDisplayText(currencyCode, currency?.symbol ?? ''),
+            keyForList: currencyCode,
+            isSelected,
+        };
+    });
+
+    const sections = [{data: currencyItems, indexOffset: 0}];
+
+    const headerMessage = searchText.trim() && !currencyItems.length ? translate('common.noResultsFound') : '';
+
+    const onSelectCurrency = (item: WorkspaceSettingsCurrencyPageSectionItem) => {
+        Policy.updateGeneralSettings(policy?.id ?? '', policy?.name ?? '', item.keyForList);
+        Navigation.goBack();
+    };
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID={WorkspaceSettingsCurrencyPage.displayName}
+        >
+            <FullPageNotFoundView
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
+                shouldShow={(isEmptyObject(policy) && !isLoadingReportData) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)}
+                subtitleKey={isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized'}
+            >
+                <HeaderWithBackButton
+                    title={translate('workspace.editor.currencyInputLabel')}
+                    onBackButtonPress={() => Navigation.goBack()}
+                />
+
+                <SelectionList
+                    sections={sections}
+                    textInputLabel={translate('workspace.editor.currencyInputLabel')}
+                    textInputValue={searchText}
+                    onChangeText={setSearchText}
+                    onSelectRow={onSelectCurrency}
+                    headerMessage={headerMessage}
+                    initiallyFocusedOptionKey={initiallyFocusedOptionKey}
+                    showScrollIndicator
+                />
+            </FullPageNotFoundView>
+        </ScreenWrapper>
+    );
+}
+
+WorkspaceSettingsCurrencyPage.displayName = 'WorkspaceSettingsCurrencyPage';
+
+export default withPolicyAndFullscreenLoading(
+    withOnyx<WorkspaceSettingsCurrentPageProps, WorkspaceSettingsCurrentPageOnyxProps>({
+        currencyList: {key: ONYXKEYS.CURRENCY_LIST},
+    })(WorkspaceSettingsCurrencyPage),
+);