Skip to content

Commit

Permalink
Merge pull request Expensify#32114 from VickyStash/ts-migration/avata…
Browse files Browse the repository at this point in the history 
…rWithDisplayName-component

[TS migration] Migrate 'AvatarWithDisplayName.js' component to TypeScript
  • Loading branch information
@techievivek
techievivek authored Dec 5, 2023
2 parents 7cff16d + 08a860d commit d77121b
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 54 deletions.
94 changes: 44 additions & 50 deletions src/components/AvatarWithDisplayName.js → src/components/AvatarWithDisplayName.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,76 @@
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
import React, {useCallback, useEffect, useRef} from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import {OnyxCollection, OnyxEntry, withOnyx} from 'react-native-onyx';
import {ValueOf} from 'type-fest';
import Navigation from '@libs/Navigation/Navigation';
import * as OptionsListUtils from '@libs/OptionsListUtils';
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 {PersonalDetails, Policy, Report, ReportActions} from '@src/types/onyx';
import DisplayNames from './DisplayNames';
import MultipleAvatars from './MultipleAvatars';
import ParentNavigationSubtitle from './ParentNavigationSubtitle';
import participantPropTypes from './participantPropTypes';
import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
import SubscriptAvatar from './SubscriptAvatar';
import Text from './Text';

