From acadbb37c661bd0d66c8fb8322b801ac78b9670c Mon Sep 17 00:00:00 2001 From: brunovjk Date: Wed, 3 Apr 2024 22:18:19 -0300 Subject: [PATCH 01/31] add 'and use 'isSearchingForReports' to 'MoneyTemporaryForRefactorRequestParticipantsSelector' --- ...yTemporaryForRefactorRequestParticipantsSelector.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index a05167d5cedf..3dc9885cd230 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -59,6 +59,9 @@ const propTypes = { /** Whether the parent screen transition has ended */ didScreenTransitionEnd: PropTypes.bool, + + /** Whether or not we are searching for reports on the server */ + isSearchingForReports: PropTypes.bool, }; const defaultProps = { @@ -67,6 +70,7 @@ const defaultProps = { betas: [], dismissedReferralBanners: {}, didScreenTransitionEnd: false, + isSearchingForReports: false, }; function MoneyTemporaryForRefactorRequestParticipantsSelector({ @@ -79,6 +83,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ iouRequestType, dismissedReferralBanners, didScreenTransitionEnd, + isSearchingForReports, }) { const {translate} = useLocalize(); const styles = useThemeStyles(); @@ -368,6 +373,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ headerMessage={headerMessage} showLoadingPlaceholder={!areOptionsInitialized} rightHandSideComponent={itemRightSideComponent} + isLoadingNewOptions={!!isSearchingForReports} /> ); @@ -381,6 +387,10 @@ export default withOnyx({ dismissedReferralBanners: { key: ONYXKEYS.NVP_DISMISSED_REFERRAL_BANNERS, }, + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, + }, reports: { key: ONYXKEYS.COLLECTION.REPORT, }, From ce614a5267ef09af5bf91a078bb6ff6d02a449b0 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Mon, 8 Apr 2024 17:47:09 -0300 Subject: [PATCH 02/31] Add 'isSearchingForReports' prop and include it in component memoization --- .../MoneyTemporaryForRefactorRequestParticipantsSelector.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index 3dc9885cd230..f06e4e253bf3 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -406,6 +406,7 @@ export default withOnyx({ _.isEqual(prevProps.dismissedReferralBanners, nextProps.dismissedReferralBanners) && prevProps.iouRequestType === nextProps.iouRequestType && prevProps.iouType === nextProps.iouType && - _.isEqual(prevProps.betas, nextProps.betas), + _.isEqual(prevProps.betas, nextProps.betas) && + prevProps.isSearchingForReports === nextProps.isSearchingForReports, ), ); From 61b2f51e6b94558b2145968173abfd9d9c065e6d Mon Sep 17 00:00:00 2001 From: brunovjk Date: Tue, 9 Apr 2024 14:51:04 -0300 Subject: [PATCH 03/31] Add 'isSearchingForReports' to 'TaskAssigneeSelectorModal' --- src/pages/tasks/TaskAssigneeSelectorModal.tsx | 26 +++++++++++++------ 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.tsx b/src/pages/tasks/TaskAssigneeSelectorModal.tsx index 4ebabbce350e..a28ec49742da 100644 --- a/src/pages/tasks/TaskAssigneeSelectorModal.tsx +++ b/src/pages/tasks/TaskAssigneeSelectorModal.tsx @@ -1,7 +1,7 @@ /* eslint-disable es/no-optional-chaining */ import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; -import React, {useCallback, useMemo, useState} from 'react'; +import React, {useEffect, useCallback, useMemo, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; @@ -21,6 +21,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails' import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as ReportActions from '@libs/actions/Report'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; @@ -38,6 +39,10 @@ type TaskAssigneeSelectorModalOnyxProps = { /** Grab the Share destination of the Task */ task: OnyxEntry; + + /** Whether or not we are searching for reports on the server */ + isSearchingForReports: OnyxEntry; + }; type TaskAssigneeSelectorModalProps = TaskAssigneeSelectorModalOnyxProps & WithCurrentUserPersonalDetailsProps & WithNavigationTransitionEndProps; @@ -89,17 +94,13 @@ function useOptions() { return {...options, searchValue, debouncedSearchValue, setSearchValue, areOptionsInitialized}; } -function TaskAssigneeSelectorModal({reports, task}: TaskAssigneeSelectorModalProps) { +function TaskAssigneeSelectorModal({reports, task, isSearchingForReports}: TaskAssigneeSelectorModalProps) { const styles = useThemeStyles(); const route = useRoute>(); const {translate} = useLocalize(); const session = useSession(); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); - const {userToInvite, recentReports, personalDetails, currentUserOption, searchValue, setSearchValue, headerMessage, areOptionsInitialized} = useOptions(); - - const onChangeText = (newSearchTerm = '') => { - setSearchValue(newSearchTerm); - }; + const {userToInvite, recentReports, personalDetails, currentUserOption, searchValue, debouncedSearchValue, setSearchValue, headerMessage, areOptionsInitialized} = useOptions(); const report: OnyxEntry = useMemo(() => { if (!route.params?.reportID) { @@ -200,6 +201,10 @@ function TaskAssigneeSelectorModal({reports, task}: TaskAssigneeSelectorModalPro const canModifyTask = TaskActions.canModifyTask(report, currentUserPersonalDetails.accountID); const isTaskNonEditable = ReportUtils.isTaskReport(report) && (!canModifyTask || !isOpen); + useEffect(() => { + ReportActions.searchInServer(debouncedSearchValue); + }, [debouncedSearchValue]); + return ( @@ -230,6 +236,10 @@ function TaskAssigneeSelectorModal({reports, task}: TaskAssigneeSelectorModalPro TaskAssigneeSelectorModal.displayName = 'TaskAssigneeSelectorModal'; const TaskAssigneeSelectorModalWithOnyx = withOnyx({ + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, + }, reports: { key: ONYXKEYS.COLLECTION.REPORT, }, From a58ace4b0395de9a66c200ec0fb6cfde138437b2 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Tue, 9 Apr 2024 15:35:43 -0300 Subject: [PATCH 04/31] Add 'isSearchingForReports' to 'RoomInvitePage' --- src/pages/RoomInvitePage.tsx | 48 +++++++++++++++++++++++++++--------- 1 file changed, 36 insertions(+), 12 deletions(-) diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx index 49e53381e040..8ea883f1b1a5 100644 --- a/src/pages/RoomInvitePage.tsx +++ b/src/pages/RoomInvitePage.tsx @@ -2,6 +2,8 @@ import Str from 'expensify-common/lib/str'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import type {SectionListData} from 'react-native'; import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -12,8 +14,10 @@ import type {Section} from '@components/SelectionList/types'; import UserListItem from '@components/SelectionList/UserListItem'; import withNavigationTransitionEnd from '@components/withNavigationTransitionEnd'; import type {WithNavigationTransitionEndProps} from '@components/withNavigationTransitionEnd'; +import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as ReportActions from '@libs/actions/Report'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as LoginUtils from '@libs/LoginUtils'; import Navigation from '@libs/Navigation/Navigation'; @@ -24,6 +28,7 @@ import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Policy} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; @@ -31,14 +36,19 @@ import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound import withReportOrNotFound from './home/report/withReportOrNotFound'; import SearchInputManager from './workspace/SearchInputManager'; -type RoomInvitePageProps = WithReportOrNotFoundProps & WithNavigationTransitionEndProps; +type RoomInvitePageOnyxProps = { + /** Whether or not we are searching for reports on the server */ + isSearchingForReports: OnyxEntry; +}; + +type RoomInvitePageProps = WithReportOrNotFoundProps & WithNavigationTransitionEndProps & RoomInvitePageOnyxProps; type Sections = Array>>; -function RoomInvitePage({betas, report, policies}: RoomInvitePageProps) { +function RoomInvitePage({betas, report, policies, isSearchingForReports}: RoomInvitePageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const [searchTerm, setSearchTerm] = useState(''); + const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); const [selectedOptions, setSelectedOptions] = useState([]); const [invitePersonalDetails, setInvitePersonalDetails] = useState([]); const [userToInvite, setUserToInvite] = useState(null); @@ -58,7 +68,7 @@ function RoomInvitePage({betas, report, policies}: RoomInvitePageProps) { ); useEffect(() => { - const inviteOptions = OptionsListUtils.getMemberInviteOptions(options.personalDetails, betas ?? [], searchTerm, excludedUsers); + const inviteOptions = OptionsListUtils.getMemberInviteOptions(options.personalDetails, betas ?? [], debouncedSearchTerm, excludedUsers); // Update selectedOptions with the latest personalDetails information const detailsMap: Record = {}; @@ -77,7 +87,7 @@ function RoomInvitePage({betas, report, policies}: RoomInvitePageProps) { setInvitePersonalDetails(inviteOptions.personalDetails); setSelectedOptions(newSelectedOptions); // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change - }, [betas, searchTerm, excludedUsers, options.personalDetails]); + }, [betas, debouncedSearchTerm, excludedUsers, options.personalDetails]); const sections = useMemo(() => { const sectionsArr: Sections = []; @@ -88,12 +98,12 @@ function RoomInvitePage({betas, report, policies}: RoomInvitePageProps) { // Filter all options that is a part of the search term or in the personal details let filterSelectedOptions = selectedOptions; - if (searchTerm !== '') { + if (debouncedSearchTerm !== '') { filterSelectedOptions = selectedOptions.filter((option) => { const accountID = option?.accountID; const isOptionInPersonalDetails = invitePersonalDetails.some((personalDetail) => accountID && personalDetail?.accountID === accountID); - const parsedPhoneNumber = PhoneNumber.parsePhoneNumber(LoginUtils.appendCountryCode(Str.removeSMSDomain(searchTerm))); - const searchValue = parsedPhoneNumber.possible && parsedPhoneNumber.number ? parsedPhoneNumber.number.e164 : searchTerm.toLowerCase(); + const parsedPhoneNumber = PhoneNumber.parsePhoneNumber(LoginUtils.appendCountryCode(Str.removeSMSDomain(debouncedSearchTerm))); + const searchValue = parsedPhoneNumber.possible && parsedPhoneNumber.number ? parsedPhoneNumber.number.e164 : debouncedSearchTerm.toLowerCase(); const isPartOfSearchTerm = (option.text?.toLowerCase() ?? '').includes(searchValue) || (option.login?.toLowerCase() ?? '').includes(searchValue); return isPartOfSearchTerm || isOptionInPersonalDetails; }); @@ -124,7 +134,7 @@ function RoomInvitePage({betas, report, policies}: RoomInvitePageProps) { } return sectionsArr; - }, [areOptionsInitialized, selectedOptions, searchTerm, invitePersonalDetails, userToInvite, translate]); + }, [areOptionsInitialized, selectedOptions, debouncedSearchTerm, invitePersonalDetails, userToInvite, translate]); const toggleOption = useCallback( (option: OptionsListUtils.MemberForList) => { @@ -170,7 +180,7 @@ function RoomInvitePage({betas, report, policies}: RoomInvitePageProps) { }, [selectedOptions, backRoute, reportID, validate]); const headerMessage = useMemo(() => { - const searchValue = searchTerm.trim().toLowerCase(); + const searchValue = debouncedSearchTerm.trim().toLowerCase(); const expensifyEmails = CONST.EXPENSIFY_EMAILS as string[]; if (!userToInvite && expensifyEmails.includes(searchValue)) { return translate('messages.errorMessageInvalidEmail'); @@ -186,7 +196,11 @@ function RoomInvitePage({betas, report, policies}: RoomInvitePageProps) { return translate('messages.userIsAlreadyMember', {login: searchValue, name: reportName}); } return OptionsListUtils.getHeaderMessage(invitePersonalDetails.length !== 0, Boolean(userToInvite), searchValue); - }, [searchTerm, userToInvite, excludedUsers, invitePersonalDetails, translate, reportName]); + }, [debouncedSearchTerm, userToInvite, excludedUsers, invitePersonalDetails, translate, reportName]); + + useEffect(() => { + ReportActions.searchInServer(debouncedSearchTerm); + }, [debouncedSearchTerm]); return ( ({ + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, + }, + })(RoomInvitePage), + ), +); From 1de5419b4e6e10085e1551e8903220dd131d131a Mon Sep 17 00:00:00 2001 From: brunovjk Date: Tue, 9 Apr 2024 16:00:32 -0300 Subject: [PATCH 05/31] Add 'isSearchingForReports' to 'WorkspaceInvitePage' --- src/pages/workspace/WorkspaceInvitePage.tsx | 31 +++++++++++++++------ 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index 3f95c3e02a5b..1ba957511979 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -14,9 +14,11 @@ import InviteMemberListItem from '@components/SelectionList/InviteMemberListItem import type {Section} from '@components/SelectionList/types'; import withNavigationTransitionEnd from '@components/withNavigationTransitionEnd'; import type {WithNavigationTransitionEndProps} from '@components/withNavigationTransitionEnd'; +import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as ReportActions from '@libs/actions/Report'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as LoginUtils from '@libs/LoginUtils'; import Navigation from '@libs/Navigation/Navigation'; @@ -49,6 +51,9 @@ type WorkspaceInvitePageOnyxProps = { /** An object containing the accountID for every invited user email */ invitedEmailsToAccountIDsDraft: OnyxEntry; + + /** Whether or not we are searching for reports on the server */ + isSearchingForReports: OnyxEntry; }; type WorkspaceInvitePageProps = WithPolicyAndFullscreenLoadingProps & @@ -65,10 +70,11 @@ function WorkspaceInvitePage({ policy, isLoadingReportData = true, didScreenTransitionEnd, + isSearchingForReports, }: WorkspaceInvitePageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const [searchTerm, setSearchTerm] = useState(''); + const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); const [selectedOptions, setSelectedOptions] = useState([]); const [personalDetails, setPersonalDetails] = useState([]); const [usersToInvite, setUsersToInvite] = useState([]); @@ -102,7 +108,7 @@ function WorkspaceInvitePage({ const newPersonalDetailsDict: Record = {}; const newSelectedOptionsDict: Record = {}; - const inviteOptions = OptionsListUtils.getMemberInviteOptions(options.personalDetails, betas ?? [], searchTerm, excludedUsers, true); + const inviteOptions = OptionsListUtils.getMemberInviteOptions(options.personalDetails, betas ?? [], debouncedSearchTerm, excludedUsers, true); // Update selectedOptions with the latest personalDetails and policyMembers information const detailsMap: Record = {}; inviteOptions.personalDetails.forEach((detail) => { @@ -153,7 +159,7 @@ function WorkspaceInvitePage({ setSelectedOptions(Object.values(newSelectedOptionsDict)); // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change - }, [options.personalDetails, policyMembers, betas, searchTerm, excludedUsers]); + }, [options.personalDetails, policyMembers, betas, debouncedSearchTerm, excludedUsers]); const sections: MembersSection[] = useMemo(() => { const sectionsArr: MembersSection[] = []; @@ -164,12 +170,12 @@ function WorkspaceInvitePage({ // Filter all options that is a part of the search term or in the personal details let filterSelectedOptions = selectedOptions; - if (searchTerm !== '') { + if (debouncedSearchTerm !== '') { filterSelectedOptions = selectedOptions.filter((option) => { const accountID = option.accountID; const isOptionInPersonalDetails = Object.values(personalDetails).some((personalDetail) => personalDetail.accountID === accountID); - const searchValue = OptionsListUtils.getSearchValueForPhoneOrEmail(searchTerm); + const searchValue = OptionsListUtils.getSearchValueForPhoneOrEmail(debouncedSearchTerm); const isPartOfSearchTerm = !!option.text?.toLowerCase().includes(searchValue) || !!option.login?.toLowerCase().includes(searchValue); return isPartOfSearchTerm || isOptionInPersonalDetails; @@ -206,7 +212,7 @@ function WorkspaceInvitePage({ }); return sectionsArr; - }, [areOptionsInitialized, selectedOptions, searchTerm, personalDetails, translate, usersToInvite]); + }, [areOptionsInitialized, selectedOptions, debouncedSearchTerm, personalDetails, translate, usersToInvite]); const toggleOption = (option: MemberForList) => { Policy.clearErrors(route.params.policyID); @@ -254,7 +260,7 @@ function WorkspaceInvitePage({ const [policyName, shouldShowAlertPrompt] = useMemo(() => [policy?.name ?? '', !isEmptyObject(policy?.errors) || !!policy?.alertMessage], [policy]); const headerMessage = useMemo(() => { - const searchValue = searchTerm.trim().toLowerCase(); + const searchValue = debouncedSearchTerm.trim().toLowerCase(); if (usersToInvite.length === 0 && CONST.EXPENSIFY_EMAILS.some((email) => email === searchValue)) { return translate('messages.errorMessageInvalidEmail'); } @@ -269,7 +275,11 @@ function WorkspaceInvitePage({ return translate('messages.userIsAlreadyMember', {login: searchValue, name: policyName}); } return OptionsListUtils.getHeaderMessage(personalDetails.length !== 0, usersToInvite.length > 0, searchValue); - }, [excludedUsers, translate, searchTerm, policyName, usersToInvite, personalDetails.length]); + }, [excludedUsers, translate, debouncedSearchTerm, policyName, usersToInvite, personalDetails.length]); + + useEffect(() => { + ReportActions.searchInServer(debouncedSearchTerm); + }, [debouncedSearchTerm]); return ( `${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT}${route.params.policyID.toString()}`, }, + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, + }, })(WorkspaceInvitePage), ), ); From ad5e6f2289b7206631b919e6728fbba90628dd86 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Tue, 9 Apr 2024 16:59:48 -0300 Subject: [PATCH 06/31] Add 'isSearchingForReports' to 'BaseShareLogList' --- .../ShareLogList/BaseShareLogList.tsx | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx index 578efbe5317b..c53a20f7d5c3 100644 --- a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx +++ b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx @@ -1,4 +1,6 @@ -import React, {useMemo} from 'react'; +import React, {useEffect, useMemo} from 'react'; +import {withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {useBetas} from '@components/OnyxProvider'; import {useOptionsList} from '@components/OptionListContextProvider'; @@ -8,15 +10,23 @@ import UserListItem from '@components/SelectionList/UserListItem'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import * as ReportActions from '@libs/actions/Report'; import * as FileUtils from '@libs/fileDownload/FileUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Report} from '@src/types/onyx'; -import type {BaseShareLogListProps} from './types'; +import type {BaseShareLogListProps as BaseShareLogListTypeProps} from './types'; -function BaseShareLogList({onAttachLogToReport}: BaseShareLogListProps) { +type BaseShareLogListOnyxProps = { + /** Whether or not we are searching for reports on the server */ + isSearchingForReports: OnyxEntry; +}; + +type BaseShareLogListProps = BaseShareLogListTypeProps & BaseShareLogListOnyxProps; +function BaseShareLogList({onAttachLogToReport, isSearchingForReports}: BaseShareLogListProps) { const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); const {isOffline} = useNetwork(); const {translate} = useLocalize(); @@ -82,6 +92,10 @@ function BaseShareLogList({onAttachLogToReport}: BaseShareLogListProps) { onAttachLogToReport(option.reportID, filename); }; + useEffect(() => { + ReportActions.searchInServer(debouncedSearchValue); + }, [debouncedSearchValue]); + return ( )} @@ -112,4 +127,9 @@ function BaseShareLogList({onAttachLogToReport}: BaseShareLogListProps) { BaseShareLogList.displayName = 'ShareLogPage'; -export default BaseShareLogList; +export default withOnyx({ + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, + }, +})(BaseShareLogList); From f5141f63100407a482a16ab78cefec839c18a7a8 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Tue, 9 Apr 2024 17:53:14 -0300 Subject: [PATCH 07/31] Add 'isSearchingForReports' to 'MoneyRequestParticipantsSelector' --- ...yForRefactorRequestParticipantsSelector.js | 8 ++-- .../MoneyRequestParticipantsSelector.js | 38 +++++++++++++------ 2 files changed, 30 insertions(+), 16 deletions(-) diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index f06e4e253bf3..a694cfe444bb 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -100,10 +100,6 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS; - useEffect(() => { - Report.searchInServer(debouncedSearchTerm.trim()); - }, [debouncedSearchTerm]); - /** * Returns the sections needed for the OptionsSelector * @@ -357,6 +353,10 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ [addParticipantToSelection, isAllowedToSplit, styles, translate], ); + useEffect(() => { + Report.searchInServer(debouncedSearchTerm); + }, [debouncedSearchTerm]); + return ( 0 ? safeAreaPaddingBottomStyle : {}]}> participant.searchText.toLowerCase().includes(searchTerm.trim().toLowerCase())), + _.some(participants, (participant) => participant.searchText.toLowerCase().includes(debouncedSearchTerm.trim().toLowerCase())), ), - [maxParticipantsReached, newChatOptions, participants, searchTerm], + [maxParticipantsReached, newChatOptions, participants, debouncedSearchTerm], ); // Right now you can't split a request with a workspace and other additional participants @@ -342,6 +347,10 @@ function MoneyRequestParticipantsSelector({ [addParticipantToSelection, isAllowedToSplit, styles, translate], ); + useEffect(() => { + Report.searchInServer(debouncedSearchTerm); + }, [debouncedSearchTerm]); + return ( 0 ? safeAreaPaddingBottomStyle : {}]}> ); @@ -374,4 +384,8 @@ export default withOnyx({ betas: { key: ONYXKEYS.BETAS, }, + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, + }, })(MoneyRequestParticipantsSelector); From 75ee88cfb6b25b1c157b68fd9fcf91ec9d178669 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Tue, 9 Apr 2024 18:15:48 -0300 Subject: [PATCH 08/31] fix lint --- src/pages/RoomInvitePage.tsx | 2 +- src/pages/workspace/WorkspaceInvitePage.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx index 8ea883f1b1a5..2d9e0033a73c 100644 --- a/src/pages/RoomInvitePage.tsx +++ b/src/pages/RoomInvitePage.tsx @@ -56,7 +56,7 @@ function RoomInvitePage({betas, report, policies, isSearchingForReports}: RoomIn useEffect(() => { setSearchTerm(SearchInputManager.searchInput); - }, []); + }, [setSearchTerm]); // Any existing participants and Expensify emails should not be eligible for invitation const excludedUsers = useMemo( diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index 1ba957511979..4e9f1711e6b9 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -91,7 +91,7 @@ function WorkspaceInvitePage({ return () => { Policy.setWorkspaceInviteMembersDraft(route.params.policyID, {}); }; - }, [route.params.policyID]); + }, [setSearchTerm, route.params.policyID]); useEffect(() => { Policy.clearErrors(route.params.policyID); From df280d90d319509fae946320e22e7248aef61592 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Tue, 9 Apr 2024 18:26:22 -0300 Subject: [PATCH 09/31] run prettier --- src/pages/tasks/TaskAssigneeSelectorModal.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.tsx b/src/pages/tasks/TaskAssigneeSelectorModal.tsx index a28ec49742da..870d1d8f28ac 100644 --- a/src/pages/tasks/TaskAssigneeSelectorModal.tsx +++ b/src/pages/tasks/TaskAssigneeSelectorModal.tsx @@ -1,7 +1,7 @@ /* eslint-disable es/no-optional-chaining */ import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; -import React, {useEffect, useCallback, useMemo, useState} from 'react'; +import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; @@ -42,7 +42,6 @@ type TaskAssigneeSelectorModalOnyxProps = { /** Whether or not we are searching for reports on the server */ isSearchingForReports: OnyxEntry; - }; type TaskAssigneeSelectorModalProps = TaskAssigneeSelectorModalOnyxProps & WithCurrentUserPersonalDetailsProps & WithNavigationTransitionEndProps; From cd0577f36f363749e1f1c3296f5910e49d1e4a14 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Wed, 10 Apr 2024 18:09:38 -0300 Subject: [PATCH 10/31] remove unnecessary changes --- src/pages/RoomInvitePage.tsx | 2 +- src/pages/workspace/WorkspaceInvitePage.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx index 2d9e0033a73c..8ea883f1b1a5 100644 --- a/src/pages/RoomInvitePage.tsx +++ b/src/pages/RoomInvitePage.tsx @@ -56,7 +56,7 @@ function RoomInvitePage({betas, report, policies, isSearchingForReports}: RoomIn useEffect(() => { setSearchTerm(SearchInputManager.searchInput); - }, [setSearchTerm]); + }, []); // Any existing participants and Expensify emails should not be eligible for invitation const excludedUsers = useMemo( diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index 4e9f1711e6b9..1ba957511979 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -91,7 +91,7 @@ function WorkspaceInvitePage({ return () => { Policy.setWorkspaceInviteMembersDraft(route.params.policyID, {}); }; - }, [setSearchTerm, route.params.policyID]); + }, [route.params.policyID]); useEffect(() => { Policy.clearErrors(route.params.policyID); From fb8e738846078876288395cdb13a8a884e8d4f21 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Wed, 10 Apr 2024 18:17:00 -0300 Subject: [PATCH 11/31] fix lint --- src/pages/RoomInvitePage.tsx | 2 +- src/pages/workspace/WorkspaceInvitePage.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx index 8ea883f1b1a5..2d9e0033a73c 100644 --- a/src/pages/RoomInvitePage.tsx +++ b/src/pages/RoomInvitePage.tsx @@ -56,7 +56,7 @@ function RoomInvitePage({betas, report, policies, isSearchingForReports}: RoomIn useEffect(() => { setSearchTerm(SearchInputManager.searchInput); - }, []); + }, [setSearchTerm]); // Any existing participants and Expensify emails should not be eligible for invitation const excludedUsers = useMemo( diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index 1ba957511979..4e9f1711e6b9 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -91,7 +91,7 @@ function WorkspaceInvitePage({ return () => { Policy.setWorkspaceInviteMembersDraft(route.params.policyID, {}); }; - }, [route.params.policyID]); + }, [setSearchTerm, route.params.policyID]); useEffect(() => { Policy.clearErrors(route.params.policyID); From 8f87bf5657a5b02501108d09c27339b355d1bedc Mon Sep 17 00:00:00 2001 From: brunovjk Date: Thu, 11 Apr 2024 12:18:56 -0300 Subject: [PATCH 12/31] Add 'isSearchingForReports' to 'RoomMembersPage' --- src/pages/RoomMembersPage.tsx | 33 +++++++++++++++++++++++++++------ 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx index d025a3bde265..c7e55016bf39 100644 --- a/src/pages/RoomMembersPage.tsx +++ b/src/pages/RoomMembersPage.tsx @@ -15,8 +15,10 @@ import type {ListItem} from '@components/SelectionList/types'; import UserListItem from '@components/SelectionList/UserListItem'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; +import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as ReportActions from '@libs/actions/Report'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import localeCompare from '@libs/LocaleCompare'; import Log from '@libs/Log'; @@ -40,6 +42,9 @@ import SearchInputManager from './workspace/SearchInputManager'; type RoomMembersPageOnyxProps = { session: OnyxEntry; + + /** Whether or not we are searching for reports on the server */ + isSearchingForReports: OnyxEntry; }; type RoomMembersPageProps = WithReportOrNotFoundProps & @@ -47,12 +52,12 @@ type RoomMembersPageProps = WithReportOrNotFoundProps & RoomMembersPageOnyxProps & StackScreenProps; -function RoomMembersPage({report, session, policies}: RoomMembersPageProps) { +function RoomMembersPage({report, session, policies, isSearchingForReports}: RoomMembersPageProps) { const styles = useThemeStyles(); const {formatPhoneNumber, translate} = useLocalize(); const [selectedMembers, setSelectedMembers] = useState([]); const [removeMembersConfirmModalVisible, setRemoveMembersConfirmModalVisible] = useState(false); - const [searchValue, setSearchValue] = useState(''); + const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); const [didLoadRoomMembers, setDidLoadRoomMembers] = useState(false); const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; @@ -176,7 +181,7 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) { } // If search value is provided, filter out members that don't match the search value - if (searchValue.trim()) { + if (debouncedSearchValue.trim()) { let memberDetails = ''; if (details.login) { memberDetails += ` ${details.login.toLowerCase()}`; @@ -194,7 +199,7 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) { memberDetails += ` ${details.phoneNumber.toLowerCase()}`; } - if (!OptionsListUtils.isSearchStringMatch(searchValue.trim(), memberDetails)) { + if (!OptionsListUtils.isSearchStringMatch(debouncedSearchValue.trim(), memberDetails)) { return; } } @@ -231,7 +236,12 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) { return PolicyUtils.isPolicyMember(report.policyID, policies); }, [report?.policyID, policies]); const data = getMemberOptions(); - const headerMessage = searchValue.trim() && !data.length ? translate('roomMembersPage.memberNotFound') : ''; + const headerMessage = debouncedSearchValue.trim() && !data.length ? translate('roomMembersPage.memberNotFound') : ''; + + useEffect(() => { + ReportActions.searchInServer(debouncedSearchValue); + }, [debouncedSearchValue]); + return ( @@ -310,4 +321,14 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) { RoomMembersPage.displayName = 'RoomMembersPage'; -export default withReportOrNotFound()(withCurrentUserPersonalDetails(withOnyx({session: {key: ONYXKEYS.SESSION}})(RoomMembersPage))); +export default withReportOrNotFound()( + withCurrentUserPersonalDetails( + withOnyx({ + session: {key: ONYXKEYS.SESSION}, + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, + }, + })(RoomMembersPage), + ), +); From 7f86e236ee3c467839ebfd51ab83b1ac9f452672 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Thu, 11 Apr 2024 12:39:51 -0300 Subject: [PATCH 13/31] fix lint --- src/pages/RoomMembersPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx index c7e55016bf39..e8ec1262317c 100644 --- a/src/pages/RoomMembersPage.tsx +++ b/src/pages/RoomMembersPage.tsx @@ -65,7 +65,7 @@ function RoomMembersPage({report, session, policies, isSearchingForReports}: Roo useEffect(() => { setSearchValue(SearchInputManager.searchInput); - }, [isFocusedScreen]); + }, [setSearchValue, isFocusedScreen]); useEffect( () => () => { From a8e28dcd33f1205dfa9c3760c329138de14733d7 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Fri, 12 Apr 2024 08:38:35 -0300 Subject: [PATCH 14/31] Revert "fix lint" This reverts commit 7f86e236ee3c467839ebfd51ab83b1ac9f452672. --- src/pages/RoomMembersPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx index e8ec1262317c..c7e55016bf39 100644 --- a/src/pages/RoomMembersPage.tsx +++ b/src/pages/RoomMembersPage.tsx @@ -65,7 +65,7 @@ function RoomMembersPage({report, session, policies, isSearchingForReports}: Roo useEffect(() => { setSearchValue(SearchInputManager.searchInput); - }, [setSearchValue, isFocusedScreen]); + }, [isFocusedScreen]); useEffect( () => () => { From 16edfab9808057d45633aa207b82f92640d1e577 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Fri, 12 Apr 2024 08:39:29 -0300 Subject: [PATCH 15/31] Revert "Add 'isSearchingForReports' to 'RoomMembersPage'" This reverts commit 8f87bf5657a5b02501108d09c27339b355d1bedc. --- src/pages/RoomMembersPage.tsx | 33 ++++++--------------------------- 1 file changed, 6 insertions(+), 27 deletions(-) diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx index c7e55016bf39..d025a3bde265 100644 --- a/src/pages/RoomMembersPage.tsx +++ b/src/pages/RoomMembersPage.tsx @@ -15,10 +15,8 @@ import type {ListItem} from '@components/SelectionList/types'; import UserListItem from '@components/SelectionList/UserListItem'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; -import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as ReportActions from '@libs/actions/Report'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import localeCompare from '@libs/LocaleCompare'; import Log from '@libs/Log'; @@ -42,9 +40,6 @@ import SearchInputManager from './workspace/SearchInputManager'; type RoomMembersPageOnyxProps = { session: OnyxEntry; - - /** Whether or not we are searching for reports on the server */ - isSearchingForReports: OnyxEntry; }; type RoomMembersPageProps = WithReportOrNotFoundProps & @@ -52,12 +47,12 @@ type RoomMembersPageProps = WithReportOrNotFoundProps & RoomMembersPageOnyxProps & StackScreenProps; -function RoomMembersPage({report, session, policies, isSearchingForReports}: RoomMembersPageProps) { +function RoomMembersPage({report, session, policies}: RoomMembersPageProps) { const styles = useThemeStyles(); const {formatPhoneNumber, translate} = useLocalize(); const [selectedMembers, setSelectedMembers] = useState([]); const [removeMembersConfirmModalVisible, setRemoveMembersConfirmModalVisible] = useState(false); - const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); + const [searchValue, setSearchValue] = useState(''); const [didLoadRoomMembers, setDidLoadRoomMembers] = useState(false); const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; @@ -181,7 +176,7 @@ function RoomMembersPage({report, session, policies, isSearchingForReports}: Roo } // If search value is provided, filter out members that don't match the search value - if (debouncedSearchValue.trim()) { + if (searchValue.trim()) { let memberDetails = ''; if (details.login) { memberDetails += ` ${details.login.toLowerCase()}`; @@ -199,7 +194,7 @@ function RoomMembersPage({report, session, policies, isSearchingForReports}: Roo memberDetails += ` ${details.phoneNumber.toLowerCase()}`; } - if (!OptionsListUtils.isSearchStringMatch(debouncedSearchValue.trim(), memberDetails)) { + if (!OptionsListUtils.isSearchStringMatch(searchValue.trim(), memberDetails)) { return; } } @@ -236,12 +231,7 @@ function RoomMembersPage({report, session, policies, isSearchingForReports}: Roo return PolicyUtils.isPolicyMember(report.policyID, policies); }, [report?.policyID, policies]); const data = getMemberOptions(); - const headerMessage = debouncedSearchValue.trim() && !data.length ? translate('roomMembersPage.memberNotFound') : ''; - - useEffect(() => { - ReportActions.searchInServer(debouncedSearchValue); - }, [debouncedSearchValue]); - + const headerMessage = searchValue.trim() && !data.length ? translate('roomMembersPage.memberNotFound') : ''; return ( @@ -321,14 +310,4 @@ function RoomMembersPage({report, session, policies, isSearchingForReports}: Roo RoomMembersPage.displayName = 'RoomMembersPage'; -export default withReportOrNotFound()( - withCurrentUserPersonalDetails( - withOnyx({ - session: {key: ONYXKEYS.SESSION}, - isSearchingForReports: { - key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, - initWithStoredValues: false, - }, - })(RoomMembersPage), - ), -); +export default withReportOrNotFound()(withCurrentUserPersonalDetails(withOnyx({session: {key: ONYXKEYS.SESSION}})(RoomMembersPage))); From 806986830b3665588ff01e7779ee3b66ecf4e144 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Sat, 13 Apr 2024 14:13:57 -0300 Subject: [PATCH 16/31] fix lint --- src/pages/workspace/WorkspaceInvitePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index f1427348db0d..5b52771d5a23 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -90,7 +90,7 @@ function WorkspaceInvitePage({ return () => { Policy.setWorkspaceInviteMembersDraft(route.params.policyID, {}); }; - }, [route.params.policyID]); + }, [setSearchTerm, route.params.policyID]); useEffect(() => { Policy.clearErrors(route.params.policyID); From 056c1ce00a499d03d703bab43091dcf10014c9f8 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Sun, 14 Apr 2024 11:22:39 -0300 Subject: [PATCH 17/31] Merge branch 'Expensify:main' into fix/37144 --- ...oneyTemporaryForRefactorRequestParticipantsSelector.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index bac04947cef5..920563cd6a51 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -372,10 +372,10 @@ MoneyTemporaryForRefactorRequestParticipantsSelector.displayName = 'MoneyTempora export default withOnyx({ betas: { key: ONYXKEYS.BETAS, - isSearchingForReports: { - key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, - initWithStoredValues: false, - }, + }, + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, }, })( memo( From 20fd8d1cb71d1c36c22336e8b35487f23da70248 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Mon, 15 Apr 2024 16:22:41 -0300 Subject: [PATCH 18/31] fix lint --- .../MoneyTemporaryForRefactorRequestParticipantsSelector.js | 1 + .../MoneyRequestParticipantsSelector.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index 077dc5f88b6c..7d51e12993ec 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -2,6 +2,7 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {memo, useCallback, useEffect, useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import Button from '@components/Button'; import FormHelpMessage from '@components/FormHelpMessage'; diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index 4247efda3aaf..5ea31d1c313d 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -2,6 +2,7 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {useCallback, useEffect, useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import Button from '@components/Button'; import FormHelpMessage from '@components/FormHelpMessage'; From 35558e3abf4e00ff3421bb57397d53ef3ad8f07e Mon Sep 17 00:00:00 2001 From: brunovjk Date: Mon, 15 Apr 2024 16:31:57 -0300 Subject: [PATCH 19/31] fix lint --- .../MoneyTemporaryForRefactorRequestParticipantsSelector.js | 3 +-- .../MoneyRequestParticipantsSelector.js | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index 7d51e12993ec..cceb6057db1e 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -1,8 +1,7 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {memo, useCallback, useEffect, useMemo} from 'react'; -import {useOnyx} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import Button from '@components/Button'; import FormHelpMessage from '@components/FormHelpMessage'; diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index 5ea31d1c313d..bc7040012e7c 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -1,8 +1,7 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {useCallback, useEffect, useMemo} from 'react'; -import {useOnyx} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import Button from '@components/Button'; import FormHelpMessage from '@components/FormHelpMessage'; From 2527d67cd0602f97837a28bf70301ad0953744ee Mon Sep 17 00:00:00 2001 From: brunovjk Date: Tue, 16 Apr 2024 18:22:58 -0300 Subject: [PATCH 20/31] fix lint --- ...yTemporaryForRefactorRequestParticipantsSelector.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index 2b9af1a1387d..bd5c6f2ba929 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -377,15 +377,15 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({participants, onF ); - const isAllSectionsEmpty = _.every(sections, (section) => section.data.length === 0); - if ([CONST.IOU.ACTION.CATEGORIZE, CONST.IOU.ACTION.SHARE].includes(action) && isAllSectionsEmpty && didScreenTransitionEnd && searchTerm.trim() === '') { - return renderEmptyWorkspaceView(); - } - useEffect(() => { Report.searchInServer(debouncedSearchTerm.trim()); }, [debouncedSearchTerm]); + const isAllSectionsEmpty = _.every(sections, (section) => section.data.length === 0); + if ([CONST.IOU.ACTION.CATEGORIZE, CONST.IOU.ACTION.SHARE].includes(action) && isAllSectionsEmpty && didScreenTransitionEnd && searchTerm.trim() === '') { + return renderEmptyWorkspaceView(); + } + return ( Date: Tue, 16 Apr 2024 18:38:18 -0300 Subject: [PATCH 21/31] run prettier --- src/pages/RoomInvitePage.tsx | 5 ++++- .../MoneyTemporaryForRefactorRequestParticipantsSelector.js | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx index da02c9818075..04508d0ad709 100644 --- a/src/pages/RoomInvitePage.tsx +++ b/src/pages/RoomInvitePage.tsx @@ -43,7 +43,10 @@ type RoomInvitePageOnyxProps = { /** Whether or not we are searching for reports on the server */ isSearchingForReports: OnyxEntry; }; -type RoomInvitePageProps = WithReportOrNotFoundProps & WithNavigationTransitionEndProps & RoomInvitePageOnyxProps & StackScreenProps; +type RoomInvitePageProps = WithReportOrNotFoundProps & + WithNavigationTransitionEndProps & + RoomInvitePageOnyxProps & + StackScreenProps; type Sections = Array>>; diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index bd5c6f2ba929..5126b08e6f11 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -58,7 +58,7 @@ const propTypes = { /** The action of the IOU, i.e. create, split, move */ action: PropTypes.oneOf(_.values(CONST.IOU.ACTION)), - + /** Whether or not we are searching for reports on the server */ isSearchingForReports: PropTypes.bool, }; @@ -381,7 +381,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({participants, onF Report.searchInServer(debouncedSearchTerm.trim()); }, [debouncedSearchTerm]); - const isAllSectionsEmpty = _.every(sections, (section) => section.data.length === 0); + const isAllSectionsEmpty = _.every(sections, (section) => section.data.length === 0); if ([CONST.IOU.ACTION.CATEGORIZE, CONST.IOU.ACTION.SHARE].includes(action) && isAllSectionsEmpty && didScreenTransitionEnd && searchTerm.trim() === '') { return renderEmptyWorkspaceView(); } From 1e651e73ccb5dba6827c85f083446a4acca274f9 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Wed, 17 Apr 2024 17:56:05 -0300 Subject: [PATCH 22/31] updating workspace invite member page: useEffect dependency --- src/pages/ChatFinderPage/index.tsx | 2 +- src/pages/RoomInvitePage.tsx | 3 ++- src/pages/tasks/TaskShareDestinationSelectorModal.tsx | 2 +- src/pages/workspace/WorkspaceInvitePage.tsx | 7 ++++--- 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/pages/ChatFinderPage/index.tsx b/src/pages/ChatFinderPage/index.tsx index f992fa37d8c5..8b968f556b7f 100644 --- a/src/pages/ChatFinderPage/index.tsx +++ b/src/pages/ChatFinderPage/index.tsx @@ -185,7 +185,7 @@ function ChatFinderPage({betas, isSearchingForReports, navigation}: ChatFinderPa onSelectRow={selectReport} showLoadingPlaceholder={!areOptionsInitialized || !isScreenTransitionEnd} footerContent={!isDismissed && ChatFinderPageFooterInstance} - isLoadingNewOptions={isSearchingForReports ?? undefined} + isLoadingNewOptions={!!isSearchingForReports} /> ); diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx index 72000f5eb96d..3d3207cdfe89 100644 --- a/src/pages/RoomInvitePage.tsx +++ b/src/pages/RoomInvitePage.tsx @@ -69,7 +69,8 @@ function RoomInvitePage({ useEffect(() => { setSearchTerm(SearchInputManager.searchInput); - }, [setSearchTerm]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); // Any existing participants and Expensify emails should not be eligible for invitation const excludedUsers = useMemo( diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.tsx b/src/pages/tasks/TaskShareDestinationSelectorModal.tsx index b4b8f9084a57..5b63b0b090a3 100644 --- a/src/pages/tasks/TaskShareDestinationSelectorModal.tsx +++ b/src/pages/tasks/TaskShareDestinationSelectorModal.tsx @@ -116,7 +116,7 @@ function TaskShareDestinationSelectorModal({isSearchingForReports}: TaskShareDes headerMessage={options.headerMessage} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} showLoadingPlaceholder={areOptionsInitialized && debouncedSearchValue.trim() === '' ? options.sections.length === 0 : !didScreenTransitionEnd} - isLoadingNewOptions={isSearchingForReports ?? undefined} + isLoadingNewOptions={!!isSearchingForReports} textInputHint={textInputHint} /> diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index cf3cbb133d91..72bdcdb9ecdb 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -78,7 +78,8 @@ function WorkspaceInvitePage({route, betas, invitedEmailsToAccountIDsDraft, poli return () => { Policy.setWorkspaceInviteMembersDraft(route.params.policyID, {}); }; - }, [setSearchTerm, route.params.policyID]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [route.params.policyID]); useEffect(() => { Policy.clearErrors(route.params.policyID); @@ -96,7 +97,7 @@ function WorkspaceInvitePage({route, betas, invitedEmailsToAccountIDsDraft, poli const newSelectedOptionsDict: Record = {}; const inviteOptions = OptionsListUtils.getMemberInviteOptions(options.personalDetails, betas ?? [], debouncedSearchTerm, excludedUsers, true); - // Update selectedOptions with the latest personalDetails and policyMembers information + // Update selectedOptions with the latest personalDetails and policyEmployeeList information const detailsMap: Record = {}; inviteOptions.personalDetails.forEach((detail) => { if (!detail.login) { @@ -146,7 +147,7 @@ function WorkspaceInvitePage({route, betas, invitedEmailsToAccountIDsDraft, poli setSelectedOptions(Object.values(newSelectedOptionsDict)); // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change - }, [options.personalDetails, policy?.employeeList, betas, searchTerm, excludedUsers]); + }, [options.personalDetails, policy?.employeeList, betas, debouncedSearchTerm, excludedUsers]); const sections: MembersSection[] = useMemo(() => { const sectionsArr: MembersSection[] = []; From 8f50ea156db7da640951e6043b9fca330ad07c2d Mon Sep 17 00:00:00 2001 From: brunovjk Date: Mon, 22 Apr 2024 14:55:27 -0300 Subject: [PATCH 23/31] fix lint --- .../MoneyTemporaryForRefactorRequestParticipantsSelector.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index ef1ba9fb1e0e..88ab7b0b9876 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -9,7 +9,6 @@ import lodashValues from 'lodash/values'; import PropTypes from 'prop-types'; import React, {memo, useCallback, useEffect, useMemo} from 'react'; import {useOnyx, withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; import BlockingView from '@components/BlockingViews/BlockingView'; import Button from '@components/Button'; import FormHelpMessage from '@components/FormHelpMessage'; From cd447ca5ca3e3ebf8a4f4d7a01484a82be39bd5d Mon Sep 17 00:00:00 2001 From: brunovjk Date: Tue, 30 Apr 2024 08:34:00 -0300 Subject: [PATCH 24/31] use 'useOnyx' instead of 'withOnyx' to fetch 'isSearchingForReports' --- src/pages/ChatFinderPage/index.tsx | 12 ++----- src/pages/RoomInvitePage.tsx | 26 +++------------- ...yForRefactorRequestParticipantsSelector.js | 31 ++++++------------- .../ShareLogList/BaseShareLogList.tsx | 21 +++---------- src/pages/tasks/TaskAssigneeSelectorModal.tsx | 12 ++----- .../TaskShareDestinationSelectorModal.tsx | 19 +++--------- src/pages/workspace/WorkspaceInvitePage.tsx | 12 ++----- 7 files changed, 32 insertions(+), 101 deletions(-) diff --git a/src/pages/ChatFinderPage/index.tsx b/src/pages/ChatFinderPage/index.tsx index 09bfbbebc552..ec198df61e20 100644 --- a/src/pages/ChatFinderPage/index.tsx +++ b/src/pages/ChatFinderPage/index.tsx @@ -2,7 +2,7 @@ import type {StackScreenProps} from '@react-navigation/stack'; import isEmpty from 'lodash/isEmpty'; import React, {useEffect, useMemo, useState} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {useOptionsList} from '@components/OptionListContextProvider'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -30,9 +30,6 @@ import ChatFinderPageFooter from './ChatFinderPageFooter'; type ChatFinderPageOnyxProps = { /** Beta features list */ betas: OnyxEntry; - - /** Whether or not we are searching for reports on the server */ - isSearchingForReports: OnyxEntry; }; type ChatFinderPageProps = ChatFinderPageOnyxProps & StackScreenProps; @@ -51,11 +48,12 @@ const setPerformanceTimersEnd = () => { const ChatFinderPageFooterInstance = ; -function ChatFinderPage({betas, isSearchingForReports, navigation}: ChatFinderPageProps) { +function ChatFinderPage({betas, navigation}: ChatFinderPageProps) { const [isScreenTransitionEnd, setIsScreenTransitionEnd] = useState(false); const themeStyles = useThemeStyles(); const {translate} = useLocalize(); const {isOffline} = useNetwork(); + const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); const {options, areOptionsInitialized} = useOptionsList({ shouldInitialize: isScreenTransitionEnd, }); @@ -196,8 +194,4 @@ export default withOnyx({ betas: { key: ONYXKEYS.BETAS, }, - isSearchingForReports: { - key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, - initWithStoredValues: false, - }, })(ChatFinderPage); diff --git a/src/pages/RoomInvitePage.tsx b/src/pages/RoomInvitePage.tsx index a99032c98b16..139406249a5e 100644 --- a/src/pages/RoomInvitePage.tsx +++ b/src/pages/RoomInvitePage.tsx @@ -3,8 +3,7 @@ import Str from 'expensify-common/lib/str'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import type {SectionListData} from 'react-native'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -39,22 +38,13 @@ import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound import withReportOrNotFound from './home/report/withReportOrNotFound'; import SearchInputManager from './workspace/SearchInputManager'; -type RoomInvitePageOnyxProps = { - /** Whether or not we are searching for reports on the server */ - isSearchingForReports: OnyxEntry; -}; -type RoomInvitePageProps = WithReportOrNotFoundProps & - WithNavigationTransitionEndProps & - RoomInvitePageOnyxProps & - StackScreenProps; +type RoomInvitePageProps = WithReportOrNotFoundProps & WithNavigationTransitionEndProps & StackScreenProps; type Sections = Array>>; - function RoomInvitePage({ betas, report, policies, - isSearchingForReports, route: { params: {role}, }, @@ -65,6 +55,7 @@ function RoomInvitePage({ const [selectedOptions, setSelectedOptions] = useState([]); const [invitePersonalDetails, setInvitePersonalDetails] = useState([]); const [userToInvite, setUserToInvite] = useState(null); + const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); const {options, areOptionsInitialized} = useOptionsList(); useEffect(() => { @@ -281,13 +272,4 @@ function RoomInvitePage({ RoomInvitePage.displayName = 'RoomInvitePage'; -export default withNavigationTransitionEnd( - withReportOrNotFound()( - withOnyx({ - isSearchingForReports: { - key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, - initWithStoredValues: false, - }, - })(RoomInvitePage), - ), -); +export default withNavigationTransitionEnd(withReportOrNotFound()(RoomInvitePage)); diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index 9a87ecaed559..8cba412f28c4 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -7,7 +7,7 @@ import lodashSome from 'lodash/some'; import lodashValues from 'lodash/values'; import PropTypes from 'prop-types'; import React, {memo, useCallback, useEffect, useMemo} from 'react'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import FormHelpMessage from '@components/FormHelpMessage'; import {usePersonalDetails} from '@components/OnyxProvider'; @@ -55,18 +55,14 @@ const propTypes = { /** The action of the IOU, i.e. create, split, move */ action: PropTypes.oneOf(lodashValues(CONST.IOU.ACTION)), - - /** Whether or not we are searching for reports on the server */ - isSearchingForReports: PropTypes.bool, }; const defaultProps = { participants: [], action: CONST.IOU.ACTION.CREATE, - isSearchingForReports: false, }; -function MoneyTemporaryForRefactorRequestParticipantsSelector({participants, onFinish, onParticipantsAdded, iouType, iouRequestType, action, isSearchingForReports}) { +function MoneyTemporaryForRefactorRequestParticipantsSelector({participants, onFinish, onParticipantsAdded, iouType, iouRequestType, action}) { const {translate} = useLocalize(); const styles = useThemeStyles(); const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); @@ -78,6 +74,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({participants, onF const {didScreenTransitionEnd} = useScreenWrapperTranstionStatus(); const [betas] = useOnyx(ONYXKEYS.BETAS); const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID); + const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); const {options, areOptionsInitialized} = useOptionsList({ shouldInitialize: didScreenTransitionEnd, }); @@ -371,19 +368,11 @@ MoneyTemporaryForRefactorRequestParticipantsSelector.propTypes = propTypes; MoneyTemporaryForRefactorRequestParticipantsSelector.defaultProps = defaultProps; MoneyTemporaryForRefactorRequestParticipantsSelector.displayName = 'MoneyTemporaryForRefactorRequestParticipantsSelector'; -export default withOnyx({ - isSearchingForReports: { - key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, - initWithStoredValues: false, - }, -})( - memo( - MoneyTemporaryForRefactorRequestParticipantsSelector, - (prevProps, nextProps) => - lodashIsEqual(prevProps.participants, nextProps.participants) && - prevProps.iouRequestType === nextProps.iouRequestType && - prevProps.iouType === nextProps.iouType && - lodashIsEqual(prevProps.betas, nextProps.betas) && - prevProps.isSearchingForReports === nextProps.isSearchingForReports, - ), +export default memo( + MoneyTemporaryForRefactorRequestParticipantsSelector, + (prevProps, nextProps) => + lodashIsEqual(prevProps.participants, nextProps.participants) && + prevProps.iouRequestType === nextProps.iouRequestType && + prevProps.iouType === nextProps.iouType && + lodashIsEqual(prevProps.betas, nextProps.betas), ); diff --git a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx index c53a20f7d5c3..58c3be7df6b1 100644 --- a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx +++ b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx @@ -1,6 +1,5 @@ import React, {useEffect, useMemo} from 'react'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {useBetas} from '@components/OnyxProvider'; import {useOptionsList} from '@components/OptionListContextProvider'; @@ -18,19 +17,14 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Report} from '@src/types/onyx'; -import type {BaseShareLogListProps as BaseShareLogListTypeProps} from './types'; +import type {BaseShareLogListProps} from './types'; -type BaseShareLogListOnyxProps = { - /** Whether or not we are searching for reports on the server */ - isSearchingForReports: OnyxEntry; -}; - -type BaseShareLogListProps = BaseShareLogListTypeProps & BaseShareLogListOnyxProps; -function BaseShareLogList({onAttachLogToReport, isSearchingForReports}: BaseShareLogListProps) { +function BaseShareLogList({onAttachLogToReport}: BaseShareLogListProps) { const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); const {isOffline} = useNetwork(); const {translate} = useLocalize(); const betas = useBetas(); + const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); const {options, areOptionsInitialized} = useOptionsList(); const searchOptions = useMemo(() => { @@ -127,9 +121,4 @@ function BaseShareLogList({onAttachLogToReport, isSearchingForReports}: BaseShar BaseShareLogList.displayName = 'ShareLogPage'; -export default withOnyx({ - isSearchingForReports: { - key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, - initWithStoredValues: false, - }, -})(BaseShareLogList); +export default BaseShareLogList; diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.tsx b/src/pages/tasks/TaskAssigneeSelectorModal.tsx index 870d1d8f28ac..9a3993a6b649 100644 --- a/src/pages/tasks/TaskAssigneeSelectorModal.tsx +++ b/src/pages/tasks/TaskAssigneeSelectorModal.tsx @@ -3,7 +3,7 @@ import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -39,9 +39,6 @@ type TaskAssigneeSelectorModalOnyxProps = { /** Grab the Share destination of the Task */ task: OnyxEntry; - - /** Whether or not we are searching for reports on the server */ - isSearchingForReports: OnyxEntry; }; type TaskAssigneeSelectorModalProps = TaskAssigneeSelectorModalOnyxProps & WithCurrentUserPersonalDetailsProps & WithNavigationTransitionEndProps; @@ -93,11 +90,12 @@ function useOptions() { return {...options, searchValue, debouncedSearchValue, setSearchValue, areOptionsInitialized}; } -function TaskAssigneeSelectorModal({reports, task, isSearchingForReports}: TaskAssigneeSelectorModalProps) { +function TaskAssigneeSelectorModal({reports, task}: TaskAssigneeSelectorModalProps) { const styles = useThemeStyles(); const route = useRoute>(); const {translate} = useLocalize(); const session = useSession(); + const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const {userToInvite, recentReports, personalDetails, currentUserOption, searchValue, debouncedSearchValue, setSearchValue, headerMessage, areOptionsInitialized} = useOptions(); @@ -235,10 +233,6 @@ function TaskAssigneeSelectorModal({reports, task, isSearchingForReports}: TaskA TaskAssigneeSelectorModal.displayName = 'TaskAssigneeSelectorModal'; const TaskAssigneeSelectorModalWithOnyx = withOnyx({ - isSearchingForReports: { - key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, - initWithStoredValues: false, - }, reports: { key: ONYXKEYS.COLLECTION.REPORT, }, diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.tsx b/src/pages/tasks/TaskShareDestinationSelectorModal.tsx index 5b63b0b090a3..859dfa36a33f 100644 --- a/src/pages/tasks/TaskShareDestinationSelectorModal.tsx +++ b/src/pages/tasks/TaskShareDestinationSelectorModal.tsx @@ -1,7 +1,6 @@ import React, {useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {useOptionsList} from '@components/OptionListContextProvider'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -21,12 +20,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Report} from '@src/types/onyx'; -type TaskShareDestinationSelectorModalOnyxProps = { - isSearchingForReports: OnyxEntry; -}; - -type TaskShareDestinationSelectorModalProps = TaskShareDestinationSelectorModalOnyxProps; - const selectReportHandler = (option: unknown) => { const optionItem = option as ReportUtils.OptionData; @@ -47,12 +40,13 @@ const reportFilter = (reportOptions: Array return filtered; }, []); -function TaskShareDestinationSelectorModal({isSearchingForReports}: TaskShareDestinationSelectorModalProps) { +function TaskShareDestinationSelectorModal() { const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false); const styles = useThemeStyles(); const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); const {translate} = useLocalize(); const {isOffline} = useNetwork(); + const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); const {options: optionList, areOptionsInitialized} = useOptionsList({ shouldInitialize: didScreenTransitionEnd, }); @@ -127,9 +121,4 @@ function TaskShareDestinationSelectorModal({isSearchingForReports}: TaskShareDes TaskShareDestinationSelectorModal.displayName = 'TaskShareDestinationSelectorModal'; -export default withOnyx({ - isSearchingForReports: { - key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, - initWithStoredValues: false, - }, -})(TaskShareDestinationSelectorModal); +export default TaskShareDestinationSelectorModal; diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index a6e3aad2f2d4..2ba3cd88f137 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -1,7 +1,7 @@ import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {SectionListData} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -47,9 +47,6 @@ type WorkspaceInvitePageOnyxProps = { /** An object containing the accountID for every invited user email */ invitedEmailsToAccountIDsDraft: OnyxEntry; - - /** Whether or not we are searching for reports on the server */ - isSearchingForReports: OnyxEntry; }; type WorkspaceInvitePageProps = WithPolicyAndFullscreenLoadingProps & @@ -57,7 +54,7 @@ type WorkspaceInvitePageProps = WithPolicyAndFullscreenLoadingProps & WorkspaceInvitePageOnyxProps & StackScreenProps; -function WorkspaceInvitePage({route, betas, invitedEmailsToAccountIDsDraft, policy, isSearchingForReports}: WorkspaceInvitePageProps) { +function WorkspaceInvitePage({route, betas, invitedEmailsToAccountIDsDraft, policy}: WorkspaceInvitePageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); @@ -65,6 +62,7 @@ function WorkspaceInvitePage({route, betas, invitedEmailsToAccountIDsDraft, poli const [personalDetails, setPersonalDetails] = useState([]); const [usersToInvite, setUsersToInvite] = useState([]); const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false); + const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); const firstRenderRef = useRef(true); const openWorkspaceInvitePage = () => { @@ -347,10 +345,6 @@ export default withNavigationTransitionEnd( invitedEmailsToAccountIDsDraft: { key: ({route}) => `${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT}${route.params.policyID.toString()}`, }, - isSearchingForReports: { - key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, - initWithStoredValues: false, - }, })(WorkspaceInvitePage), ), ); From 76c4a5d5f59eac2dcda7206931c36fa9daa0d564 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Tue, 30 Apr 2024 09:22:16 -0300 Subject: [PATCH 25/31] fix performance test failure --- src/pages/ChatFinderPage/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/ChatFinderPage/index.tsx b/src/pages/ChatFinderPage/index.tsx index ec198df61e20..deb8f6231394 100644 --- a/src/pages/ChatFinderPage/index.tsx +++ b/src/pages/ChatFinderPage/index.tsx @@ -67,10 +67,6 @@ function ChatFinderPage({betas, navigation}: ChatFinderPageProps) { Performance.markStart(CONST.TIMING.CHAT_FINDER_RENDER); }, []); - useEffect(() => { - Report.searchInServer(debouncedSearchValue.trim()); - }, [debouncedSearchValue]); - const searchOptions = useMemo(() => { if (!areOptionsInitialized || !isScreenTransitionEnd) { return { @@ -157,6 +153,10 @@ function ChatFinderPage({betas, navigation}: ChatFinderPageProps) { const {isDismissed} = useDismissedReferralBanners({referralContentType: CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}); + useEffect(() => { + Report.searchInServer(debouncedSearchValue.trim()); + }, [debouncedSearchValue]); + return ( Date: Tue, 30 Apr 2024 09:50:46 -0300 Subject: [PATCH 26/31] run prettier --- src/pages/ChatFinderPage/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ChatFinderPage/index.tsx b/src/pages/ChatFinderPage/index.tsx index deb8f6231394..df817e017504 100644 --- a/src/pages/ChatFinderPage/index.tsx +++ b/src/pages/ChatFinderPage/index.tsx @@ -156,7 +156,7 @@ function ChatFinderPage({betas, navigation}: ChatFinderPageProps) { useEffect(() => { Report.searchInServer(debouncedSearchValue.trim()); }, [debouncedSearchValue]); - + return ( Date: Tue, 30 Apr 2024 10:19:08 -0300 Subject: [PATCH 27/31] Revert 'fix performance test failure' --- src/pages/ChatFinderPage/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/ChatFinderPage/index.tsx b/src/pages/ChatFinderPage/index.tsx index df817e017504..ec198df61e20 100644 --- a/src/pages/ChatFinderPage/index.tsx +++ b/src/pages/ChatFinderPage/index.tsx @@ -67,6 +67,10 @@ function ChatFinderPage({betas, navigation}: ChatFinderPageProps) { Performance.markStart(CONST.TIMING.CHAT_FINDER_RENDER); }, []); + useEffect(() => { + Report.searchInServer(debouncedSearchValue.trim()); + }, [debouncedSearchValue]); + const searchOptions = useMemo(() => { if (!areOptionsInitialized || !isScreenTransitionEnd) { return { @@ -153,10 +157,6 @@ function ChatFinderPage({betas, navigation}: ChatFinderPageProps) { const {isDismissed} = useDismissedReferralBanners({referralContentType: CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}); - useEffect(() => { - Report.searchInServer(debouncedSearchValue.trim()); - }, [debouncedSearchValue]); - return ( Date: Thu, 2 May 2024 08:26:20 -0300 Subject: [PATCH 28/31] fix lint --- src/pages/ChatFinderPage/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/ChatFinderPage/index.tsx b/src/pages/ChatFinderPage/index.tsx index 7f6d8251f43a..d473185390c9 100644 --- a/src/pages/ChatFinderPage/index.tsx +++ b/src/pages/ChatFinderPage/index.tsx @@ -1,8 +1,7 @@ import type {StackScreenProps} from '@react-navigation/stack'; import isEmpty from 'lodash/isEmpty'; import React, {useEffect, useMemo, useState} from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {useOptionsList} from '@components/OptionListContextProvider'; import ScreenWrapper from '@components/ScreenWrapper'; From d2f1890aff2485b2239f2fd20368e4f0786790ac Mon Sep 17 00:00:00 2001 From: brunovjk Date: Thu, 2 May 2024 08:40:19 -0300 Subject: [PATCH 29/31] fix lint --- package.json | 2 +- src/pages/ChatFinderPage/index.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index d8d2e105d0c6..9ad4c0d23154 100644 --- a/package.json +++ b/package.json @@ -152,7 +152,7 @@ "react-native-linear-gradient": "^2.8.1", "react-native-localize": "^2.2.6", "react-native-modal": "^13.0.0", - "react-native-onyx": "2.0.35", + "react-native-onyx": "^2.0.35", "react-native-pager-view": "6.2.3", "react-native-pdf": "6.7.3", "react-native-performance": "^5.1.0", diff --git a/src/pages/ChatFinderPage/index.tsx b/src/pages/ChatFinderPage/index.tsx index d473185390c9..c4b105464ae2 100644 --- a/src/pages/ChatFinderPage/index.tsx +++ b/src/pages/ChatFinderPage/index.tsx @@ -23,7 +23,6 @@ import Timing from '@userActions/Timing'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; -import type * as OnyxTypes from '@src/types/onyx'; import ChatFinderPageFooter from './ChatFinderPageFooter'; type ChatFinderPageProps = StackScreenProps; From b647dea5a18c9f43c7f3d9557b69267ee141a504 Mon Sep 17 00:00:00 2001 From: brunovjk Date: Thu, 2 May 2024 08:41:28 -0300 Subject: [PATCH 30/31] run prettier --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index e57869f5c63b..5962d3b29504 100644 --- a/package-lock.json +++ b/package-lock.json @@ -100,7 +100,7 @@ "react-native-linear-gradient": "^2.8.1", "react-native-localize": "^2.2.6", "react-native-modal": "^13.0.0", - "react-native-onyx": "2.0.35", + "react-native-onyx": "^2.0.35", "react-native-pager-view": "6.2.3", "react-native-pdf": "6.7.3", "react-native-performance": "^5.1.0", diff --git a/package.json b/package.json index 9ad4c0d23154..d8d2e105d0c6 100644 --- a/package.json +++ b/package.json @@ -152,7 +152,7 @@ "react-native-linear-gradient": "^2.8.1", "react-native-localize": "^2.2.6", "react-native-modal": "^13.0.0", - "react-native-onyx": "^2.0.35", + "react-native-onyx": "2.0.35", "react-native-pager-view": "6.2.3", "react-native-pdf": "6.7.3", "react-native-performance": "^5.1.0", From ee82017b89e633ead497b7d6f2f323828ddfb76f Mon Sep 17 00:00:00 2001 From: brunovjk Date: Thu, 2 May 2024 22:04:26 -0300 Subject: [PATCH 31/31] revert ChatFinderPage --- src/pages/ChatFinderPage/index.tsx | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/pages/ChatFinderPage/index.tsx b/src/pages/ChatFinderPage/index.tsx index c4b105464ae2..09bfbbebc552 100644 --- a/src/pages/ChatFinderPage/index.tsx +++ b/src/pages/ChatFinderPage/index.tsx @@ -1,7 +1,8 @@ import type {StackScreenProps} from '@react-navigation/stack'; import isEmpty from 'lodash/isEmpty'; import React, {useEffect, useMemo, useState} from 'react'; -import {useOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {useOptionsList} from '@components/OptionListContextProvider'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -23,9 +24,18 @@ import Timing from '@userActions/Timing'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; +import type * as OnyxTypes from '@src/types/onyx'; import ChatFinderPageFooter from './ChatFinderPageFooter'; -type ChatFinderPageProps = StackScreenProps; +type ChatFinderPageOnyxProps = { + /** Beta features list */ + betas: OnyxEntry; + + /** Whether or not we are searching for reports on the server */ + isSearchingForReports: OnyxEntry; +}; + +type ChatFinderPageProps = ChatFinderPageOnyxProps & StackScreenProps; type ChatFinderPageSectionItem = { data: OptionData[]; @@ -41,13 +51,11 @@ const setPerformanceTimersEnd = () => { const ChatFinderPageFooterInstance = ; -function ChatFinderPage({navigation}: ChatFinderPageProps) { +function ChatFinderPage({betas, isSearchingForReports, navigation}: ChatFinderPageProps) { const [isScreenTransitionEnd, setIsScreenTransitionEnd] = useState(false); const themeStyles = useThemeStyles(); const {translate} = useLocalize(); const {isOffline} = useNetwork(); - const [betas] = useOnyx(ONYXKEYS.BETAS); - const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); const {options, areOptionsInitialized} = useOptionsList({ shouldInitialize: isScreenTransitionEnd, }); @@ -184,4 +192,12 @@ function ChatFinderPage({navigation}: ChatFinderPageProps) { ChatFinderPage.displayName = 'ChatFinderPage'; -export default ChatFinderPage; +export default withOnyx({ + betas: { + key: ONYXKEYS.BETAS, + }, + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, + }, +})(ChatFinderPage);