Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove sideloading of Onyx data for avatar with display name #32304

Merged
merged 4 commits into from
Dec 1, 2023
Merged

Remove sideloading of Onyx data for avatar with display name #32304

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dea9ed4
Remove side-loading of parent report action
tgolen Nov 30, 2023
a156200
Destructure props and remove unused props
tgolen Nov 30, 2023
7025f47
Fix style
tgolen Nov 30, 2023
e056672
Remove unused Onyx key
tgolen Dec 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 67 additions & 54 deletions src/components/AvatarWithDisplayName.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
import React from 'react';
import React, {useCallback, useEffect, useRef} from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import compose from '@libs/compose';
import Navigation from '@libs/Navigation/Navigation';
import * as OptionsListUtils from '@libs/OptionsListUtils';
import * as ReportActionsUtils from '@libs/ReportActionsUtils';
import * as ReportUtils from '@libs/ReportUtils';
import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
import reportPropTypes from '@pages/reportPropTypes';
import * as StyleUtils from '@styles/StyleUtils';
import useTheme from '@styles/themes/useTheme';
import useThemeStyles from '@styles/useThemeStyles';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import DisplayNames from './DisplayNames';
import MultipleAvatars from './MultipleAvatars';
Expand All @@ -21,8 +22,6 @@ import participantPropTypes from './participantPropTypes';
import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
import SubscriptAvatar from './SubscriptAvatar';
import Text from './Text';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';

const propTypes = {
/** The report currently being looked at */
Expand All @@ -45,70 +44,76 @@ const propTypes = {

shouldEnableDetailPageNavigation: PropTypes.bool,

...windowDimensionsPropTypes,
...withLocalizePropTypes,
/* Onyx Props */
/** All of the actions of the report */
parentReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
};

const defaultProps = {
personalDetails: {},
policy: {},
report: {},
parentReportActions: {},
isAnonymous: false,
size: CONST.AVATAR_SIZE.DEFAULT,
shouldEnableDetailPageNavigation: false,
};

const showActorDetails = (report, shouldEnableDetailPageNavigation = false) => {
// We should navigate to the details page if the report is a IOU/expense report
if (shouldEnableDetailPageNavigation) {
return ReportUtils.navigateToDetailsPage(report);
}

if (ReportUtils.isExpenseReport(report)) {
Navigation.navigate(ROUTES.PROFILE.getRoute(report.ownerAccountID));
return;
}
function AvatarWithDisplayName({report, policy, size, isAnonymous, parentReportActions, personalDetails, shouldEnableDetailPageNavigation}) {
const theme = useTheme();
const styles = useThemeStyles();
const title = ReportUtils.getReportName(report);
const subtitle = ReportUtils.getChatRoomSubtitle(report);
const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(report);
const isMoneyRequestOrReport = ReportUtils.isMoneyRequestReport(report) || ReportUtils.isMoneyRequest(report);
const icons = ReportUtils.getIcons(report, personalDetails, policy);
const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs([report.ownerAccountID], personalDetails);
const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(_.values(ownerPersonalDetails), false);
const shouldShowSubscriptAvatar = ReportUtils.shouldReportShowSubscript(report);
const isExpenseRequest = ReportUtils.isExpenseRequest(report);
const defaultSubscriptSize = isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : size;
const avatarBorderColor = isAnonymous ? theme.highlightBG : theme.componentBG;

const actorAccountID = useRef(null);
useEffect(() => {
const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID], {});
actorAccountID.current = lodashGet(parentReportAction, 'actorAccountID', -1);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was the biggest change on the PR. The actorAccountID was coming from const parentReportAction = ReportActionsUtils.getParentReportAction(report); which was the deprecated method that needed to be removed.

}, [parentReportActions, report]);

const showActorDetails = useCallback(() => {
// We should navigate to the details page if the report is a IOU/expense report
if (shouldEnableDetailPageNavigation) {
return ReportUtils.navigateToDetailsPage(report);
}

if (ReportUtils.isIOUReport(report)) {
Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(report.reportID));
return;
}
if (ReportUtils.isExpenseReport(report)) {
Navigation.navigate(ROUTES.PROFILE.getRoute(report.ownerAccountID));
return;
}

if (ReportUtils.isChatThread(report)) {
const parentReportAction = ReportActionsUtils.getParentReportAction(report);
const actorAccountID = lodashGet(parentReportAction, 'actorAccountID', -1);
// in an ideal situation account ID won't be 0
if (actorAccountID > 0) {
Navigation.navigate(ROUTES.PROFILE.getRoute(actorAccountID));
if (ReportUtils.isIOUReport(report)) {
Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(report.reportID));
return;
}
}

// report detail route is added as fallback but based on the current implementation this route won't be executed
Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
};
if (ReportUtils.isChatThread(report)) {
// In an ideal situation account ID won't be 0
if (actorAccountID.current > 0) {
Navigation.navigate(ROUTES.PROFILE.getRoute(actorAccountID.current));
return;
}
}

function AvatarWithDisplayName(props) {
const theme = useTheme();
const styles = useThemeStyles();
const title = ReportUtils.getReportName(props.report);
const subtitle = ReportUtils.getChatRoomSubtitle(props.report);
const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(props.report);
const isMoneyRequestOrReport = ReportUtils.isMoneyRequestReport(props.report) || ReportUtils.isMoneyRequest(props.report);
const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policy);
const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs([props.report.ownerAccountID], props.personalDetails);
const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(_.values(ownerPersonalDetails), false);
const shouldShowSubscriptAvatar = ReportUtils.shouldReportShowSubscript(props.report);
const isExpenseRequest = ReportUtils.isExpenseRequest(props.report);
const defaultSubscriptSize = isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : props.size;
const avatarBorderColor = props.isAnonymous ? theme.highlightBG : theme.componentBG;
// Report detail route is added as fallback but based on the current implementation this route won't be executed
Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
}, [report, shouldEnableDetailPageNavigation]);

