Convert SearchPage to functional component

src/pages/SearchPage.js

@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import React, {Component} 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,82 +31,73 @@ const propTypes = {
 
     /** All reports shared with the user */
     reports: PropTypes.objectOf(reportPropTypes),
-
-    /** Window Dimensions Props */
-    ...windowDimensionsPropTypes,
-
-    ...withLocalizePropTypes,
 };
 
-const defaultProps = {
-    betas: [],
-    personalDetails: {},
-    reports: {},
-};
+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), []);
 
-class SearchPage extends Component {
-    constructor(props) {
-        super(props);
+    const [searchValue, setSearchValue] = useState('')
+    const [activeRecentReports, setActiveRecentReports] = useState(initialRecentReports)
+    const [activePersonalDetails, setActivePersonalDetails] = useState(initialPersonalDetails)
+    const [activeUserToInvite, setActiveUserToInvite] = useState(initialUserToInvite)
 
-        Timing.start(CONST.TIMING.SEARCH_RENDER);
-        Performance.markStart(CONST.TIMING.SEARCH_RENDER);
+    const {translate} = useLocalize();
 
-        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(
+            reports,
+            personalDetails,
+            searchValue.trim(),
+            betas,
+        );
 
-        const {recentReports, personalDetails, userToInvite} = OptionsListUtils.getSearchOptions(props.reports, props.personalDetails, '', props.betas);
+        setActiveUserToInvite(localUserToInvite)
+        setActiveRecentReports(localRecentReports)
+        setActivePersonalDetails(localPersonalDetails)
+    }, [reports, personalDetails, searchValue, betas])
 
-        this.state = {
-            searchValue: '',
-            recentReports,
-            personalDetails,
-            userToInvite,
-        };
-    }
+    const debouncedUpdateOptions = useCallback(() => _.debounce(updateOptions, 75), [updateOptions]);
 
-    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(() => {
+        debouncedUpdateOptions()
+    }, [searchValue, debouncedUpdateOptions])
 
     /**
      * Returns the sections needed for the OptionsSelector
      *
      * @returns {Array}
      */
-    getSections() {
+    const getSections = () => {
         const sections = [];
         let indexOffset = 0;
 
-        if (this.state.recentReports.length > 0) {
+        if (activeRecentReports.length > 0) {
             sections.push({
-                data: this.state.recentReports,
+                data: activeRecentReports,
                 shouldShow: true,
                 indexOffset,
             });
-            indexOffset += this.state.recentReports.length;
+            indexOffset += activeRecentReports.length;
         }
 
-        if (this.state.personalDetails.length > 0) {
+        if (activePersonalDetails.length > 0) {
             sections.push({
-                data: this.state.personalDetails,
+                data: activePersonalDetails,
                 shouldShow: true,
                 indexOffset,
             });
-            indexOffset += this.state.recentReports.length;
+            indexOffset += activeRecentReports.length;
         }
 
-        if (this.state.userToInvite) {
+        if (activeUserToInvite) {
             sections.push({
-                data: [this.state.userToInvite],
+                data: [activeUserToInvite],
                 shouldShow: true,
                 indexOffset,
             });
@@ -116,91 +106,67 @@ 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,
-        });
+    const onChangeText = (value = '') => {
+        setSearchValue(value)
     }
 
     /**
      * Reset the search value and redirect to the selected report
      *
      * @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 (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
-                    <>
-                        <HeaderWithBackButton title={this.props.translate('common.search')} />
-                        <View style={[styles.flex1, styles.w100, styles.pRelative]}>
-                            <OptionsSelector
-                                sections={sections}
-                                value={this.state.searchValue}
-                                onSelectRow={this.selectReport}
-                                onChangeText={this.onChangeText}
-                                headerMessage={headerMessage}
-                                hideSectionHeaders
-                                showTitleTooltip
-                                shouldShowOptions={didScreenTransitionEnd && isOptionsDataReady}
-                                textInputLabel={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
-                                onLayout={this.searchRendered}
-                                safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
-                            />
-                        </View>
-                    </>
-                )}
-            </ScreenWrapper>
-        );
-    }
+    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
+    const headerMessage = OptionsListUtils.getHeaderMessage(
+        activeRecentReports.length + activePersonalDetails.length !== 0,
+        Boolean(activeUserToInvite),
+        searchValue,
+    );
+    return (
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
+                <>
+                    <HeaderWithBackButton title={translate('common.search')} />
+                    <View style={[styles.flex1, styles.w100, styles.pRelative]}>
+                        <OptionsSelector
+                            sections={getSections()}
+                            value={searchValue}
+                            onSelectRow={selectReport}
+                            onChangeText={onChangeText}
+                            headerMessage={headerMessage}
+                            hideSectionHeaders
+                            showTitleTooltip
+                            shouldShowOptions={didScreenTransitionEnd && isOptionsDataReady}
+                            textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                            onLayout={searchRendered}
+                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                        />
+                    </View>
+                </>
+            )}
+        </ScreenWrapper>
+    )
 }
 
 SearchPage.propTypes = propTypes;
-SearchPage.defaultProps = defaultProps;
-
+SearchPage.displayName = 'SearchPage';
 export default compose(
-    withLocalize,
-    withWindowDimensions,
     withOnyx({
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,