Revert "refactor: ReportDetailsPage"

This reverts commit 0f5aa5d.
Expensify · May 15, 2024 · 6d1e40e · 6d1e40e
1 parent 0f5aa5d
commit 6d1e40e
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 66 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -2086,12 +2086,12 @@ const CONST = {
         INFO: 'info',
     },
     REPORT_DETAILS_MENU_ITEM: {
+        SHARE_CODE: 'shareCode',
         MEMBERS: 'member',
         INVITE: 'invite',
         SETTINGS: 'settings',
         LEAVE_ROOM: 'leaveRoom',
         PRIVATE_NOTES: 'privateNotes',
-        LEAVE: 'leave',
     },
     EDIT_REQUEST_FIELD: {
         AMOUNT: 'amount',

diff --git a/src/components/PromotedActionsBar.tsx b/src/components/PromotedActionsBar.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
+import React, {useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as HeaderUtils from '@libs/HeaderUtils';
-import * as Localize from '@libs/Localize';
-import Navigation from '@libs/Navigation/Navigation';
-import ROUTES from '@src/ROUTES';
+import * as ReportActions from '@userActions/Report';
 import type OnyxReport from '@src/types/onyx/Report';
 import Button from './Button';
+import ConfirmModal from './ConfirmModal';
 import type {ThreeDotsMenuItem} from './HeaderWithBackButton/types';
 import * as Expensicons from './Icon/Expensicons';
 
@@ -20,9 +20,9 @@ type ReportPromotedAction = (report: OnyxReport) => PromotedAction;
 
 type PromotedActionsType = {
     pin: ReportPromotedAction;
-    share: ReportPromotedAction;
     // message: (accountID: number) => PromotedAction;
     // join: ReportPromotedAction;
+    // share: ReportPromotedAction;
     // hold: () => PromotedAction;
 };
 
@@ -31,12 +31,6 @@ const PromotedActions = {
         key: 'pin',
         ...HeaderUtils.getPinMenuItem(report),
     }),
-    share: (report) => ({
-        key: 'share',
-        icon: Expensicons.QrCode,
-        text: Localize.translateLocal('common.share'),
-        onSelected: () => Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS_SHARE_CODE.getRoute(report?.reportID ?? '')),
-    }),
     // TODO: Uncomment the following lines when the corresponding features are implemented
     // message: (accountID) => ({
     //     key: 'message',
