From 6a8161a267ab1228f8735b0ef4dd557d9a5365ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Wed, 24 Jan 2024 14:30:14 +0100 Subject: [PATCH 1/4] delete the old component --- src/pages/SearchPage.js | 223 ---------------------------------------- 1 file changed, 223 deletions(-) delete mode 100755 src/pages/SearchPage.js diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js deleted file mode 100755 index c420371f5a65..000000000000 --- a/src/pages/SearchPage.js +++ /dev/null @@ -1,223 +0,0 @@ -import PropTypes from 'prop-types'; -import React, {useCallback, useEffect, useRef, useState} from 'react'; -import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -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 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 * 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'; - -const propTypes = { - /* Onyx Props */ - - /** Beta features list */ - betas: PropTypes.arrayOf(PropTypes.string), - - /** All of the personal details for everyone */ - personalDetails: PropTypes.objectOf(personalDetailsPropType), - - /** All reports shared with the user */ - reports: PropTypes.objectOf(reportPropTypes), - - /** Whether we are searching for reports in the server */ - isSearchingForReports: PropTypes.bool, - - /** - * The navigation prop passed by the navigator. - * - * This is required because transitionEnd event doesn't trigger in the automated testing environment. - */ - navigation: PropTypes.shape({}), -}; - -const defaultProps = { - betas: [], - personalDetails: {}, - reports: {}, - isSearchingForReports: false, - navigation: {}, -}; - -function SearchPage({betas, personalDetails, reports, isSearchingForReports, navigation}) { - const [searchValue, setSearchValue] = useState(''); - const [searchOptions, setSearchOptions] = useState({ - recentReports: {}, - personalDetails: {}, - userToInvite: {}, - }); - - const {isOffline} = useNetwork(); - const {translate} = useLocalize(); - const themeStyles = useThemeStyles(); - const isMounted = useRef(false); - - const updateOptions = useCallback(() => { - const { - recentReports: localRecentReports, - personalDetails: localPersonalDetails, - userToInvite: localUserToInvite, - } = OptionsListUtils.getSearchOptions(reports, personalDetails, searchValue.trim(), betas); - - setSearchOptions({ - recentReports: localRecentReports, - personalDetails: localPersonalDetails, - userToInvite: localUserToInvite, - }); - }, [reports, personalDetails, searchValue, betas]); - - 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(); - // 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]); - - /** - * Returns the sections needed for the OptionsSelector - * - * @returns {Array} - */ - const getSections = () => { - const sections = []; - let indexOffset = 0; - - if (searchOptions.recentReports.length > 0) { - sections.push({ - data: searchOptions.recentReports, - shouldShow: true, - indexOffset, - }); - indexOffset += searchOptions.recentReports.length; - } - - if (searchOptions.personalDetails.length > 0) { - sections.push({ - data: searchOptions.personalDetails, - shouldShow: true, - indexOffset, - }); - indexOffset += searchOptions.recentReports.length; - } - - if (searchOptions.userToInvite) { - sections.push({ - data: [searchOptions.userToInvite], - shouldShow: true, - indexOffset, - }); - } - - return sections; - }; - - const searchRendered = () => { - Timing.end(CONST.TIMING.SEARCH_RENDER); - Performance.markEnd(CONST.TIMING.SEARCH_RENDER); - }; - - const onChangeText = (value = '') => { - Report.searchInServer(searchValue); - setSearchValue(value); - }; - - /** - * Reset the search value and redirect to the selected report - * - * @param {Object} option - */ - const selectReport = (option) => { - if (!option) { - return; - } - if (option.reportID) { - Navigation.dismissModal(option.reportID); - } else { - Report.navigateToAndOpenReport([option.login]); - } - }; - - const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails); - const headerMessage = OptionsListUtils.getHeaderMessage( - searchOptions.recentReports.length + searchOptions.personalDetails.length !== 0, - Boolean(searchOptions.userToInvite), - searchValue, - ); - - return ( - - {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( - <> - - - - - - )} - - ); -} - -SearchPage.propTypes = propTypes; -SearchPage.defaultProps = defaultProps; -SearchPage.displayName = 'SearchPage'; -export default withOnyx({ - reports: { - key: ONYXKEYS.COLLECTION.REPORT, - }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - betas: { - key: ONYXKEYS.BETAS, - }, - isSearchingForReports: { - key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, - initWithStoredValues: false, - }, -})(SearchPage); From c82dbc35ed0caac73b195339112bff99f65bf102 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Wed, 24 Jan 2024 14:30:51 +0100 Subject: [PATCH 2/4] search debounce and loading indicator added --- .../SelectionList/BaseSelectionList.tsx | 2 ++ src/components/SelectionList/types.ts | 3 +++ src/pages/SearchPage/index.js | 16 ++++++++++------ 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index d97c47c84ee7..2c929d2f4f9c 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -58,6 +58,7 @@ function BaseSelectionList( shouldShowTooltips = true, shouldUseDynamicMaxToRenderPerBatch = false, rightHandSideComponent, + isLoadingNewOptions = false, }: BaseSelectionListProps, inputRef: ForwardedRef, ) { @@ -422,6 +423,7 @@ function BaseSelectionList( spellCheck={false} onSubmitEditing={selectFocusedOption} blurOnSubmit={!!flattenedSections.allOptions.length} + isLoading={isLoadingNewOptions} /> )} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index a82ddef6febb..222c818dd66d 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -230,6 +230,9 @@ type BaseSelectionListProps = Partial ReactElement) | ReactElement | null; + + /** Whether to show the loading indicator for new options */ + isLoadingNewOptions?: boolean; }; type ItemLayout = { diff --git a/src/pages/SearchPage/index.js b/src/pages/SearchPage/index.js index 211f3622e06c..8a06d54a1f45 100644 --- a/src/pages/SearchPage/index.js +++ b/src/pages/SearchPage/index.js @@ -29,11 +29,15 @@ const propTypes = { /** All reports shared with the user */ reports: PropTypes.objectOf(reportPropTypes), + + /** Whether or not we are searching for reports on the server */ + isSearchingForReports: PropTypes.bool, }; const defaultProps = { betas: [], reports: {}, + isSearchingForReports: false, }; const setPerformanceTimersEnd = () => { @@ -43,7 +47,7 @@ const setPerformanceTimersEnd = () => { const SearchPageFooterInstance = ; -function SearchPage({betas, reports}) { +function SearchPage({betas, reports, isSearchingForReports}) { const [isScreenTransitionEnd, setIsScreenTransitionEnd] = useState(false); const {translate} = useLocalize(); const {isOffline} = useNetwork(); @@ -59,10 +63,9 @@ function SearchPage({betas, reports}) { Performance.markStart(CONST.TIMING.SEARCH_RENDER); }, []); - const onChangeText = (text = '') => { - Report.searchInServer(text); - setSearchValue(text); - }; + useEffect(() => { + Report.searchInServer(debouncedSearchValue.trim()); + }, [debouncedSearchValue]); const { recentReports, @@ -150,13 +153,14 @@ function SearchPage({betas, reports}) { textInputValue={searchValue} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputHint={offlineMessage} - onChangeText={onChangeText} + onChangeText={setSearchValue} headerMessage={headerMessage} onLayout={setPerformanceTimersEnd} autoFocus onSelectRow={selectReport} showLoadingPlaceholder={!didScreenTransitionEnd || !isOptionsDataReady} footerContent={SearchPageFooterInstance} + isLoadingNewOptions={isSearchingForReports} /> From b758b32583faaa374ffcae91be46944642867665 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Fri, 26 Jan 2024 14:36:55 +0100 Subject: [PATCH 3/4] referral cta bottom padding fix --- src/pages/SearchPage/SearchPageFooter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/SearchPage/SearchPageFooter.tsx b/src/pages/SearchPage/SearchPageFooter.tsx index e0ef67ad9ec3..3d5ebfd2c193 100644 --- a/src/pages/SearchPage/SearchPageFooter.tsx +++ b/src/pages/SearchPage/SearchPageFooter.tsx @@ -8,7 +8,7 @@ function SearchPageFooter() { const themeStyles = useThemeStyles(); return ( - + ); From e45d6e0865ccbfd814a7762bf7401938fa494a11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Tue, 6 Feb 2024 12:58:31 +0100 Subject: [PATCH 4/4] simplifying referral CTA dismissing --- src/components/ReferralProgramCTA.tsx | 32 ++- src/pages/SearchPage.js | 227 ---------------------- src/pages/SearchPage/SearchPageFooter.tsx | 37 +--- 3 files changed, 31 insertions(+), 265 deletions(-) delete mode 100755 src/pages/SearchPage.js diff --git a/src/components/ReferralProgramCTA.tsx b/src/components/ReferralProgramCTA.tsx index f1c7539cc6b5..4e0ed1f573f9 100644 --- a/src/components/ReferralProgramCTA.tsx +++ b/src/components/ReferralProgramCTA.tsx @@ -1,32 +1,45 @@ import React from 'react'; +import {withOnyx} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as User from '@userActions/User'; import CONST from '@src/CONST'; import Navigation from '@src/libs/Navigation/Navigation'; +import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type {DismissedReferralBanners} from '@src/types/onyx/Account'; import Icon from './Icon'; import {Close} from './Icon/Expensicons'; import {PressableWithoutFeedback} from './Pressable'; import Text from './Text'; import Tooltip from './Tooltip'; -type ReferralProgramCTAProps = { +type ReferralProgramCTAOnyxProps = { + dismissedReferralBanners: DismissedReferralBanners; +}; + +type ReferralProgramCTAProps = ReferralProgramCTAOnyxProps & { referralContentType: | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND; - - /** Method to trigger when pressing close button of the banner */ - onCloseButtonPress?: () => void; }; -function ReferralProgramCTA({referralContentType, onCloseButtonPress = () => {}}: ReferralProgramCTAProps) { +function ReferralProgramCTA({referralContentType, dismissedReferralBanners}: ReferralProgramCTAProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const theme = useTheme(); + const handleDismissCallToAction = () => { + User.dismissReferralBanner(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND); + }; + + if (!referralContentType || dismissedReferralBanners[referralContentType]) { + return null; + } + return ( { @@ -47,7 +60,7 @@ function ReferralProgramCTA({referralContentType, onCloseButtonPress = () => {}} { e.preventDefault(); }} @@ -67,4 +80,9 @@ function ReferralProgramCTA({referralContentType, onCloseButtonPress = () => {}} ); } -export default ReferralProgramCTA; +export default withOnyx({ + dismissedReferralBanners: { + key: ONYXKEYS.ACCOUNT, + selector: (data) => data?.dismissedReferralBanners ?? {}, + }, +})(ReferralProgramCTA); diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js deleted file mode 100755 index d8eef6f447ae..000000000000 --- a/src/pages/SearchPage.js +++ /dev/null @@ -1,227 +0,0 @@ -import PropTypes from 'prop-types'; -import React, {useCallback, useEffect, useRef, useState} from 'react'; -import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -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 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 * 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'; - -const propTypes = { - /* Onyx Props */ - - /** Beta features list */ - betas: PropTypes.arrayOf(PropTypes.string), - - /** All of the personal details for everyone */ - personalDetails: PropTypes.objectOf(personalDetailsPropType), - - /** All reports shared with the user */ - reports: PropTypes.objectOf(reportPropTypes), - - /** Whether we are searching for reports in the server */ - isSearchingForReports: PropTypes.bool, - - /** - * The navigation prop passed by the navigator. - * - * This is required because transitionEnd event doesn't trigger in the automated testing environment. - */ - navigation: PropTypes.shape({}), -}; - -const defaultProps = { - betas: [], - personalDetails: {}, - reports: {}, - isSearchingForReports: false, - navigation: {}, -}; - -function SearchPage({betas, personalDetails, reports, isSearchingForReports, navigation}) { - const [searchValue, setSearchValue] = useState(''); - const [searchOptions, setSearchOptions] = useState({ - recentReports: {}, - personalDetails: {}, - userToInvite: {}, - }); - - const {isOffline} = useNetwork(); - const {translate} = useLocalize(); - const themeStyles = useThemeStyles(); - const isMounted = useRef(false); - - const updateOptions = useCallback(() => { - const { - recentReports: localRecentReports, - personalDetails: localPersonalDetails, - userToInvite: localUserToInvite, - } = OptionsListUtils.getSearchOptions(reports, personalDetails, searchValue.trim(), betas); - - setSearchOptions({ - recentReports: localRecentReports, - personalDetails: localPersonalDetails, - userToInvite: localUserToInvite, - }); - }, [reports, personalDetails, searchValue, betas]); - - 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(); - // 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]); - - /** - * Returns the sections needed for the OptionsSelector - * - * @returns {Array} - */ - const getSections = () => { - const sections = []; - let indexOffset = 0; - - if (searchOptions.recentReports.length > 0) { - sections.push({ - data: searchOptions.recentReports, - shouldShow: true, - indexOffset, - }); - indexOffset += searchOptions.recentReports.length; - } - - if (searchOptions.personalDetails.length > 0) { - sections.push({ - data: searchOptions.personalDetails, - shouldShow: true, - indexOffset, - }); - indexOffset += searchOptions.recentReports.length; - } - - if (searchOptions.userToInvite) { - sections.push({ - data: [searchOptions.userToInvite], - shouldShow: true, - indexOffset, - }); - } - - return sections; - }; - - const searchRendered = () => { - Timing.end(CONST.TIMING.SEARCH_RENDER); - Performance.markEnd(CONST.TIMING.SEARCH_RENDER); - }; - - const onChangeText = (value = '') => { - Report.searchInServer(searchValue); - setSearchValue(value); - }; - - /** - * Reset the search value and redirect to the selected report - * - * @param {Object} option - */ - const selectReport = (option) => { - if (!option) { - return; - } - if (option.reportID) { - Navigation.dismissModal(option.reportID); - } else { - Report.navigateToAndOpenReport([option.login]); - } - }; - - const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails); - const headerMessage = OptionsListUtils.getHeaderMessage( - searchOptions.recentReports.length + searchOptions.personalDetails.length !== 0, - Boolean(searchOptions.userToInvite), - searchValue, - ); - - return ( - - {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( - <> - - - - - - )} - - ); -} - -SearchPage.propTypes = propTypes; -SearchPage.defaultProps = defaultProps; -SearchPage.displayName = 'SearchPage'; -export default withOnyx({ - reports: { - key: ONYXKEYS.COLLECTION.REPORT, - }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - betas: { - key: ONYXKEYS.BETAS, - }, - isSearchingForReports: { - key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, - initWithStoredValues: false, - }, -})(SearchPage); diff --git a/src/pages/SearchPage/SearchPageFooter.tsx b/src/pages/SearchPage/SearchPageFooter.tsx index fcc04d8bc5af..3d5ebfd2c193 100644 --- a/src/pages/SearchPage/SearchPageFooter.tsx +++ b/src/pages/SearchPage/SearchPageFooter.tsx @@ -1,44 +1,19 @@ -import React, {useState} from 'react'; +import React from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; import ReferralProgramCTA from '@components/ReferralProgramCTA'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as User from '@userActions/User'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; -import type {DismissedReferralBanners} from '@src/types/onyx/Account'; -type SearchPageFooterOnyxProps = { - dismissedReferralBanners: DismissedReferralBanners; -}; -function SearchPageFooter({dismissedReferralBanners}: SearchPageFooterOnyxProps) { - const [shouldShowReferralCTA, setShouldShowReferralCTA] = useState(!dismissedReferralBanners[CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND]); +function SearchPageFooter() { const themeStyles = useThemeStyles(); - const closeCallToActionBanner = () => { - setShouldShowReferralCTA(false); - User.dismissReferralBanner(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND); - }; - return ( - <> - {shouldShowReferralCTA && ( - - - - )} - + + + ); } SearchPageFooter.displayName = 'SearchPageFooter'; -export default withOnyx({ - dismissedReferralBanners: { - key: ONYXKEYS.ACCOUNT, - selector: (data) => data?.dismissedReferralBanners ?? {}, - }, -})(SearchPageFooter); +export default SearchPageFooter;