From 31581f9c234322f98b4274de43f15a85c924f260 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Thu, 18 Jan 2024 16:24:22 +0000 Subject: [PATCH 001/130] refactor(typescript): migrate workspacenewroompage --- src/components/ScreenWrapper.tsx | 14 +- src/libs/ErrorUtils.ts | 5 +- src/libs/ValidationUtils.ts | 8 +- ...ewRoomPage.js => WorkspaceNewRoomPage.tsx} | 194 +++++++----------- 4 files changed, 96 insertions(+), 125 deletions(-) rename src/pages/workspace/{WorkspaceNewRoomPage.js => WorkspaceNewRoomPage.tsx} (73%) diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index 0653e2ff8577..b2815d02dcd6 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -24,7 +24,7 @@ import SafeAreaConsumer from './SafeAreaConsumer'; import TestToolsModal from './TestToolsModal'; type ChildrenProps = { - insets?: EdgeInsets; + insets: EdgeInsets; safeAreaPaddingBottomStyle?: { paddingBottom?: DimensionValue; }; @@ -190,7 +190,17 @@ function ScreenWrapper( return ( - {({insets, paddingTop, paddingBottom, safeAreaPaddingBottomStyle}) => { + {({ + insets = { + top: 0, + bottom: 0, + left: 0, + right: 0, + }, + paddingTop, + paddingBottom, + safeAreaPaddingBottomStyle, + }) => { const paddingStyle: StyleProp = {}; if (includePaddingTop) { diff --git a/src/libs/ErrorUtils.ts b/src/libs/ErrorUtils.ts index 159a5817189b..68bfbe706ac6 100644 --- a/src/libs/ErrorUtils.ts +++ b/src/libs/ErrorUtils.ts @@ -1,9 +1,10 @@ import CONST from '@src/CONST'; -import type {TranslationFlatObject, TranslationPaths} from '@src/languages/types'; +import type {TranslationFlatObject} from '@src/languages/types'; import type {ErrorFields, Errors} from '@src/types/onyx/OnyxCommon'; import type Response from '@src/types/onyx/Response'; import DateUtils from './DateUtils'; import * as Localize from './Localize'; +import type {MaybePhraseKey} from './Localize'; function getAuthenticateErrorMessage(response: Response): keyof TranslationFlatObject { switch (response.jsonCode) { @@ -101,7 +102,7 @@ type ErrorsList = Record; * @param errorList - An object containing current errors in the form * @param message - Message to assign to the inputID errors */ -function addErrorMessage(errors: ErrorsList, inputID?: string, message?: TKey) { +function addErrorMessage(errors: ErrorsList, inputID?: string, message?: MaybePhraseKey) { if (!message || !inputID) { return; } diff --git a/src/libs/ValidationUtils.ts b/src/libs/ValidationUtils.ts index 9ba11fb16d6a..4a98a2e99f06 100644 --- a/src/libs/ValidationUtils.ts +++ b/src/libs/ValidationUtils.ts @@ -3,6 +3,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'; @@ -354,8 +355,11 @@ function isReservedRoomName(roomName: string): boolean { /** * Checks if the room name already exists. */ -function isExistingRoomName(roomName: string, reports: Record, policyID: string): boolean { - return Object.values(reports).some((report) => report && report.policyID === policyID && report.reportName === roomName); +function isExistingRoomName(roomName: string, reports: OnyxCollection, policyID: string): boolean { + if (!reports) { + return false; + } + return Object.values(reports).some((report) => report?.policyID === policyID && report?.reportName === roomName); } /** diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.tsx similarity index 73% rename from src/pages/workspace/WorkspaceNewRoomPage.js rename to src/pages/workspace/WorkspaceNewRoomPage.tsx index 35fab36e5d41..318c3a4d744b 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.tsx @@ -1,8 +1,9 @@ -import PropTypes from 'prop-types'; +import {useIsFocused} from '@react-navigation/core'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; +import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; +import type {ValueOf} from 'type-fest'; import BlockingView from '@components/BlockingViews/BlockingView'; import Button from '@components/Button'; import FormProvider from '@components/Form/FormProvider'; @@ -14,14 +15,12 @@ import RoomNameInput from '@components/RoomNameInput'; import ScreenWrapper from '@components/ScreenWrapper'; import TextInput from '@components/TextInput'; import ValuePicker from '@components/ValuePicker'; -import withNavigationFocus from '@components/withNavigationFocus'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import compose from '@libs/compose'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -32,98 +31,58 @@ import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type {Account, Form, Policy, Report as ReportType, Session} from '@src/types/onyx'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; -const propTypes = { - /** All reports shared with the user */ - reports: PropTypes.shape({ - /** The report name */ - reportName: PropTypes.string, - - /** The report type */ - type: PropTypes.string, - - /** ID of the policy */ - policyID: PropTypes.string, - }), - - /** The list of policies the user has access to. */ - policies: PropTypes.objectOf( - PropTypes.shape({ - /** The policy type */ - type: PropTypes.oneOf(_.values(CONST.POLICY.TYPE)), - - /** The name of the policy */ - name: PropTypes.string, - - /** The ID of the policy */ - id: PropTypes.string, - }), - ), - - /** Whether navigation is focused */ - isFocused: PropTypes.bool.isRequired, - - /** Form state for NEW_ROOM_FORM */ - formState: PropTypes.shape({ - /** Loading state for the form */ - isLoading: PropTypes.bool, - - /** Field errors in the form */ - errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)), - }), - - /** Session details for the user */ - session: PropTypes.shape({ - /** accountID of current user */ - accountID: PropTypes.number, - }), - - /** policyID for main workspace */ - activePolicyID: PropTypes.string, +type FormValues = { + welcomeMessage: string; + roomName: string; + policyID: string | null; + writeCapability: ValueOf; + visibility: ValueOf; }; -const defaultProps = { - reports: {}, - policies: {}, - formState: { - isLoading: false, - errorFields: {}, - }, - session: { - accountID: 0, - }, - activePolicyID: null, + +type WorkspaceNewRoomPageOnyxProps = { + policies: OnyxCollection; + reports: OnyxCollection; + formState: OnyxEntry
; + session: OnyxEntry; + activePolicyID: OnyxEntry['activePolicyID']>; }; -function WorkspaceNewRoomPage(props) { +type WorkspaceNewRoomPageProps = WorkspaceNewRoomPageOnyxProps; + +function WorkspaceNewRoomPage({policies, reports, formState, session, activePolicyID}: WorkspaceNewRoomPageProps) { const styles = useThemeStyles(); + const isFocused = useIsFocused(); const {translate} = useLocalize(); const {isOffline} = useNetwork(); const {isSmallScreenWidth} = useWindowDimensions(); - const [visibility, setVisibility] = useState(CONST.REPORT.VISIBILITY.RESTRICTED); - const [policyID, setPolicyID] = useState(props.activePolicyID); - const [writeCapability, setWriteCapability] = useState(CONST.REPORT.WRITE_CAPABILITIES.ALL); - const wasLoading = usePrevious(props.formState.isLoading); + const [visibility, setVisibility] = useState(CONST.REPORT.VISIBILITY.RESTRICTED); + const [policyID, setPolicyID] = useState(activePolicyID); + const [writeCapability, setWriteCapability] = useState(CONST.REPORT.WRITE_CAPABILITIES.ALL); + const wasLoading = usePrevious(!!formState?.isLoading); const visibilityDescription = useMemo(() => translate(`newRoomPage.${visibility}Description`), [translate, visibility]); const isPolicyAdmin = useMemo(() => { if (!policyID) { return false; } - return ReportUtils.isPolicyAdmin(policyID, props.policies); - }, [policyID, props.policies]); - const [newRoomReportID, setNewRoomReportID] = useState(undefined); + return ReportUtils.isPolicyAdmin(policyID, policies); + }, [policyID, policies]); + const [newRoomReportID, setNewRoomReportID] = useState(); /** - * @param {Object} values - form input values passed by the Form component + * @param values - form input values passed by the Form component */ - const submit = (values) => { - const participants = [props.session.accountID]; + const submit = (values: FormValues) => { + const participants = session ? [session.accountID ?? -1] : []; const parsedWelcomeMessage = ReportUtils.getParsedComment(values.welcomeMessage); const policyReport = ReportUtils.buildOptimisticChatReport( participants, values.roomName, CONST.REPORT.CHAT_TYPE.POLICY_ROOM, - policyID, + policyID ?? undefined, CONST.REPORT.OWNER_ACCOUNT_ID_FAKE, false, '', @@ -146,16 +105,16 @@ function WorkspaceNewRoomPage(props) { if (policyID) { return; } - setPolicyID(props.activePolicyID); - }, [props.activePolicyID, policyID]); + setPolicyID(activePolicyID); + }, [activePolicyID, policyID]); useEffect(() => { - if (!(((wasLoading && !props.formState.isLoading) || (isOffline && props.formState.isLoading)) && _.isEmpty(props.formState.errorFields))) { + if (!(((wasLoading && !formState?.isLoading) || (isOffline && formState?.isLoading)) && isEmptyObject(formState?.errorFields))) { return; } Navigation.dismissModal(newRoomReportID); // eslint-disable-next-line react-hooks/exhaustive-deps -- we just want this to update on changing the form State - }, [props.formState]); + }, [formState]); useEffect(() => { if (isPolicyAdmin) { @@ -170,8 +129,8 @@ function WorkspaceNewRoomPage(props) { * @returns {Boolean} */ const validate = useCallback( - (values) => { - const errors = {}; + (values: FormValues) => { + const errors: Record = {}; if (!values.roomName || values.roomName === CONST.POLICY.ROOM_PREFIX) { // We error if the user doesn't enter a room name or left blank @@ -182,7 +141,7 @@ function WorkspaceNewRoomPage(props) { } else if (ValidationUtils.isReservedRoomName(values.roomName)) { // Certain names are reserved for default rooms and should not be used for policy rooms. ErrorUtils.addErrorMessage(errors, 'roomName', ['newRoomPage.roomNameReservedError', {reservedName: values.roomName}]); - } else if (ValidationUtils.isExistingRoomName(values.roomName, props.reports, values.policyID)) { + } else if (ValidationUtils.isExistingRoomName(values.roomName, reports, values.policyID ?? '')) { // Certain names are reserved for default rooms and should not be used for policy rooms. ErrorUtils.addErrorMessage(errors, 'roomName', 'newRoomPage.roomAlreadyExistsError'); } @@ -193,22 +152,22 @@ function WorkspaceNewRoomPage(props) { return errors; }, - [props.reports], + [reports], ); const workspaceOptions = useMemo( () => - _.map(PolicyUtils.getActivePolicies(props.policies), (policy) => ({ + PolicyUtils.getActivePolicies(policies)?.map((policy) => ({ label: policy.name, key: policy.id, value: policy.id, - })), - [props.policies], + })) ?? [], + [policies], ); const writeCapabilityOptions = useMemo( () => - _.map(CONST.REPORT.WRITE_CAPABILITIES, (value) => ({ + Object.values(CONST.REPORT.WRITE_CAPABILITIES).map((value) => ({ value, label: translate(`writeCapabilityPage.writeCapability.${value}`), })), @@ -217,14 +176,13 @@ function WorkspaceNewRoomPage(props) { const visibilityOptions = useMemo( () => - _.map( - _.filter(_.values(CONST.REPORT.VISIBILITY), (visibilityOption) => visibilityOption !== CONST.REPORT.VISIBILITY.PUBLIC_ANNOUNCE), - (visibilityOption) => ({ + Object.values(CONST.REPORT.VISIBILITY) + .filter((visibilityOption) => visibilityOption !== CONST.REPORT.VISIBILITY.PUBLIC_ANNOUNCE) + .map((visibilityOption) => ({ label: translate(`newRoomPage.visibilityOptions.${visibilityOption}`), value: visibilityOption, description: translate(`newRoomPage.${visibilityOption}Description`), - }), - ), + })), [translate], ); @@ -270,6 +228,7 @@ function WorkspaceNewRoomPage(props) { // This is because when wrapping whole screen the screen was freezing when changing Tabs. keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top} > + {/** @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript. */} (account && account.activePolicyID) || null, - initialValue: null, - }, - }), -)(WorkspaceNewRoomPage); +export default withOnyx({ + policies: { + key: ONYXKEYS.COLLECTION.POLICY, + }, + reports: { + key: ONYXKEYS.COLLECTION.REPORT, + }, + formState: { + key: ONYXKEYS.FORMS.NEW_ROOM_FORM, + }, + session: { + key: ONYXKEYS.SESSION, + }, + activePolicyID: { + key: ONYXKEYS.ACCOUNT, + selector: (account) => account?.activePolicyID ?? null, + initialValue: null, + }, +})(WorkspaceNewRoomPage); From d9fb612f3a622ce1e205c915e05fec790ec62d17 Mon Sep 17 00:00:00 2001 From: Pedro Guerreiro Date: Fri, 19 Jan 2024 17:17:18 +0000 Subject: [PATCH 002/130] refactor(typescript): apply pull request feedback --- src/pages/workspace/WorkspaceNewRoomPage.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/pages/workspace/WorkspaceNewRoomPage.tsx b/src/pages/workspace/WorkspaceNewRoomPage.tsx index 318c3a4d744b..27063d01fe33 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.tsx +++ b/src/pages/workspace/WorkspaceNewRoomPage.tsx @@ -32,6 +32,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Account, Form, Policy, Report as ReportType, Session} from '@src/types/onyx'; +import type * as OnyxCommon from '@src/types/onyx/OnyxCommon'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; type FormValues = { @@ -43,10 +44,19 @@ type FormValues = { }; type WorkspaceNewRoomPageOnyxProps = { + /** The list of policies the user has access to. */ policies: OnyxCollection; + + /** All reports shared with the user */ reports: OnyxCollection; + + /** Form state for NEW_ROOM_FORM */ formState: OnyxEntry; + + /** Session details for the user */ session: OnyxEntry; + + /** policyID for main workspace */ activePolicyID: OnyxEntry['activePolicyID']>; }; @@ -76,7 +86,7 @@ function WorkspaceNewRoomPage({policies, reports, formState, session, activePoli * @param values - form input values passed by the Form component */ const submit = (values: FormValues) => { - const participants = session ? [session.accountID ?? -1] : []; + const participants = session?.accountID ? [session.accountID] : []; const parsedWelcomeMessage = ReportUtils.getParsedComment(values.welcomeMessage); const policyReport = ReportUtils.buildOptimisticChatReport( participants, @@ -125,12 +135,12 @@ function WorkspaceNewRoomPage({policies, reports, formState, session, activePoli }, [isPolicyAdmin]); /** - * @param {Object} values - form input values passed by the Form component - * @returns {Boolean} + * @param values - form input values passed by the Form component + * @returns an object containing validation errors, if any were found during validation */ const validate = useCallback( - (values: FormValues) => { - const errors: Record = {}; + (values: FormValues): OnyxCommon.Errors => { + const errors: OnyxCommon.Errors = {}; if (!values.roomName || values.roomName === CONST.POLICY.ROOM_PREFIX) { // We error if the user doesn't enter a room name or left blank From c1ae7b2d926a9b0eeb7a979316613f61bed16b93 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 24 Jan 2024 08:32:01 +0100 Subject: [PATCH 003/130] start migrating WorkspaceMembersPage to TypeScript --- ...embersPage.js => WorkspaceMembersPage.tsx} | 223 ++++++++++-------- 1 file changed, 127 insertions(+), 96 deletions(-) rename src/pages/workspace/{WorkspaceMembersPage.js => WorkspaceMembersPage.tsx} (67%) diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.tsx similarity index 67% rename from src/pages/workspace/WorkspaceMembersPage.js rename to src/pages/workspace/WorkspaceMembersPage.tsx index 92bc5ecc8e9c..7d29d6e72978 100644 --- a/src/pages/workspace/WorkspaceMembersPage.js +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -1,8 +1,11 @@ import {useIsFocused} from '@react-navigation/native'; +import type {StackScreenProps} from '@react-navigation/stack'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; +import type {TextInput} from 'react-native'; import {InteractionManager, View} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; @@ -10,20 +13,20 @@ import Button from '@components/Button'; import ConfirmModal from '@components/ConfirmModal'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import MessagesRow from '@components/MessagesRow'; -import networkPropTypes from '@components/networkPropTypes'; -import {withNetwork} from '@components/OnyxProvider'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import Text from '@components/Text'; +import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useLocalize from '@hooks/useLocalize'; +import useNetwork from '@hooks/useNetwork'; import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; +import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -33,8 +36,12 @@ import * as Policy from '@userActions/Policy'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; +import type {PersonalDetailsList, PolicyMembers, Session} from '@src/types/onyx'; +import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon'; import SearchInputManager from './SearchInputManager'; import {policyDefaultProps, policyPropTypes} from './withPolicy'; +import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; const propTypes = { @@ -58,10 +65,32 @@ const propTypes = { isLoadingReportData: PropTypes.bool, ...policyPropTypes, - ...withLocalizePropTypes, - ...windowDimensionsPropTypes, ...withCurrentUserPersonalDetailsPropTypes, - network: networkPropTypes.isRequired, +}; + +type WorkspaceMembersPageOnyxProps = { + personalDetails: OnyxEntry; + session: OnyxEntry; + isLoadingReportData: OnyxEntry; +}; + +type WorkspaceMembersPageProps = Omit & + WithCurrentUserPersonalDetailsProps & + WorkspaceMembersPageOnyxProps & + StackScreenProps; + +type MemberOption = { + keyForList: string; + accountID: number; + isSelected: boolean; + isDisabled: boolean; + text: string; + alternateText: string; + rightElement: React.ReactNode | null; + icons: Icon[]; + errors?: Errors; + pendingAction?: PendingAction; + invitedSecondaryLogin?: string; }; const defaultProps = { @@ -74,18 +103,20 @@ const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, }; -function WorkspaceMembersPage(props) { +function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, session, currentUserPersonalDetails, isLoadingReportData}: WorkspaceMembersPageProps) { const styles = useThemeStyles(); const [selectedEmployees, setSelectedEmployees] = useState([]); const [removeMembersConfirmModalVisible, setRemoveMembersConfirmModalVisible] = useState(false); const [errors, setErrors] = useState({}); const [searchValue, setSearchValue] = useState(''); - const prevIsOffline = usePrevious(props.network.isOffline); - const accountIDs = useMemo(() => _.map(_.keys(props.policyMembers), (accountID) => Number(accountID)), [props.policyMembers]); + const {isOffline} = useNetwork(); + const prevIsOffline = usePrevious(isOffline); + const accountIDs = useMemo(() => Object.keys(policyMembers ?? {}).map((accountID) => Number(accountID)), [policyMembers]); const prevAccountIDs = usePrevious(accountIDs); - const textInputRef = useRef(null); - const isOfflineAndNoMemberDataAvailable = _.isEmpty(props.policyMembers) && props.network.isOffline; - const prevPersonalDetails = usePrevious(props.personalDetails); + const textInputRef = useRef(null); + const isOfflineAndNoMemberDataAvailable = _.isEmpty(policyMembers) && isOffline; + const prevPersonalDetails = usePrevious(personalDetails); + const {translate, formatPhoneNumber, preferredLocale} = useLocalize(); const isFocusedScreen = useIsFocused(); @@ -93,51 +124,49 @@ function WorkspaceMembersPage(props) { setSearchValue(SearchInputManager.searchInput); }, [isFocusedScreen]); - useEffect(() => () => (SearchInputManager.searchInput = ''), []); + useEffect(() => { + SearchInputManager.searchInput = ''; + }, []); /** * Get filtered personalDetails list with current policyMembers - * @param {Object} policyMembers - * @param {Object} personalDetails - * @returns {Object} + * @param policyMembers + * @param personalDetails + * @returns */ - const filterPersonalDetails = (policyMembers, personalDetails) => - _.reduce( - _.keys(policyMembers), - (result, key) => { - if (personalDetails[key]) { - return { - ...result, - [key]: personalDetails[key], - }; - } - return result; - }, - {}, - ); + const filterPersonalDetails = (members: OnyxEntry, details: OnyxEntry) => + Object.keys(members ?? {}).reduce((result, key) => { + if (details?.[key]) { + return { + ...result, + [key]: details[key], + }; + } + return result; + }, {}); /** * Get members for the current workspace */ const getWorkspaceMembers = useCallback(() => { - Policy.openWorkspaceMembersPage(props.route.params.policyID, _.keys(PolicyUtils.getMemberAccountIDsForWorkspace(props.policyMembers, props.personalDetails))); - }, [props.route.params.policyID, props.policyMembers, props.personalDetails]); + Policy.openWorkspaceMembersPage(route.params.policyID, Object.keys(PolicyUtils.getMemberAccountIDsForWorkspace(policyMembers, personalDetails))); + }, [route.params.policyID, policyMembers, personalDetails]); /** * Check if the current selection includes members that cannot be removed */ const validateSelection = useCallback(() => { const newErrors = {}; - const ownerAccountID = _.first(PersonalDetailsUtils.getAccountIDsByLogins(props.policy.owner ? [props.policy.owner] : [])); + const ownerAccountID = PersonalDetailsUtils.getAccountIDsByLogins(policy?.owner ? [policy.owner] : [])[0]; _.each(selectedEmployees, (member) => { - if (member !== ownerAccountID && member !== props.session.accountID) { + if (member !== ownerAccountID && member !== session.accountID) { return; } - newErrors[member] = props.translate('workspace.people.error.cannotRemove'); + newErrors[member] = translate('workspace.people.error.cannotRemove'); }); setErrors(newErrors); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedEmployees, props.policy.owner, props.session.accountID]); + }, [selectedEmployees, policy?.owner, session?.accountID]); useEffect(() => { getWorkspaceMembers(); @@ -146,7 +175,7 @@ function WorkspaceMembersPage(props) { useEffect(() => { validateSelection(); - }, [props.preferredLocale, validateSelection]); + }, [preferredLocale, validateSelection]); useEffect(() => { if (removeMembersConfirmModalVisible && !_.isEqual(accountIDs, prevAccountIDs)) { @@ -154,32 +183,32 @@ function WorkspaceMembersPage(props) { } setSelectedEmployees((prevSelected) => { // Filter all personal details in order to use the elements needed for the current workspace - const currentPersonalDetails = filterPersonalDetails(props.policyMembers, props.personalDetails); + const currentPersonalDetails = filterPersonalDetails(policyMembers, personalDetails); // We need to filter the previous selected employees by the new personal details, since unknown/new user id's change when transitioning from offline to online const prevSelectedElements = _.map(prevSelected, (id) => { const prevItem = lodashGet(prevPersonalDetails, id); const res = _.find(_.values(currentPersonalDetails), (item) => lodashGet(prevItem, 'login') === lodashGet(item, 'login')); return lodashGet(res, 'accountID', id); }); - return _.intersection(prevSelectedElements, _.values(PolicyUtils.getMemberAccountIDsForWorkspace(props.policyMembers, props.personalDetails))); + return _.intersection(prevSelectedElements, _.values(PolicyUtils.getMemberAccountIDsForWorkspace(policyMembers, personalDetails))); }); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [props.policyMembers]); + }, [policyMembers]); useEffect(() => { - const isReconnecting = prevIsOffline && !props.network.isOffline; + const isReconnecting = prevIsOffline && !isOffline; if (!isReconnecting) { return; } getWorkspaceMembers(); - }, [props.network.isOffline, prevIsOffline, getWorkspaceMembers]); + }, [isOffline, prevIsOffline, getWorkspaceMembers]); /** * Open the modal to invite a user */ const inviteUser = () => { setSearchValue(''); - Navigation.navigate(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID)); + Navigation.navigate(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID)); }; /** @@ -191,9 +220,9 @@ function WorkspaceMembersPage(props) { } // Remove the admin from the list - const accountIDsToRemove = _.without(selectedEmployees, props.session.accountID); + const accountIDsToRemove = _.without(selectedEmployees, session.accountID); - Policy.removeMembers(accountIDsToRemove, props.route.params.policyID); + Policy.removeMembers(accountIDsToRemove, route.params.policyID); setSelectedEmployees([]); setRemoveMembersConfirmModalVisible(false); }; @@ -210,7 +239,7 @@ function WorkspaceMembersPage(props) { /** * Add or remove all users passed from the selectedEmployees list - * @param {Object} memberList + * @param memberList */ const toggleAllUsers = (memberList) => { const enabledAccounts = _.filter(memberList, (member) => !member.isDisabled); @@ -283,37 +312,39 @@ function WorkspaceMembersPage(props) { const dismissError = useCallback( (item) => { if (item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) { - Policy.clearDeleteMemberError(props.route.params.policyID, item.accountID); + Policy.clearDeleteMemberError(route.params.policyID, item.accountID); } else { - Policy.clearAddMemberError(props.route.params.policyID, item.accountID); + Policy.clearAddMemberError(route.params.policyID, item.accountID); } }, - [props.route.params.policyID], + [route.params.policyID], ); /** * Check if the policy member is deleted from the workspace * - * @param {Object} policyMember - * @returns {Boolean} + * @param policyMember + * @returns */ - const isDeletedPolicyMember = (policyMember) => !props.network.isOffline && policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && _.isEmpty(policyMember.errors); - const policyOwner = lodashGet(props.policy, 'owner'); - const currentUserLogin = lodashGet(props.currentUserPersonalDetails, 'login'); - const policyID = lodashGet(props.route, 'params.policyID'); - const policyName = lodashGet(props.policy, 'name'); - const invitedPrimaryToSecondaryLogins = _.invert(props.policy.primaryLoginsInvited); + const isDeletedPolicyMember = (policyMember) => !isOffline && policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && _.isEmpty(policyMember.errors); + const policyOwner = lodashGet(policy, 'owner'); + const currentUserLogin = lodashGet(currentUserPersonalDetails, 'login'); + const policyID = lodashGet(route, 'params.policyID'); + const policyName = lodashGet(policy, 'name'); + const invitedPrimaryToSecondaryLogins = _.invert(policy?.primaryLoginsInvited); const getMemberOptions = () => { - let result = []; + let result: MemberOption[] = []; - _.each(props.policyMembers, (policyMember, accountIDKey) => { + console.log('*** POLICY MEMBERS ***', policyMembers); + + Object.entries(policyMembers ?? {}).forEach(([accountIDKey, policyMember]) => { const accountID = Number(accountIDKey); if (isDeletedPolicyMember(policyMember)) { return; } - const details = props.personalDetails[accountID]; + const details = personalDetails?.[accountID]; if (!details) { Log.hmmm(`[WorkspaceMembersPage] no personal details found for policy member with accountID: ${accountID}`); @@ -347,34 +378,34 @@ function WorkspaceMembersPage(props) { // If this policy is owned by Expensify then show all support (expensify.com or team.expensify.com) emails // We don't want to show guides as policy members unless the user is a guide. Some customers get confused when they // see random people added to their policy, but guides having access to the policies help set them up. - if (PolicyUtils.isExpensifyTeam(details.login || details.displayName)) { + if (PolicyUtils.isExpensifyTeam(details?.login ?? details?.displayName ?? '')) { if (policyOwner && currentUserLogin && !PolicyUtils.isExpensifyTeam(policyOwner) && !PolicyUtils.isExpensifyTeam(currentUserLogin)) { return; } } - const isAdmin = props.session.email === details.login || policyMember.role === CONST.POLICY.ROLE.ADMIN; + const isAdmin = session?.email === details.login || policyMember.role === CONST.POLICY.ROLE.ADMIN; result.push({ keyForList: accountIDKey, accountID, - isSelected: _.contains(selectedEmployees, accountID), + isSelected: selectedEmployees.includes(accountID), isDisabled: - accountID === props.session.accountID || - details.login === props.policy.owner || + accountID === session?.accountID || + details.login === policy?.owner || policyMember.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || - !_.isEmpty(policyMember.errors), - text: props.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(details)), - alternateText: props.formatPhoneNumber(details.login), + Object.keys(policyMember.errors ?? {}).length > 0, + text: formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(details)), + alternateText: formatPhoneNumber(details?.login ?? ''), rightElement: isAdmin ? ( - {props.translate('common.admin')} + {translate('common.admin')} ) : null, icons: [ { source: UserUtils.getAvatar(details.avatar, accountID), - name: props.formatPhoneNumber(details.login), + name: formatPhoneNumber(details?.login ?? ''), type: CONST.ICON_TYPE_AVATAR, id: accountID, }, @@ -383,11 +414,11 @@ function WorkspaceMembersPage(props) { pendingAction: policyMember.pendingAction, // Note which secondary login was used to invite this primary login - invitedSecondaryLogin: invitedPrimaryToSecondaryLogins[details.login] || '', + invitedSecondaryLogin: details?.login ? invitedPrimaryToSecondaryLogins[details.login] ?? '' : '', }); }); - result = _.sortBy(result, (value) => value.text.toLowerCase()); + result = result.sort((a, b) => a.text.localeCompare(b.text.toLowerCase())); return result; }; @@ -395,9 +426,9 @@ function WorkspaceMembersPage(props) { const getHeaderMessage = () => { if (isOfflineAndNoMemberDataAvailable) { - return props.translate('workspace.common.mustBeOnlineToViewMembers'); + return translate('workspace.common.mustBeOnlineToViewMembers'); } - return searchValue.trim() && !data.length ? props.translate('workspace.common.memberNotFound') : ''; + return searchValue.trim() && !data.length ? translate('workspace.common.memberNotFound') : ''; }; const getHeaderContent = () => { @@ -407,13 +438,12 @@ function WorkspaceMembersPage(props) { return ( Policy.dismissAddedWithPrimaryLoginMessages(policyID)} /> ); }; - return ( Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)} > { setSearchValue(''); @@ -437,28 +467,28 @@ function WorkspaceMembersPage(props) { /> setRemoveMembersConfirmModalVisible(false)} - prompt={props.translate('workspace.people.removeMembersPrompt')} - confirmText={props.translate('common.remove')} - cancelText={props.translate('common.cancel')} - onModalHide={() => + prompt={translate('workspace.people.removeMembersPrompt')} + confirmText={translate('common.remove')} + cancelText={translate('common.cancel')} + onModalHide={() => { InteractionManager.runAfterInteractions(() => { if (!textInputRef.current) { return; } textInputRef.current.focus(); - }) - } + }); + }} />