From 86aa3a106c36a27a766efe9ee24fcab7130e796d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Thu, 21 Sep 2023 10:37:22 +0200 Subject: [PATCH 01/11] remove unnecessary search actions --- src/pages/SearchPage.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index dd42ed80c3d4..39f75d414610 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useCallback, useEffect, useState, useMemo} from 'react'; +import React, {useCallback, useEffect, useState, useMemo, useRef} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; @@ -56,6 +56,7 @@ function SearchPage({betas, personalDetails, reports}) { }); const {translate} = useLocalize(); + const isMounted = useRef(false); const updateOptions = useCallback(() => { const { @@ -79,8 +80,13 @@ function SearchPage({betas, personalDetails, reports}) { }, []); useEffect(() => { + if (!isMounted.current) { + isMounted.current = true; + return; + } + debouncedUpdateOptions(); - }, [searchValue, debouncedUpdateOptions]); + }, [searchValue]); /** * Returns the sections needed for the OptionsSelector From 3a20b60e93576a3b7b245a91e1ebfa997237e96d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Thu, 26 Oct 2023 15:32:22 +0200 Subject: [PATCH 02/11] fixes after conflicts --- src/pages/SearchPage.js | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index 3b572bcf0ebb..f9f3cc42f64a 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -18,8 +18,7 @@ import personalDetailsPropType from './personalDetailsPropType'; import reportPropTypes from './reportPropTypes'; import Performance from '../libs/Performance'; import useLocalize from '../hooks/useLocalize'; -import networkPropTypes from '../components/networkPropTypes'; -import {withNetwork} from '../components/OnyxProvider'; +import useNetwork from "../hooks/useNetwork"; const propTypes = { /* Onyx Props */ @@ -33,9 +32,6 @@ const propTypes = { /** All reports shared with the user */ reports: PropTypes.objectOf(reportPropTypes), - /** Network info */ - network: networkPropTypes, - /** Whether we are searching for reports in the server */ isSearchingForReports: PropTypes.bool, }; @@ -44,11 +40,10 @@ const defaultProps = { betas: [], personalDetails: {}, reports: {}, - network: {}, isSearchingForReports: false, }; -function SearchPage({betas, personalDetails, reports}) { +function SearchPage({betas, personalDetails, reports, isSearchingForReports}) { // Data for initialization (runs only on the first render) const { recentReports: initialRecentReports, @@ -65,6 +60,7 @@ function SearchPage({betas, personalDetails, reports}) { userToInvite: initialUserToInvite, }); + const {isOffline} = useNetwork(); const {translate} = useLocalize(); const isMounted = useRef(false); @@ -185,12 +181,12 @@ function SearchPage({betas, personalDetails, reports}) { shouldShowOptions={didScreenTransitionEnd && isOptionsDataReady} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputAlert={ - props.network.isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : '' + isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : '' } onLayout={searchRendered} safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} autoFocus - isLoadingNewOptions={props.isSearchingForReports} + isLoadingNewOptions={isSearchingForReports} /> @@ -202,9 +198,7 @@ function SearchPage({betas, personalDetails, reports}) { SearchPage.propTypes = propTypes; SearchPage.defaultProps = defaultProps; SearchPage.displayName = 'SearchPage'; -export default compose( - withNetwork(), - withOnyx({ +export default withOnyx({ reports: { key: ONYXKEYS.COLLECTION.REPORT, }, @@ -218,5 +212,4 @@ export default compose( key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, initWithStoredValues: false, }, -}), -)(SearchPage); +})(SearchPage); From e212f254a80603a169a9d37910cb66b0ebe29d9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Thu, 26 Oct 2023 15:42:10 +0200 Subject: [PATCH 03/11] fix lint error --- src/pages/SearchPage.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index f9f3cc42f64a..d0da509197e1 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -92,6 +92,8 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) { } debouncedUpdateOptions(); + // Ignoring the rule intentionally, we want to run the code only when search Value changes to prevent additional runs. + // eslint-disable-next-line react-hooks/exhaustive-deps }, [searchValue]); /** From 0cd0edc8abf862c10c1f0f38d61a17552b47041a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Mon, 30 Oct 2023 18:04:34 +0100 Subject: [PATCH 04/11] fix lint error --- src/pages/SearchPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index fb325a5bc200..27148d97e9bb 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -17,8 +17,8 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import personalDetailsPropType from './personalDetailsPropType'; import reportPropTypes from './reportPropTypes'; -import useLocalize from '../hooks/useLocalize'; -import useNetwork from "../hooks/useNetwork"; +import useLocalize from '@hooks/useLocalize'; +import useNetwork from "@hooks/useNetwork"; const propTypes = { /* Onyx Props */ From 0b0359eb5982a94b53edfedcfd6c4273d94b4416 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Thu, 2 Nov 2023 16:58:15 +0100 Subject: [PATCH 05/11] fix lint error --- src/pages/SearchPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index 27148d97e9bb..70eaa0383a23 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -15,10 +15,10 @@ import * as Report from '@userActions/Report'; import Timing from '@userActions/Timing'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import personalDetailsPropType from './personalDetailsPropType'; -import reportPropTypes from './reportPropTypes'; import useLocalize from '@hooks/useLocalize'; import useNetwork from "@hooks/useNetwork"; +import personalDetailsPropType from './personalDetailsPropType'; +import reportPropTypes from './reportPropTypes'; const propTypes = { /* Onyx Props */ From 1df2c02b2f5495772d56f08def35b9ed998ab58a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Tue, 7 Nov 2023 08:32:22 +0100 Subject: [PATCH 06/11] prettier --- src/pages/SearchPage.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index 32d10ba539c8..3e6cb0333e3f 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -1,11 +1,13 @@ import PropTypes from 'prop-types'; -import React, {useCallback, useEffect, useState, useMemo, useRef} from 'react'; +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; +import useLocalize from '@hooks/useLocalize'; +import useNetwork from '@hooks/useNetwork'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import Performance from '@libs/Performance'; @@ -15,8 +17,6 @@ import * as Report from '@userActions/Report'; import Timing from '@userActions/Timing'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import useLocalize from '@hooks/useLocalize'; -import useNetwork from "@hooks/useNetwork"; import personalDetailsPropType from './personalDetailsPropType'; import reportPropTypes from './reportPropTypes'; @@ -187,9 +187,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) { showTitleTooltip shouldShowOptions={didScreenTransitionEnd && isOptionsDataReady} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} - textInputAlert={ - isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : '' - } + textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''} onLayout={searchRendered} safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} autoFocus From 8d14ca8003d9bf58639f57e7071fc0a31bacba39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Mon, 27 Nov 2023 23:02:00 +0100 Subject: [PATCH 07/11] refactor theme to functional way --- src/pages/SearchPage.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index 0fdd54da74f9..05405fce3cec 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -8,7 +8,7 @@ import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; -import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles'; +import useThemeStyles from "@styles/useThemeStyles"; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import Performance from '@libs/Performance'; @@ -34,7 +34,6 @@ const propTypes = { /** Whether we are searching for reports in the server */ isSearchingForReports: PropTypes.bool, - ...withThemeStylesPropTypes, }; const defaultProps = { @@ -63,6 +62,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) { const {isOffline} = useNetwork(); const {translate} = useLocalize(); + const themeStyles = useThemeStyles(); const isMounted = useRef(false); const updateOptions = useCallback(() => { @@ -177,7 +177,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) { {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( <> - + Date: Tue, 28 Nov 2023 21:30:59 +0100 Subject: [PATCH 08/11] prettier --- src/pages/SearchPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index 05405fce3cec..b0eb45876520 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -8,11 +8,11 @@ import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; -import useThemeStyles from "@styles/useThemeStyles"; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import Performance from '@libs/Performance'; import * as ReportUtils from '@libs/ReportUtils'; +import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import Timing from '@userActions/Timing'; import CONST from '@src/CONST'; From 8ad959ad0a5507b4b940cef05c4588cc67fc15ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Fri, 8 Dec 2023 14:56:15 +0100 Subject: [PATCH 09/11] bring back accidentally deleted code --- src/pages/SearchPage.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index 817fb7a231d1..68724b51e796 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -189,6 +189,8 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) { showTitleTooltip shouldShowOptions={didScreenTransitionEnd && isOptionsDataReady} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} + shouldShowReferralCTA + referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND} textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''} onLayout={searchRendered} safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} From 443a9cafca94355e0fd0db1a3eb4cffbe8dce85a Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 15 Dec 2023 16:15:43 +0100 Subject: [PATCH 10/11] fix: apply requested changes --- src/pages/SearchPage.js | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index 68724b51e796..ad8e15287d4f 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -8,11 +8,11 @@ import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import Performance from '@libs/Performance'; import * as ReportUtils from '@libs/ReportUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import * as Report from '@userActions/Report'; import Timing from '@userActions/Timing'; import CONST from '@src/CONST'; @@ -44,20 +44,19 @@ const defaultProps = { }; function SearchPage({betas, personalDetails, reports, isSearchingForReports}) { - // Data for initialization (runs only on the first render) - const { - recentReports: initialRecentReports, - personalDetails: initialPersonalDetails, - userToInvite: initialUserToInvite, - // Ignoring the rule because in this case we need the data only initially - // eslint-disable-next-line react-hooks/exhaustive-deps - } = useMemo(() => OptionsListUtils.getSearchOptions(reports, personalDetails, '', betas), []); - const [searchValue, setSearchValue] = useState(''); - const [searchOptions, setSearchOptions] = useState({ - recentReports: initialRecentReports, - personalDetails: initialPersonalDetails, - userToInvite: initialUserToInvite, + const [searchOptions, setSearchOptions] = useState(() => { + const { + recentReports: localRecentReports, + personalDetails: localPersonalDetails, + userToInvite: localUserToInvite, + } = OptionsListUtils.getSearchOptions(reports, personalDetails, '', betas); + + return { + recentReports: localRecentReports, + personalDetails: localPersonalDetails, + userToInvite: localUserToInvite, + }; }); const {isOffline} = useNetwork(); From 253ccddc5ec18d0e764c8e3d8502ab9f9dfb1221 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 20 Dec 2023 09:23:08 +0100 Subject: [PATCH 11/11] fix: revert changes applied after another commit --- src/pages/SearchPage.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index 039ef7c2a079..d779ab856fb5 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -1,7 +1,8 @@ import PropTypes from 'prop-types'; -import React, {useCallback, useEffect, useRef, useState} from 'react'; +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; +import _ from 'underscore'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -77,18 +78,24 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) { }); }, [reports, personalDetails, searchValue, betas]); + const debouncedUpdateOptions = useMemo(() => _.debounce(updateOptions, 75), [updateOptions]); + useEffect(() => { Timing.start(CONST.TIMING.SEARCH_RENDER); Performance.markStart(CONST.TIMING.SEARCH_RENDER); }, []); + useEffect(() => { + updateOptions(); + }, [reports, personalDetails, betas, updateOptions]); + useEffect(() => { if (!isMounted.current) { isMounted.current = true; return; } - updateOptions(); + debouncedUpdateOptions(); // Ignoring the rule intentionally, we want to run the code only when search Value changes to prevent additional runs. // eslint-disable-next-line react-hooks/exhaustive-deps }, [searchValue]); @@ -177,6 +184,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {