Merge pull request #37164 from tienifr/fix/32753-extended

Fix: User navigates to many pages when quickly press them in ProfilePage
Expensify · Mar 1, 2024 · b0d72db · b0d72db
2 parents 7afbf43 + e2167ea
commit b0d72db
Showing 1 changed file with 50 additions and 47 deletions.
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
@@ -7,6 +7,7 @@ import _ from 'underscore';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
+import MenuItemGroup from '@components/MenuItemGroup';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Section from '@components/Section';
@@ -169,53 +170,55 @@ function ProfilePage(props) {
                 icon={Illustrations.Profile}
             />
             <ScrollView style={styles.pt3}>
-                <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
-                    <Section
-                        title={props.translate('profilePage.publicSection.title')}
-                        subtitle={props.translate('profilePage.publicSection.subtitle')}
-                        isCentralPane
-                        subtitleMuted
-                        childrenStyles={styles.pt5}
-                        titleStyles={styles.accountSettingsSectionTitle}
-                    >
-                        {_.map(publicOptions, (detail, index) => (
-                            <MenuItemWithTopDescription
-                                key={`${detail.title}_${index}`}
-                                shouldShowRightIcon
-                                title={detail.title}
-                                description={detail.description}
-                                wrapperStyle={styles.sectionMenuItemTopDescription}
-                                onPress={() => Navigation.navigate(detail.pageRoute)}
-                                brickRoadIndicator={detail.brickRoadIndicator}
-                            />
-                        ))}
-                    </Section>
-                    <Section
-                        title={props.translate('profilePage.privateSection.title')}
-                        subtitle={props.translate('profilePage.privateSection.subtitle')}
-                        isCentralPane
-                        subtitleMuted
-                        childrenStyles={styles.pt3}
-                        titleStyles={styles.accountSettingsSectionTitle}
-                    >
-                        {isLoadingPersonalDetails ? (
-                            <FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative, StyleUtils.getBackgroundColorStyle(theme.cardBG)]} />
-                        ) : (
-                            <>
-                                {_.map(privateOptions, (detail, index) => (
-                                    <MenuItemWithTopDescription
-                                        key={`${detail.title}_${index}`}
-                                        shouldShowRightIcon
-                                        title={detail.title}
-                                        description={detail.description}
-                                        wrapperStyle={styles.sectionMenuItemTopDescription}
-                                        onPress={() => Navigation.navigate(detail.pageRoute)}
-                                    />
-                                ))}
-                            </>
-                        )}
-                    </Section>
-                </View>
+                <MenuItemGroup>
+                    <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                        <Section
+                            title={props.translate('profilePage.publicSection.title')}
+                            subtitle={props.translate('profilePage.publicSection.subtitle')}
+                            isCentralPane
+                            subtitleMuted
+                            childrenStyles={styles.pt5}
+                            titleStyles={styles.accountSettingsSectionTitle}
+                        >
+                            {_.map(publicOptions, (detail, index) => (
+                                <MenuItemWithTopDescription
+                                    key={`${detail.title}_${index}`}
+                                    shouldShowRightIcon
+                                    title={detail.title}
+                                    description={detail.description}
+                                    wrapperStyle={styles.sectionMenuItemTopDescription}
+                                    onPress={() => Navigation.navigate(detail.pageRoute)}
+                                    brickRoadIndicator={detail.brickRoadIndicator}
+                                />
+                            ))}
+                        </Section>
+                        <Section
+                            title={props.translate('profilePage.privateSection.title')}
+                            subtitle={props.translate('profilePage.privateSection.subtitle')}
+                            isCentralPane
+                            subtitleMuted
+                            childrenStyles={styles.pt3}
+                            titleStyles={styles.accountSettingsSectionTitle}
+                        >
+                            {isLoadingPersonalDetails ? (
+                                <FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative, StyleUtils.getBackgroundColorStyle(theme.cardBG)]} />
+                            ) : (
+                                <>
+                                    {_.map(privateOptions, (detail, index) => (
+                                        <MenuItemWithTopDescription
+                                            key={`${detail.title}_${index}`}
+                                            shouldShowRightIcon
+                                            title={detail.title}
+                                            description={detail.description}
+                                            wrapperStyle={styles.sectionMenuItemTopDescription}
+                                            onPress={() => Navigation.navigate(detail.pageRoute)}
+                                        />
+                                    ))}
+                                </>
+                            )}
+                        </Section>
+                    </View>
+                </MenuItemGroup>
             </ScrollView>
         </ScreenWrapper>
     );