const headerView = (
<View style={[styles.appContentHeaderTitle, styles.flex1]}>
{Boolean(props.report && title) && (
{Boolean(report && title) && (
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
<PressableWithoutFeedback
onPress={() => showActorDetails(props.report, props.shouldEnableDetailPageNavigation)}
onPress={showActorDetails}
accessibilityLabel={title}
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
Expand All @@ -122,7 +127,7 @@ function AvatarWithDisplayName(props) {
) : (
<MultipleAvatars
icons={icons}
size={props.size}
size={size}
secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
/>
)}
Expand All @@ -133,13 +138,13 @@ function AvatarWithDisplayName(props) {
displayNamesWithTooltips={displayNamesWithTooltips}
tooltipEnabled
numberOfLines={1}
textStyles={[props.isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]}
shouldUseFullTitle={isMoneyRequestOrReport || props.isAnonymous}
textStyles={[isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]}
shouldUseFullTitle={isMoneyRequestOrReport || isAnonymous}
/>
{!_.isEmpty(parentNavigationSubtitleData) && (
<ParentNavigationSubtitle
parentNavigationSubtitleData={parentNavigationSubtitleData}
parentReportID={props.report.parentReportID}
parentReportID={report.parentReportID}
/>
)}
{!_.isEmpty(subtitle) && (
Expand All @@ -156,13 +161,13 @@ function AvatarWithDisplayName(props) {
</View>
);

if (!props.shouldEnableDetailPageNavigation) {
if (!shouldEnableDetailPageNavigation) {
return headerView;
}

return (
<PressableWithoutFeedback
onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
onPress={() => ReportUtils.navigateToDetailsPage(report)}
style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
accessibilityLabel={title}
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
Expand All @@ -175,4 +180,12 @@ AvatarWithDisplayName.propTypes = propTypes;
AvatarWithDisplayName.displayName = 'AvatarWithDisplayName';
AvatarWithDisplayName.defaultProps = defaultProps;

export default compose(withWindowDimensions, withLocalize)(AvatarWithDisplayName);
export default withOnyx({
session: {
key: ONYXKEYS.SESSION,
},
parentReportActions: {
key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '0'}`,
canEvict: false,
},
})(AvatarWithDisplayName);
Loading