update: callback function to hook.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
Expensify · Jan 31, 2024 · 5b42bdf · 5b42bdf
1 parent 40b30f0
commit 5b42bdf
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 37 deletions.
diff --git a/src/hooks/useSearchTermAndSearch.ts b/src/hooks/useSearchTermAndSearch.ts
@@ -0,0 +1,22 @@
+import type {Dispatch} from 'react';
+import {useCallback} from 'react';
+import * as Report from '@userActions/Report';
+
+/**
+ * Hook for fetching reports when user updated search term and hasn't selected max number of participants
+ */
+const useSearchTermAndSearch = (setSearchTerm: Dispatch<React.SetStateAction<string>>, maxParticipantsReached: boolean) => {
+    const setSearchTermAndSearchInServer = useCallback(
+        (text = '') => {
+            if (text && !maxParticipantsReached) {
+                Report.searchInServer(text);
+            }
+            setSearchTerm(text);
+        },
+        [maxParticipantsReached, setSearchTerm],
+    );
+
+    return setSearchTermAndSearchInServer;
+};
+
+export default useSearchTermAndSearch;
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
@@ -11,6 +11,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useNetwork from '@hooks/useNetwork';
+import useSearchTermAndSearch from '@hooks/useSearchTermAndSearch';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
@@ -64,6 +65,8 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
     const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
 
     const maxParticipantsReached = selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
+    const setSearchTermAndSearchInServer = useSearchTermAndSearch(setSearchTerm, maxParticipantsReached);
+
     const headerMessage = OptionsListUtils.getHeaderMessage(
         filteredPersonalDetails.length + filteredRecentReports.length !== 0,
         Boolean(filteredUserToInvite),
@@ -229,17 +232,6 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
         updateOptions();
     }, [didScreenTransitionEnd, updateOptions]);
 
-    // When search term updates & user hasn't selected max number of participants we will fetch any reports
-    const setSearchTermAndSearchInServer = useCallback(
-        (text = '') => {
-            if (text && !maxParticipantsReached) {
-                Report.searchInServer(text);
-            }
-            setSearchTerm(text);
-        },
-        [maxParticipantsReached],
-    );
-
     const {inputCallbackRef} = useAutoFocusInput();
 
     return (

diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
@@ -13,8 +13,8 @@ import SelectCircle from '@components/SelectCircle';
 import SelectionList from '@components/SelectionList';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useSearchTermAndSearch from '@hooks/useSearchTermAndSearch';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as Report from '@libs/actions/Report';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -88,6 +88,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
     const offlineMessage = isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : '';
 
     const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
+    const setSearchTermAndSearchInServer = useSearchTermAndSearch(setSearchTerm, maxParticipantsReached);
 
     /**
      * Returns the sections needed for the OptionsSelector
@@ -244,17 +245,6 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
         [maxParticipantsReached, newChatOptions, participants, searchTerm],
     );
 
-    // When search term updates & user hasn't selected max number of participants we will fetch any reports
-    const setSearchTermAndSearchInServer = useCallback(
-        (text = '') => {
-            if (text && !maxParticipantsReached) {
-                Report.searchInServer(text);
-            }
-            setSearchTerm(text);
-        },
-        [maxParticipantsReached],
-    );
-
     // Right now you can't split a request with a workspace and other additional participants
     // This is getting properly fixed in https://github.com/Expensify/App/issues/27508, but as a stop-gap to prevent
     // the app from crashing on native when you try to do this, we'll going to hide the button if you have a workspace and other participants

diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -13,8 +13,8 @@ import SelectCircle from '@components/SelectCircle';
 import SelectionList from '@components/SelectionList';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useSearchTermAndSearch from '@hooks/useSearchTermAndSearch';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as Report from '@libs/actions/Report';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import reportPropTypes from '@pages/reportPropTypes';
@@ -89,6 +89,9 @@ function MoneyRequestParticipantsSelector({
     const {isOffline} = useNetwork();
     const personalDetails = usePersonalDetails();
 
+    const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
+    const setSearchTermAndSearchInServer = useSearchTermAndSearch(setSearchTerm, maxParticipantsReached);
+
     const offlineMessage = isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : '';
 
     const newChatOptions = useMemo(() => {
@@ -124,8 +127,6 @@ function MoneyRequestParticipantsSelector({
         };
     }, [betas, reports, participants, personalDetails, searchTerm, iouType, isDistanceRequest]);
 
-    const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
-
     /**
      * Returns the sections needed for the OptionsSelector
      *
@@ -260,17 +261,6 @@ function MoneyRequestParticipantsSelector({
         [maxParticipantsReached, newChatOptions.personalDetails.length, newChatOptions.recentReports.length, newChatOptions.userToInvite, participants, searchTerm],
     );
 
-    // When search term updates & user hasn't selected max number of participants we will fetch any reports
-    const setSearchTermAndSearchInServer = useCallback(
-        (text = '') => {
-            if (text && !maxParticipantsReached) {
-                Report.searchInServer(text);
-            }
-            setSearchTerm(text);
-        },
-        [maxParticipantsReached],
-    );
-
     // Right now you can't split a request with a workspace and other additional participants
     // This is getting properly fixed in https://github.com/Expensify/App/issues/27508, but as a stop-gap to prevent
     // the app from crashing on native when you try to do this, we'll going to show error message if you have a workspace and other participants