Merge pull request #35058 from lukemorawski/20354-quick_fix_searchpag…

…e_list_refactor 20354 quick fix searchpage list refactor
Expensify · Feb 6, 2024 · d5a766c · d5a766c
2 parents 13f832c + e45d6e0
commit d5a766c
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 271 deletions.
diff --git 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 (
         <PressableWithoutFeedback
             onPress={() => {
@@ -47,7 +60,7 @@ function ReferralProgramCTA({referralContentType, onCloseButtonPress = () => {}}
             </Text>
             <Tooltip text={translate('common.close')}>
                 <PressableWithoutFeedback
-                    onPress={onCloseButtonPress}
+                    onPress={handleDismissCallToAction}
                     onMouseDown={(e) => {
                         e.preventDefault();
                     }}
@@ -67,4 +80,9 @@ function ReferralProgramCTA({referralContentType, onCloseButtonPress = () => {}}
     );
 }
 
-export default ReferralProgramCTA;
+export default withOnyx<ReferralProgramCTAProps, ReferralProgramCTAOnyxProps>({
+    dismissedReferralBanners: {
+        key: ONYXKEYS.ACCOUNT,
+        selector: (data) => data?.dismissedReferralBanners ?? {},
+    },
+})(ReferralProgramCTA);
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -58,6 +58,7 @@ function BaseSelectionList<TItem extends User | RadioItem>(
         shouldShowTooltips = true,
         shouldUseDynamicMaxToRenderPerBatch = false,
         rightHandSideComponent,
+        isLoadingNewOptions = false,
     }: BaseSelectionListProps<TItem>,
     inputRef: ForwardedRef<RNTextInput>,
 ) {
@@ -412,6 +413,7 @@ function BaseSelectionList<TItem extends User | RadioItem>(
                                     spellCheck={false}
                                     onSubmitEditing={selectFocusedOption}
                                     blurOnSubmit={!!flattenedSections.allOptions.length}
+                                    isLoading={isLoadingNewOptions}
                                 />
                             </View>
                         )}

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -230,6 +230,9 @@ type BaseSelectionListProps<TItem extends User | RadioItem> = Partial<ChildrenPr
 
     /** Component to display on the right side of each child */
     rightHandSideComponent?: ((item: TItem) => ReactElement<TItem>) | ReactElement | null;
+
+    /** Whether to show the loading indicator for new options */
+    isLoadingNewOptions?: boolean;
 };
 
 type ItemLayout = {

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
diff --git 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 && (
-                <View style={[themeStyles.pb5, themeStyles.flexShrink0]}>
-                    <ReferralProgramCTA
-                        referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}
-                        onCloseButtonPress={closeCallToActionBanner}
-                    />
-                </View>
-            )}
-        </>
+        <View style={[themeStyles.flexShrink0]}>
+            <ReferralProgramCTA referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND} />
+        </View>
     );
 }
 
 SearchPageFooter.displayName = 'SearchPageFooter';
 
-export default withOnyx<SearchPageFooterOnyxProps, SearchPageFooterOnyxProps>({
-    dismissedReferralBanners: {
-        key: ONYXKEYS.ACCOUNT,
-        selector: (data) => data?.dismissedReferralBanners ?? {},
-    },
-})(SearchPageFooter);
+export default SearchPageFooter;