Merge pull request Expensify#30168 from hurali97/perf/optimise-compos…

…er-send

perf: optimise composer send behaviour

src/components/AnonymousReportFooter.tsx

@@ -1,27 +1,31 @@
 import React from 'react';
 import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Session from '@userActions/Session';
-import type {PersonalDetailsList, Report} from '@src/types/onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Policy, Report} from '@src/types/onyx';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
 import Button from './Button';
 import ExpensifyWordmark from './ExpensifyWordmark';
 import Text from './Text';
 
-type AnonymousReportFooterProps = {
+type AnonymousReportFooterPropsWithOnyx = {
+    /** The policy which the user has access to and which the report is tied to */
+    policy: OnyxEntry<Policy>;
+};
+
+type AnonymousReportFooterProps = AnonymousReportFooterPropsWithOnyx & {
     /** The report currently being looked at */
     report: OnyxEntry<Report>;
 
     /** Whether the small screen size layout should be used */
     isSmallSizeLayout?: boolean;
-
-    /** Personal details of all the users */
-    personalDetails: OnyxEntry<PersonalDetailsList>;
 };
 
-function AnonymousReportFooter({isSmallSizeLayout = false, personalDetails, report}: AnonymousReportFooterProps) {
+function AnonymousReportFooter({isSmallSizeLayout = false, report, policy}: AnonymousReportFooterProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -30,9 +34,9 @@ function AnonymousReportFooter({isSmallSizeLayout = false, personalDetails, repo
             <View style={[styles.flexRow, styles.flexShrink1]}>
                 <AvatarWithDisplayName
                     report={report}
-                    personalDetails={personalDetails}
                     isAnonymous
                     shouldEnableDetailPageNavigation
+                    policy={policy}
                 />
             </View>
             <View style={styles.anonymousRoomFooterWordmarkAndLogoContainer(isSmallSizeLayout)}>
@@ -57,4 +61,8 @@ function AnonymousReportFooter({isSmallSizeLayout = false, personalDetails, repo
 
 AnonymousReportFooter.displayName = 'AnonymousReportFooter';
 
-export default AnonymousReportFooter;
+export default withOnyx<AnonymousReportFooterProps, AnonymousReportFooterPropsWithOnyx>({
+    policy: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`,
+    },
+})(AnonymousReportFooter);

src/components/AttachmentModal.tsx

@@ -1,5 +1,5 @@
 import Str from 'expensify-common/lib/str';
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {memo, useCallback, useEffect, useMemo, useState} from 'react';
 import {Animated, Keyboard, View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {withOnyx} from 'react-native-onyx';
@@ -615,6 +615,6 @@ export default withOnyx<AttachmentModalProps, AttachmentModalOnyxProps>({
         key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '0'}`,
         canEvict: false,
     },
-})(AttachmentModal);
+})(memo(AttachmentModal));
 
 export type {Attachment};

src/components/AvatarWithDisplayName.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -12,7 +12,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {PersonalDetails, PersonalDetailsList, Policy, Report, ReportActions} from '@src/types/onyx';
+import type {PersonalDetails, Policy, Report, ReportActions} from '@src/types/onyx';
 import DisplayNames from './DisplayNames';
 import MultipleAvatars from './MultipleAvatars';
 import ParentNavigationSubtitle from './ParentNavigationSubtitle';
@@ -23,6 +23,9 @@ import Text from './Text';
 type AvatarWithDisplayNamePropsWithOnyx = {
     /** All of the actions of the report */
     parentReportActions: OnyxEntry<ReportActions>;
+
+    /** Personal details of all users */
+    personalDetails: OnyxCollection<PersonalDetails>;
 };
 
 type AvatarWithDisplayNameProps = AvatarWithDisplayNamePropsWithOnyx & {
@@ -35,9 +38,6 @@ type AvatarWithDisplayNameProps = AvatarWithDisplayNamePropsWithOnyx & {
     /** The size of the avatar */
     size?: ValueOf<typeof CONST.AVATAR_SIZE>;
 
-    /** Personal details of all the users */
-    personalDetails: OnyxEntry<PersonalDetailsList>;
-
     /** Whether if it's an unauthenticated user */
     isAnonymous?: boolean;
 
@@ -46,13 +46,13 @@ type AvatarWithDisplayNameProps = AvatarWithDisplayNamePropsWithOnyx & {
 };
 
 function AvatarWithDisplayName({
-    personalDetails,
     policy,
     report,
     parentReportActions,
     isAnonymous = false,
     size = CONST.AVATAR_SIZE.DEFAULT,
     shouldEnableDetailPageNavigation = false,
+    personalDetails = CONST.EMPTY_OBJECT,
 }: AvatarWithDisplayNameProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -181,4 +181,7 @@ export default withOnyx<AvatarWithDisplayNameProps, AvatarWithDisplayNamePropsWi
         key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '0'}`,
         canEvict: false,
     },
+    personalDetails: {
+        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+    },
 })(AvatarWithDisplayName);

src/components/EmojiPicker/EmojiPickerButton.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useEffect, useRef} from 'react';
+import React, {memo, useEffect, useRef} from 'react';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
@@ -87,4 +87,4 @@ function EmojiPickerButton(props) {
 EmojiPickerButton.propTypes = propTypes;
 EmojiPickerButton.defaultProps = defaultProps;
 EmojiPickerButton.displayName = 'EmojiPickerButton';
-export default compose(withLocalize, withNavigationFocus)(EmojiPickerButton);
+export default compose(withLocalize, withNavigationFocus)(memo(EmojiPickerButton));

src/components/ExceededCommentLength.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {memo} from 'react';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -20,4 +20,4 @@ function ExceededCommentLength() {
 
 ExceededCommentLength.displayName = 'ExceededCommentLength';
 
-export default ExceededCommentLength;
+export default memo(ExceededCommentLength);

src/components/HeaderWithBackButton/index.tsx

@@ -30,7 +30,6 @@ function HeaderWithBackButton({
     onThreeDotsButtonPress = () => {},
     report = null,
     policy,
-    personalDetails = null,
     shouldShowAvatarWithDisplay = false,
     shouldShowBackButton = true,
     shouldShowBorderBottom = false,
@@ -104,7 +103,6 @@ function HeaderWithBackButton({
                     <AvatarWithDisplayName
                         report={report}
                         policy={policy}
-                        personalDetails={personalDetails}
                         shouldEnableDetailPageNavigation={shouldEnableDetailPageNavigation}
                     />
                 ) : (

src/components/MoneyReportHeader.tsx

@@ -22,6 +22,7 @@ import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import Button from './Button';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar';
+import {usePersonalDetails} from './OnyxProvider';
 import SettlementButton from './SettlementButton';
 
 type PaymentType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE>;
@@ -43,12 +44,10 @@ type MoneyReportHeaderProps = MoneyReportHeaderOnyxProps & {
 
     /** The policy tied to the money request report */
     policy: OnyxTypes.Policy;
-
-    /** Personal details so we can get the ones for the report participants */
-    personalDetails: OnyxTypes.PersonalDetailsList;
 };
 
-function MoneyReportHeader({session, personalDetails, policy, chatReport, nextStep, report: moneyRequestReport}: MoneyReportHeaderProps) {
+function MoneyReportHeader({session, policy, chatReport, nextStep, report: moneyRequestReport}: MoneyReportHeaderProps) {
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {windowWidth, isSmallScreenWidth} = useWindowDimensions();

src/components/MoneyRequestHeader.js

@@ -22,7 +22,7 @@ import ConfirmModal from './ConfirmModal';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import * as Expensicons from './Icon/Expensicons';
 import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
-import participantPropTypes from './participantPropTypes';
+import {usePersonalDetails} from './OnyxProvider';
 import transactionPropTypes from './transactionPropTypes';
 
 const propTypes = {
@@ -35,9 +35,6 @@ const propTypes = {
         name: PropTypes.string,
     }),
 
-    /** Personal details so we can get the ones for the report participants */
-    personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
-
     /* Onyx Props */
     /** Session info for the currently logged in user. */
     session: PropTypes.shape({
@@ -65,7 +62,8 @@ const defaultProps = {
     policy: {},
 };
 
-function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, policy, personalDetails}) {
+function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, policy}) {
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);

src/libs/PersonalDetailsUtils.ts

@@ -195,7 +195,15 @@ function getEffectiveDisplayName(personalDetail?: PersonalDetails): string | und
     return undefined;
 }
 
+/**
+ * Whether personal details is empty
+ */
+function isPersonalDetailsEmpty() {
+    return !personalDetails.length;
+}
+
 export {
+    isPersonalDetailsEmpty,
     getDisplayNameOrDefault,
     getPersonalDetailsByIDs,
     getAccountIDsByLogins,

src/pages/ReportDetailsPage.js

@@ -165,7 +165,7 @@ function ReportDetailsPage(props) {
         return ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs(participants, props.personalDetails), hasMultipleParticipants);
     }, [participants, props.personalDetails]);
 
-    const icons = useMemo(() => ReportUtils.getIcons(props.report, props.personalDetails, props.policies), [props.report, props.personalDetails, props.policies]);
+    const icons = useMemo(() => ReportUtils.getIcons(props.report, props.personalDetails, null, '', -1, policy), [props.report, props.personalDetails, policy]);
 
     const chatRoomSubtitleText = chatRoomSubtitle ? (
         <DisplayNames

src/pages/home/HeaderView.js

@@ -369,5 +369,8 @@ export default memo(
             },
             selector: (policy) => _.pick(policy, ['role']),
         },
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
     })(HeaderView),
 );