@@ -50,6 +44,12 @@ const PromotedActions = {
     //     text: Localize.translateLocal('common.join'),
     //     onSelected: () => Session.checkIfActionIsAllowed(() => Report.joinRoom(report)),
     // }),
+    // share: (report) => ({
+    //     key: 'share',
+    //     icon: Expensicons.QrCode,
+    //     text: Localize.translateLocal('common.share'),
+    //     onSelected: () => Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS_SHARE_CODE.getRoute(report?.reportID ?? '')),
+    // }),
     // hold: () => ({
     //     key: 'hold',
     //     icon: Expensicons.Stopwatch,
@@ -59,23 +59,64 @@ const PromotedActions = {
 } satisfies PromotedActionsType;
 
 type PromotedActionsBarProps = {
+    /** The report of actions */
+    report?: OnyxReport;
+
     /** The list of actions to show */
     promotedActions: PromotedAction[];
 
     /** The style of the container */
     containerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Whether to show the `Leave` button.
+     * @deprecated Remove this prop when @src/pages/ReportDetailsPage.tsx is updated
+     */
+    shouldShowLeaveButton?: boolean;
 };
 
-function PromotedActionsBar({promotedActions, containerStyle}: PromotedActionsBarProps) {
+function PromotedActionsBar({report, promotedActions, containerStyle, shouldShowLeaveButton}: PromotedActionsBarProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
-
-    if (promotedActions.length === 0) {
-        return null;
-    }
+    const [isLastMemberLeavingGroupModalVisible, setIsLastMemberLeavingGroupModalVisible] = useState(false);
+    const {translate} = useLocalize();
 
     return (
         <View style={[styles.flexRow, styles.ph5, styles.mb5, styles.gap2, styles.mw100, styles.w100, containerStyle]}>
+            {/* TODO: Remove the `Leave` button when @src/pages/ReportDetailsPage.tsx is updated */}
+            {shouldShowLeaveButton && report && (
+                // The `Leave` button is left to make the component backward compatible with the existing code.
+                // After the `Leave` button is moved to the `MenuItem` list, this block can be removed.
+                <View style={[styles.flex1]}>
+                    <ConfirmModal
+                        danger
+                        title={translate('groupChat.lastMemberTitle')}
+                        isVisible={isLastMemberLeavingGroupModalVisible}
+                        onConfirm={() => {
+                            setIsLastMemberLeavingGroupModalVisible(false);
+                            ReportActions.leaveGroupChat(report.reportID);
+                        }}
+                        onCancel={() => setIsLastMemberLeavingGroupModalVisible(false)}
+                        prompt={translate('groupChat.lastMemberWarning')}
+                        confirmText={translate('common.leave')}
+                        cancelText={translate('common.cancel')}
+                    />
+                    <Button
+                        onPress={() => {
+                            if (Object.keys(report?.participants ?? {}).length === 1) {
+                                setIsLastMemberLeavingGroupModalVisible(true);
+                                return;
+                            }
+
+                            ReportActions.leaveGroupChat(report.reportID);
+                        }}
+                        icon={Expensicons.Exit}
+                        style={styles.flex1}
+                        medium
+                        text={translate('common.leave')}
+                    />
+                </View>
+            )}
             {promotedActions.map(({key, onSelected, ...props}) => (
                 <View
                     style={[styles.flex1]}

diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
@@ -1,13 +1,12 @@
 import {useRoute} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import AvatarWithImagePicker from '@components/AvatarWithImagePicker';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import ConfirmModal from '@components/ConfirmModal';
 import DisplayNames from '@components/DisplayNames';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -18,7 +17,6 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ParentNavigationSubtitle from '@components/ParentNavigationSubtitle';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import PromotedActionsBar, {PromotedActions} from '@components/PromotedActionsBar';
-import type {PromotedAction} from '@components/PromotedActionsBar';
 import RoomHeaderAvatars from '@components/RoomHeaderAvatars';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
@@ -81,7 +79,6 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
     const isInvoiceReport = useMemo(() => ReportUtils.isInvoiceReport(report), [report]);
     const canEditReportDescription = useMemo(() => ReportUtils.canEditReportDescription(report, policy), [report, policy]);
     const shouldShowReportDescription = isChatRoom && (canEditReportDescription || report.description !== '');
-    const [isLastMemberLeavingGroupModalVisible, setIsLastMemberLeavingGroupModalVisible] = useState(false);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps -- policy is a dependency because `getChatRoomSubtitle` calls `getPolicyName` which in turn retrieves the value from the `policy` value stored in Onyx
     const chatRoomSubtitle = useMemo(() => ReportUtils.getChatRoomSubtitle(report), [report, policy]);
@@ -123,6 +120,16 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
             return [];
         }
 
+        if (!isGroupDMChat) {
+            items.push({
+                key: CONST.REPORT_DETAILS_MENU_ITEM.SHARE_CODE,
+                translationKey: 'common.shareCode',
+                icon: Expensicons.QrCode,
+                isAnonymousAction: true,
+                action: () => Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS_SHARE_CODE.getRoute(report?.reportID ?? '')),
+            });
+        }
+
         if (isArchivedRoom) {
             return items;
         }
@@ -189,26 +196,10 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
             });
         }
 
-        if (isGroupChat) {
-            items.push({
-                key: CONST.REPORT_DETAILS_MENU_ITEM.LEAVE,
-                translationKey: 'common.leave',
-                icon: Expensicons.Exit,
-                isAnonymousAction: false,
-                action: () => {
-                    if (activeChatMembers.length === 1) {
-                        setIsLastMemberLeavingGroupModalVisible(true);
-                        return;
-                    }
-
-                    Report.leaveGroupChat(report.reportID);
-                },
-            });
-        }
-
         return items;
     }, [
         isSelfDM,
+        isGroupDMChat,
         isArchivedRoom,
         isGroupChat,
         isDefaultRoom,
@@ -223,20 +214,6 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
         session,
     ]);
 
-    const promotedActions = useMemo(() => {
-        const result: PromotedAction[] = [];
-
-        if (isGroupChat) {
-            result.push(PromotedActions.pin(report));
-        }
-
-        if (!isGroupDMChat) {
-            result.push(PromotedActions.share(report));
-        }
-
-        return result;
-    }, [isGroupChat, isGroupDMChat, report]);
-
     const displayNamesWithTooltips = useMemo(() => {
         const hasMultipleParticipants = participants.length > 1;
         return ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails), hasMultipleParticipants);
@@ -355,7 +332,13 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                             />
                         </OfflineWithFeedback>
                     )}
-                    <PromotedActionsBar promotedActions={promotedActions} />
+                    {isGroupChat && (
+                        <PromotedActionsBar
+                            report={report}
+                            promotedActions={[PromotedActions.pin(report)]}
+                            shouldShowLeaveButton
+                        />
+                    )}
                     {menuItems.map((item) => {
                         const brickRoadIndicator =
                             ReportUtils.hasReportNameError(report) && item.key === CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined;
@@ -372,19 +355,6 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                             />
                         );
                     })}
-                    <ConfirmModal
-                        danger
-                        title={translate('groupChat.lastMemberTitle')}
-                        isVisible={isLastMemberLeavingGroupModalVisible}
-                        onConfirm={() => {
-                            setIsLastMemberLeavingGroupModalVisible(false);
-                            Report.leaveGroupChat(report.reportID);
-                        }}
-                        onCancel={() => setIsLastMemberLeavingGroupModalVisible(false)}
-                        prompt={translate('groupChat.lastMemberWarning')}
-                        confirmText={translate('common.leave')}
-                        cancelText={translate('common.cancel')}
-                    />
                 </ScrollView>
             </FullPageNotFoundView>
         </ScreenWrapper>