const propTypes = {
type AvatarWithDisplayNamePropsWithOnyx = {
/** All of the actions of the report */
parentReportActions: OnyxEntry<ReportActions>;
};

type AvatarWithDisplayNameProps = AvatarWithDisplayNamePropsWithOnyx & {
/** The report currently being looked at */
report: reportPropTypes,
report: OnyxEntry<Report>;

/** The policy which the user has access to and which the report is tied to */
policy: PropTypes.shape({
/** Name of the policy */
name: PropTypes.string,
}),
policy?: OnyxEntry<Policy>;

/** The size of the avatar */
size: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
size?: ValueOf<typeof CONST.AVATAR_SIZE>;

/** Personal details of all the users */
personalDetails: PropTypes.objectOf(participantPropTypes),
personalDetails: OnyxCollection<PersonalDetails>;

/** Whether if it's an unauthenticated user */
isAnonymous: PropTypes.bool,
isAnonymous?: boolean;

shouldEnableDetailPageNavigation: PropTypes.bool,

/* Onyx Props */
/** All of the actions of the report */
parentReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
/** Whether we should enable detail page navigation */
shouldEnableDetailPageNavigation?: boolean;
};

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

function AvatarWithDisplayName({report, policy, size, isAnonymous, parentReportActions, personalDetails, shouldEnableDetailPageNavigation}) {
function AvatarWithDisplayName({
personalDetails,
policy,
report,
parentReportActions,
isAnonymous = false,
size = CONST.AVATAR_SIZE.DEFAULT,
shouldEnableDetailPageNavigation = false,
}: AvatarWithDisplayNameProps) {
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 icons = ReportUtils.getIcons(report, personalDetails, null, '', -1, policy);
const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(report?.ownerAccountID ? [report.ownerAccountID] : [], personalDetails);
const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(Object.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);
const actorAccountID = useRef<number | null>(null);
useEffect(() => {
const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID], {});
actorAccountID.current = lodashGet(parentReportAction, 'actorAccountID', -1);
const parentReportAction = parentReportActions?.[report?.parentReportActionID ?? ''];
actorAccountID.current = parentReportAction?.actorAccountID ?? -1;
}, [parentReportActions, report]);

const showActorDetails = useCallback(() => {
Expand All @@ -86,31 +79,33 @@ function AvatarWithDisplayName({report, policy, size, isAnonymous, parentReportA
return ReportUtils.navigateToDetailsPage(report);
}

if (ReportUtils.isExpenseReport(report)) {
if (ReportUtils.isExpenseReport(report) && report?.ownerAccountID) {
Navigation.navigate(ROUTES.PROFILE.getRoute(report.ownerAccountID));
return;
}

if (ReportUtils.isIOUReport(report)) {
if (ReportUtils.isIOUReport(report) && report?.reportID) {
Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(report.reportID));
return;
}

if (ReportUtils.isChatThread(report)) {
// In an ideal situation account ID won't be 0
if (actorAccountID.current > 0) {
if (actorAccountID.current && actorAccountID.current > 0) {
Navigation.navigate(ROUTES.PROFILE.getRoute(actorAccountID.current));
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 (report?.reportID) {
// 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(report && title) && (
{report && !!title && (
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
<PressableWithoutFeedback
onPress={showActorDetails}
Expand Down Expand Up @@ -141,13 +136,13 @@ function AvatarWithDisplayName({report, policy, size, isAnonymous, parentReportA
textStyles={[isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]}
shouldUseFullTitle={isMoneyRequestOrReport || isAnonymous}
/>
{!_.isEmpty(parentNavigationSubtitleData) && (
{Object.keys(parentNavigationSubtitleData).length > 0 && (
<ParentNavigationSubtitle
parentNavigationSubtitleData={parentNavigationSubtitleData}
parentReportID={report.parentReportID}
parentReportID={report?.parentReportID}
/>
)}
{!_.isEmpty(subtitle) && (
{!!subtitle && (
<Text
style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre]}
numberOfLines={1}
Expand Down Expand Up @@ -176,11 +171,10 @@ function AvatarWithDisplayName({report, policy, size, isAnonymous, parentReportA
</PressableWithoutFeedback>
);
}
AvatarWithDisplayName.propTypes = propTypes;

AvatarWithDisplayName.displayName = 'AvatarWithDisplayName';
AvatarWithDisplayName.defaultProps = defaultProps;

export default withOnyx({
export default withOnyx<AvatarWithDisplayNameProps, AvatarWithDisplayNamePropsWithOnyx>({
parentReportActions: {
key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '0'}`,
canEvict: false,
Expand Down
2 changes: 1 addition & 1 deletion src/languages/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ type OOOEventSummaryFullDayParams = {summary: string; dayCount: number; date: st

type OOOEventSummaryPartialDayParams = {summary: string; timePeriod: string; date: string};

type ParentNavigationSummaryParams = {rootReportName: string; workspaceName: string};
type ParentNavigationSummaryParams = {rootReportName?: string; workspaceName?: string};

type SetTheRequestParams = {valueName: string; newValueToDisplay: string};

Expand Down
2 changes: 1 addition & 1 deletion src/libs/OptionsListUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ function getAvatarsForAccountIDs(accountIDs, personalDetails, defaultValues = {}
* Returns the personal details for an array of accountIDs
*
* @param {Array} accountIDs
* @param {Object} personalDetails
* @param {Object | null} personalDetails
* @returns {Object} – keys of the object are emails, values are PersonalDetails objects.
*/
function getPersonalDetailsForAccountIDs(accountIDs, personalDetails) {
Expand Down
4 changes: 2 additions & 2 deletions src/libs/ReportUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {ValueOf} from 'type-fest';
import * as Expensicons from '@components/Icon/Expensicons';
import * as defaultWorkspaceAvatars from '@components/Icon/WorkspaceDefaultAvatars';
import CONST from '@src/CONST';
import {TranslationPaths} from '@src/languages/types';
import {ParentNavigationSummaryParams, TranslationPaths} from '@src/languages/types';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import {Beta, Login, PersonalDetails, Policy, PolicyTags, Report, ReportAction, Session, Transaction} from '@src/types/onyx';
Expand Down Expand Up @@ -2310,7 +2310,7 @@ function getChatRoomSubtitle(report: OnyxEntry<Report>): string | undefined {
/**
* Gets the parent navigation subtitle for the report
*/
function getParentNavigationSubtitle(report: OnyxEntry<Report>): ReportAndWorkspaceName | EmptyObject {
function getParentNavigationSubtitle(report: OnyxEntry<Report>): ParentNavigationSummaryParams {
if (isThread(report)) {
const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`] ?? null;
const {rootReportName, workspaceName} = getRootReportAndWorkspaceName(parentReport);
Expand Down

0 comments on commit d77121b

Please sign in to comment.