From 1a892d2fa0e49f7f69a7b2c231220582e5b0cf12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Tue, 18 Jul 2023 14:14:14 +0200 Subject: [PATCH 1/9] Convert SearchPage to functional component --- src/pages/SearchPage.js | 170 ++++++++++++++++++---------------------- 1 file changed, 76 insertions(+), 94 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index 3e32922ebdd5..e1cdf92259d0 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {Component} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; @@ -45,69 +45,68 @@ const defaultProps = { reports: {}, }; -class SearchPage extends Component { - constructor(props) { - super(props); +function SearchPage(props) { + const {recentReports: initialRecentReports, personalDetails: initialPersonalDetails, userToInvite: initialUserToInvite} = OptionsListUtils.getSearchOptions(props.reports, props.personalDetails, '', props.betas); - Timing.start(CONST.TIMING.SEARCH_RENDER); - Performance.markStart(CONST.TIMING.SEARCH_RENDER); + const [searchValue, setSearchValue] = useState('') + const [recentReports, setRecentReports] = useState(initialRecentReports) + const [personalDetails, setPersonalDetails] = useState(initialPersonalDetails) + const [userToInvite, setUserToInvite] = useState(initialUserToInvite) - this.searchRendered = this.searchRendered.bind(this); - this.selectReport = this.selectReport.bind(this); - this.onChangeText = this.onChangeText.bind(this); - this.debouncedUpdateOptions = _.debounce(this.updateOptions.bind(this), 75); + const updateOptions = useCallback(() => { + const {recentReports: localRecentReports, personalDetails: localPersonalDetails, userToInvite: localUserToInvite} = OptionsListUtils.getSearchOptions( + props.reports, + props.personalDetails, + searchValue.trim(), + props.betas, + ); - const {recentReports, personalDetails, userToInvite} = OptionsListUtils.getSearchOptions(props.reports, props.personalDetails, '', props.betas); + setUserToInvite(localUserToInvite) + setRecentReports(localRecentReports) + setPersonalDetails(localPersonalDetails) + }, [props.reports, props.personalDetails, searchValue, props.betas]) - this.state = { - searchValue: '', - recentReports, - personalDetails, - userToInvite, - }; - } + const debouncedUpdateOptions =_.debounce(updateOptions, 75); - componentDidUpdate(prevProps) { - if (_.isEqual(prevProps.reports, this.props.reports) && _.isEqual(prevProps.personalDetails, this.props.personalDetails)) { - return; - } - this.updateOptions(); - } + useEffect(() => { + Timing.start(CONST.TIMING.SEARCH_RENDER); + Performance.markStart(CONST.TIMING.SEARCH_RENDER); + },[]) - onChangeText(searchValue = '') { - this.setState({searchValue}, this.debouncedUpdateOptions); - } + useEffect(() => { + updateOptions(); + },[props.reports, props.personalDetails]) /** * Returns the sections needed for the OptionsSelector * * @returns {Array} */ - getSections() { + const getSections = () => { const sections = []; let indexOffset = 0; - if (this.state.recentReports.length > 0) { + if (recentReports.length > 0) { sections.push({ - data: this.state.recentReports, + data: recentReports, shouldShow: true, indexOffset, }); - indexOffset += this.state.recentReports.length; + indexOffset += recentReports.length; } - if (this.state.personalDetails.length > 0) { + if (personalDetails.length > 0) { sections.push({ - data: this.state.personalDetails, + data: personalDetails, shouldShow: true, indexOffset, }); - indexOffset += this.state.recentReports.length; + indexOffset += recentReports.length; } - if (this.state.userToInvite) { + if (userToInvite) { sections.push({ - data: [this.state.userToInvite], + data: [userToInvite], shouldShow: true, indexOffset, }); @@ -116,23 +115,17 @@ class SearchPage extends Component { return sections; } - searchRendered() { + const searchRendered = () => { Timing.end(CONST.TIMING.SEARCH_RENDER); Performance.markEnd(CONST.TIMING.SEARCH_RENDER); } - updateOptions() { - const {recentReports, personalDetails, userToInvite} = OptionsListUtils.getSearchOptions( - this.props.reports, - this.props.personalDetails, - this.state.searchValue.trim(), - this.props.betas, - ); - this.setState({ - userToInvite, - recentReports, - personalDetails, - }); + useEffect(() => { + debouncedUpdateOptions() + }, [searchValue]) + + const onChangeText = (value = '') => { + setSearchValue(value) } /** @@ -140,64 +133,53 @@ class SearchPage extends Component { * * @param {Object} option */ - selectReport(option) { + const selectReport = (option) => { if (!option) { return; } - if (option.reportID) { - this.setState( - { - searchValue: '', - }, - () => { - Navigation.dismissModal(option.reportID); - }, - ); + setSearchValue('') + Navigation.dismissModal(option.reportID); } else { Report.navigateToAndOpenReport([option.login]); } } - render() { - const sections = this.getSections(); - const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(this.props.personalDetails); - const headerMessage = OptionsListUtils.getHeaderMessage( - this.state.recentReports.length + this.state.personalDetails.length !== 0, - Boolean(this.state.userToInvite), - this.state.searchValue, - ); - - return ( - - {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( - <> - - - - - - )} - - ); - } + const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(props.personalDetails); + const headerMessage = OptionsListUtils.getHeaderMessage( + recentReports.length + personalDetails.length !== 0, + Boolean(userToInvite), + searchValue, + ); + return ( + + {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( + <> + + + + + + )} + + ) } SearchPage.propTypes = propTypes; SearchPage.defaultProps = defaultProps; - +SearchPage.displayName = 'SearchPage'; export default compose( withLocalize, withWindowDimensions, From 2d2676e5f1322f9bdd4b0c9864e03ed83b9b1004 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Tue, 25 Jul 2023 11:00:22 +0200 Subject: [PATCH 2/9] Fix comments in SearchPage refactoring --- src/pages/SearchPage.js | 82 +++++++++++++++++------------------------ 1 file changed, 33 insertions(+), 49 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index e1cdf92259d0..b072e74b51b5 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useCallback, useEffect, useState} from 'react'; +import React, {useCallback, useEffect, useState, useMemo} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; @@ -9,17 +9,16 @@ import * as ReportUtils from '../libs/ReportUtils'; import ONYXKEYS from '../ONYXKEYS'; import styles from '../styles/styles'; import Navigation from '../libs/Navigation/Navigation'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions'; import * as Report from '../libs/actions/Report'; import HeaderWithBackButton from '../components/HeaderWithBackButton'; import ScreenWrapper from '../components/ScreenWrapper'; import Timing from '../libs/actions/Timing'; import CONST from '../CONST'; -import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; import compose from '../libs/compose'; import personalDetailsPropType from './personalDetailsPropType'; import reportPropTypes from './reportPropTypes'; import Performance from '../libs/Performance'; +import useLocalize from '../hooks/useLocalize'; const propTypes = { /* Onyx Props */ @@ -32,41 +31,33 @@ const propTypes = { /** All reports shared with the user */ reports: PropTypes.objectOf(reportPropTypes), - - /** Window Dimensions Props */ - ...windowDimensionsPropTypes, - - ...withLocalizePropTypes, }; -const defaultProps = { - betas: [], - personalDetails: {}, - reports: {}, -}; - -function SearchPage(props) { - const {recentReports: initialRecentReports, personalDetails: initialPersonalDetails, userToInvite: initialUserToInvite} = OptionsListUtils.getSearchOptions(props.reports, props.personalDetails, '', props.betas); +function SearchPage({betas = [], personalDetails = {}, reports= {}}) { + //Data for initialization (runs only on the first render) + const {recentReports: initialRecentReports, personalDetails: initialPersonalDetails, userToInvite: initialUserToInvite} = useMemo(() => OptionsListUtils.getSearchOptions(reports, personalDetails, '', betas), []); const [searchValue, setSearchValue] = useState('') - const [recentReports, setRecentReports] = useState(initialRecentReports) - const [personalDetails, setPersonalDetails] = useState(initialPersonalDetails) - const [userToInvite, setUserToInvite] = useState(initialUserToInvite) + const [activeRecentReports, setActiveRecentReports] = useState(initialRecentReports) + const [activePersonalDetails, setActivePersonalDetails] = useState(initialPersonalDetails) + const [activeUserToInvite, setActiveUserToInvite] = useState(initialUserToInvite) + + const {translate} = useLocalize(); const updateOptions = useCallback(() => { const {recentReports: localRecentReports, personalDetails: localPersonalDetails, userToInvite: localUserToInvite} = OptionsListUtils.getSearchOptions( - props.reports, - props.personalDetails, + reports, + personalDetails, searchValue.trim(), - props.betas, + betas, ); - setUserToInvite(localUserToInvite) - setRecentReports(localRecentReports) - setPersonalDetails(localPersonalDetails) - }, [props.reports, props.personalDetails, searchValue, props.betas]) + setActiveUserToInvite(localUserToInvite) + setActiveRecentReports(localRecentReports) + setActivePersonalDetails(localPersonalDetails) + }, [reports, personalDetails, searchValue, betas]) - const debouncedUpdateOptions =_.debounce(updateOptions, 75); + const debouncedUpdateOptions = useCallback(() => _.debounce(updateOptions, 75), [updateOptions]); useEffect(() => { Timing.start(CONST.TIMING.SEARCH_RENDER); @@ -74,8 +65,8 @@ function SearchPage(props) { },[]) useEffect(() => { - updateOptions(); - },[props.reports, props.personalDetails]) + debouncedUpdateOptions() + }, [searchValue, debouncedUpdateOptions]) /** * Returns the sections needed for the OptionsSelector @@ -86,27 +77,27 @@ function SearchPage(props) { const sections = []; let indexOffset = 0; - if (recentReports.length > 0) { + if (activeRecentReports.length > 0) { sections.push({ - data: recentReports, + data: activeRecentReports, shouldShow: true, indexOffset, }); - indexOffset += recentReports.length; + indexOffset += activeRecentReports.length; } - if (personalDetails.length > 0) { + if (activePersonalDetails.length > 0) { sections.push({ - data: personalDetails, + data: activePersonalDetails, shouldShow: true, indexOffset, }); - indexOffset += recentReports.length; + indexOffset += activeRecentReports.length; } - if (userToInvite) { + if (activeUserToInvite) { sections.push({ - data: [userToInvite], + data: [activeUserToInvite], shouldShow: true, indexOffset, }); @@ -120,10 +111,6 @@ function SearchPage(props) { Performance.markEnd(CONST.TIMING.SEARCH_RENDER); } - useEffect(() => { - debouncedUpdateOptions() - }, [searchValue]) - const onChangeText = (value = '') => { setSearchValue(value) } @@ -145,17 +132,17 @@ function SearchPage(props) { } } - const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(props.personalDetails); + const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails); const headerMessage = OptionsListUtils.getHeaderMessage( - recentReports.length + personalDetails.length !== 0, - Boolean(userToInvite), + activeRecentReports.length + activePersonalDetails.length !== 0, + Boolean(activeUserToInvite), searchValue, ); return ( {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( <> - + @@ -178,11 +165,8 @@ function SearchPage(props) { } SearchPage.propTypes = propTypes; -SearchPage.defaultProps = defaultProps; SearchPage.displayName = 'SearchPage'; export default compose( - withLocalize, - withWindowDimensions, withOnyx({ reports: { key: ONYXKEYS.COLLECTION.REPORT, From 804cc201dee44305de01eb2a56d0b1cad0a9ef4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Wed, 26 Jul 2023 11:50:29 +0200 Subject: [PATCH 3/9] refactor state in SearchPage --- src/pages/SearchPage.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index b072e74b51b5..3f3e9bb380bf 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -38,9 +38,11 @@ function SearchPage({betas = [], personalDetails = {}, reports= {}}) { const {recentReports: initialRecentReports, personalDetails: initialPersonalDetails, userToInvite: initialUserToInvite} = useMemo(() => OptionsListUtils.getSearchOptions(reports, personalDetails, '', betas), []); const [searchValue, setSearchValue] = useState('') - const [activeRecentReports, setActiveRecentReports] = useState(initialRecentReports) - const [activePersonalDetails, setActivePersonalDetails] = useState(initialPersonalDetails) - const [activeUserToInvite, setActiveUserToInvite] = useState(initialUserToInvite) + const [searchOptions, setSearchOptions] = useState({ + recentReports: initialRecentReports, + personalDetails: initialPersonalDetails, + userToInvite: initialUserToInvite + }); const {translate} = useLocalize(); @@ -52,9 +54,7 @@ function SearchPage({betas = [], personalDetails = {}, reports= {}}) { betas, ); - setActiveUserToInvite(localUserToInvite) - setActiveRecentReports(localRecentReports) - setActivePersonalDetails(localPersonalDetails) + setSearchOptions({recentReports: localRecentReports, personalDetails: localPersonalDetails, userToInvite: localUserToInvite}) }, [reports, personalDetails, searchValue, betas]) const debouncedUpdateOptions = useCallback(() => _.debounce(updateOptions, 75), [updateOptions]); @@ -77,27 +77,27 @@ function SearchPage({betas = [], personalDetails = {}, reports= {}}) { const sections = []; let indexOffset = 0; - if (activeRecentReports.length > 0) { + if (searchOptions.recentReports.length > 0) { sections.push({ - data: activeRecentReports, + data: searchOptions.recentReports, shouldShow: true, indexOffset, }); - indexOffset += activeRecentReports.length; + indexOffset += searchOptions.recentReports.length; } - if (activePersonalDetails.length > 0) { + if (searchOptions.personalDetails.length > 0) { sections.push({ - data: activePersonalDetails, + data: searchOptions.personalDetails, shouldShow: true, indexOffset, }); - indexOffset += activeRecentReports.length; + indexOffset += searchOptions.recentReports.length; } - if (activeUserToInvite) { + if (searchOptions.userToInvite) { sections.push({ - data: [activeUserToInvite], + data: [searchOptions.userToInvite], shouldShow: true, indexOffset, }); @@ -134,8 +134,8 @@ function SearchPage({betas = [], personalDetails = {}, reports= {}}) { const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails); const headerMessage = OptionsListUtils.getHeaderMessage( - activeRecentReports.length + activePersonalDetails.length !== 0, - Boolean(activeUserToInvite), + searchOptions.recentReports.length + searchOptions.personalDetails.length !== 0, + Boolean(searchOptions.userToInvite), searchValue, ); return ( From d49f2714a715529bbe47a2de39456fbcec624df5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Wed, 26 Jul 2023 11:58:39 +0200 Subject: [PATCH 4/9] fix typo --- 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 3f3e9bb380bf..1b063fc3bec1 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -33,8 +33,8 @@ const propTypes = { reports: PropTypes.objectOf(reportPropTypes), }; -function SearchPage({betas = [], personalDetails = {}, reports= {}}) { - //Data for initialization (runs only on the first render) +function SearchPage({betas = [], personalDetails = {}, reports = {}}) { + // Data for initialization (runs only on the first render) const {recentReports: initialRecentReports, personalDetails: initialPersonalDetails, userToInvite: initialUserToInvite} = useMemo(() => OptionsListUtils.getSearchOptions(reports, personalDetails, '', betas), []); const [searchValue, setSearchValue] = useState('') From c187f69ee49ffe081819fb3a1cb61020f894137b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Wed, 26 Jul 2023 12:08:42 +0200 Subject: [PATCH 5/9] fix debounced updated function --- 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 1b063fc3bec1..6cc5076bee97 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -57,7 +57,7 @@ function SearchPage({betas = [], personalDetails = {}, reports = {}}) { setSearchOptions({recentReports: localRecentReports, personalDetails: localPersonalDetails, userToInvite: localUserToInvite}) }, [reports, personalDetails, searchValue, betas]) - const debouncedUpdateOptions = useCallback(() => _.debounce(updateOptions, 75), [updateOptions]); + const debouncedUpdateOptions = useCallback(_.debounce(updateOptions, 75), [updateOptions]); useEffect(() => { Timing.start(CONST.TIMING.SEARCH_RENDER); From 4b47c2456686936ab9cb14ee6f81c5560b652816 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Mon, 7 Aug 2023 13:40:20 +0200 Subject: [PATCH 6/9] fix lint issues --- src/pages/SearchPage.js | 66 +++++++++++++++++++++++++---------------- 1 file changed, 41 insertions(+), 25 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index 6cc5076bee97..9c7c9986d69a 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -14,7 +14,6 @@ import HeaderWithBackButton from '../components/HeaderWithBackButton'; import ScreenWrapper from '../components/ScreenWrapper'; import Timing from '../libs/actions/Timing'; import CONST from '../CONST'; -import compose from '../libs/compose'; import personalDetailsPropType from './personalDetailsPropType'; import reportPropTypes from './reportPropTypes'; import Performance from '../libs/Performance'; @@ -33,9 +32,19 @@ const propTypes = { reports: PropTypes.objectOf(reportPropTypes), }; -function SearchPage({betas = [], personalDetails = {}, reports = {}}) { +const defaultProps = { + betas: [], + personalDetails: {}, + reports: {}, +}; + +function SearchPage(props) { // Data for initialization (runs only on the first render) - const {recentReports: initialRecentReports, personalDetails: initialPersonalDetails, userToInvite: initialUserToInvite} = useMemo(() => OptionsListUtils.getSearchOptions(reports, personalDetails, '', betas), []); + const { + recentReports: initialRecentReports, + personalDetails: initialPersonalDetails, + userToInvite: initialUserToInvite + } = useMemo(() => OptionsListUtils.getSearchOptions(props.reports, props.personalDetails, '', props.betas), []); const [searchValue, setSearchValue] = useState('') const [searchOptions, setSearchOptions] = useState({ @@ -47,22 +56,30 @@ function SearchPage({betas = [], personalDetails = {}, reports = {}}) { const {translate} = useLocalize(); const updateOptions = useCallback(() => { - const {recentReports: localRecentReports, personalDetails: localPersonalDetails, userToInvite: localUserToInvite} = OptionsListUtils.getSearchOptions( - reports, - personalDetails, + const { + recentReports: localRecentReports, + personalDetails: localPersonalDetails, + userToInvite: localUserToInvite + } = OptionsListUtils.getSearchOptions( + props.reports, + props.personalDetails, searchValue.trim(), - betas, + props.betas, ); - setSearchOptions({recentReports: localRecentReports, personalDetails: localPersonalDetails, userToInvite: localUserToInvite}) - }, [reports, personalDetails, searchValue, betas]) + setSearchOptions({ + recentReports: localRecentReports, + personalDetails: localPersonalDetails, + userToInvite: localUserToInvite + }) + }, [props.reports, props.personalDetails, searchValue, props.betas]) const debouncedUpdateOptions = useCallback(_.debounce(updateOptions, 75), [updateOptions]); useEffect(() => { Timing.start(CONST.TIMING.SEARCH_RENDER); Performance.markStart(CONST.TIMING.SEARCH_RENDER); - },[]) + }, []) useEffect(() => { debouncedUpdateOptions() @@ -132,7 +149,7 @@ function SearchPage({betas = [], personalDetails = {}, reports = {}}) { } } - const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails); + const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(props.personalDetails); const headerMessage = OptionsListUtils.getHeaderMessage( searchOptions.recentReports.length + searchOptions.personalDetails.length !== 0, Boolean(searchOptions.userToInvite), @@ -142,7 +159,7 @@ function SearchPage({betas = [], personalDetails = {}, reports = {}}) { {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( <> - + Date: Wed, 16 Aug 2023 11:42:43 +0200 Subject: [PATCH 7/9] fix lint issues --- src/pages/SearchPage.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index 9c7c9986d69a..ac4326651d0a 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -44,6 +44,8 @@ function SearchPage(props) { 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(props.reports, props.personalDetails, '', props.betas), []); const [searchValue, setSearchValue] = useState('') @@ -74,7 +76,7 @@ function SearchPage(props) { }) }, [props.reports, props.personalDetails, searchValue, props.betas]) - const debouncedUpdateOptions = useCallback(_.debounce(updateOptions, 75), [updateOptions]); + const debouncedUpdateOptions = useMemo(() => _.debounce(updateOptions, 75), [updateOptions]); useEffect(() => { Timing.start(CONST.TIMING.SEARCH_RENDER); From 6024bce5af71fab0fc3483f8a7dca0a12c11c49f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Fri, 18 Aug 2023 11:20:00 +0200 Subject: [PATCH 8/9] fix prettier --- src/pages/SearchPage.js | 45 ++++++++++++++++++----------------------- 1 file changed, 20 insertions(+), 25 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index ac4326651d0a..bbd9364d6821 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -43,16 +43,16 @@ function SearchPage(props) { const { recentReports: initialRecentReports, personalDetails: initialPersonalDetails, - userToInvite: initialUserToInvite + 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(props.reports, props.personalDetails, '', props.betas), []); - const [searchValue, setSearchValue] = useState('') + const [searchValue, setSearchValue] = useState(''); const [searchOptions, setSearchOptions] = useState({ recentReports: initialRecentReports, personalDetails: initialPersonalDetails, - userToInvite: initialUserToInvite + userToInvite: initialUserToInvite, }); const {translate} = useLocalize(); @@ -61,31 +61,26 @@ function SearchPage(props) { const { recentReports: localRecentReports, personalDetails: localPersonalDetails, - userToInvite: localUserToInvite - } = OptionsListUtils.getSearchOptions( - props.reports, - props.personalDetails, - searchValue.trim(), - props.betas, - ); + userToInvite: localUserToInvite, + } = OptionsListUtils.getSearchOptions(props.reports, props.personalDetails, searchValue.trim(), props.betas); setSearchOptions({ recentReports: localRecentReports, personalDetails: localPersonalDetails, - userToInvite: localUserToInvite - }) - }, [props.reports, props.personalDetails, searchValue, props.betas]) + userToInvite: localUserToInvite, + }); + }, [props.reports, props.personalDetails, searchValue, props.betas]); const debouncedUpdateOptions = useMemo(() => _.debounce(updateOptions, 75), [updateOptions]); useEffect(() => { Timing.start(CONST.TIMING.SEARCH_RENDER); Performance.markStart(CONST.TIMING.SEARCH_RENDER); - }, []) + }, []); useEffect(() => { - debouncedUpdateOptions() - }, [searchValue, debouncedUpdateOptions]) + debouncedUpdateOptions(); + }, [searchValue, debouncedUpdateOptions]); /** * Returns the sections needed for the OptionsSelector @@ -123,16 +118,16 @@ function SearchPage(props) { } return sections; - } + }; const searchRendered = () => { Timing.end(CONST.TIMING.SEARCH_RENDER); Performance.markEnd(CONST.TIMING.SEARCH_RENDER); - } + }; const onChangeText = (value = '') => { - setSearchValue(value) - } + setSearchValue(value); + }; /** * Reset the search value and redirect to the selected report @@ -144,12 +139,12 @@ function SearchPage(props) { return; } if (option.reportID) { - setSearchValue('') + setSearchValue(''); Navigation.dismissModal(option.reportID); } else { Report.navigateToAndOpenReport([option.login]); } - } + }; const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(props.personalDetails); const headerMessage = OptionsListUtils.getHeaderMessage( @@ -161,7 +156,7 @@ function SearchPage(props) { {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( <> - + )} - ) + ); } SearchPage.propTypes = propTypes; -SearchPage.defaultProps = defaultProps +SearchPage.defaultProps = defaultProps; SearchPage.displayName = 'SearchPage'; export default withOnyx({ reports: { From 22042e51213dacff39a9ad280bb8e729fe66ca65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= Date: Mon, 21 Aug 2023 16:25:37 +0200 Subject: [PATCH 9/9] destructure the props --- src/pages/SearchPage.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index bbd9364d6821..8ceb8599ddcf 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -38,7 +38,7 @@ const defaultProps = { reports: {}, }; -function SearchPage(props) { +function SearchPage({betas, personalDetails, reports}) { // Data for initialization (runs only on the first render) const { recentReports: initialRecentReports, @@ -46,7 +46,7 @@ function SearchPage(props) { 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(props.reports, props.personalDetails, '', props.betas), []); + } = useMemo(() => OptionsListUtils.getSearchOptions(reports, personalDetails, '', betas), []); const [searchValue, setSearchValue] = useState(''); const [searchOptions, setSearchOptions] = useState({ @@ -62,14 +62,14 @@ function SearchPage(props) { recentReports: localRecentReports, personalDetails: localPersonalDetails, userToInvite: localUserToInvite, - } = OptionsListUtils.getSearchOptions(props.reports, props.personalDetails, searchValue.trim(), props.betas); + } = OptionsListUtils.getSearchOptions(reports, personalDetails, searchValue.trim(), betas); setSearchOptions({ recentReports: localRecentReports, personalDetails: localPersonalDetails, userToInvite: localUserToInvite, }); - }, [props.reports, props.personalDetails, searchValue, props.betas]); + }, [reports, personalDetails, searchValue, betas]); const debouncedUpdateOptions = useMemo(() => _.debounce(updateOptions, 75), [updateOptions]); @@ -146,7 +146,7 @@ function SearchPage(props) { } }; - const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(props.personalDetails); + const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails); const headerMessage = OptionsListUtils.getHeaderMessage( searchOptions.recentReports.length + searchOptions.personalDetails.length !== 0, Boolean(searchOptions.userToInvite),