Skip to content

Commit

Permalink
Merge pull request #20702 from esh-g/DetailsPage-FC-Migrate
Browse files Browse the repository at this point in the history 
Details page function migrate
  • Loading branch information
@grgia
grgia authored Jun 16, 2023
2 parents ed1cdb3 + ae67538 commit bd0e843
Showing 1 changed file with 117 additions and 118 deletions.
235 changes: 117 additions & 118 deletions src/pages/DetailsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,138 +87,137 @@ const getPhoneNumber = (details) => {
return details.login ? Str.removeSMSDomain(details.login) : '';
};

class DetailsPage extends React.PureComponent {
render() {
const login = lodashGet(this.props.route.params, 'login', '');
let details = _.find(this.props.personalDetails, (detail) => detail.login === login.toLowerCase());

if (!details) {
// TODO: these personal details aren't in my local test account but are in
// my staging account, i wonder why!
if (login === CONST.EMAIL.CONCIERGE) {
details = {
accountID: CONST.ACCOUNT_ID.CONCIERGE,
login,
displayName: 'Concierge',
avatar: UserUtils.getDefaultAvatar(CONST.ACCOUNT_ID.CONCIERGE),
};
} else {
details = {
accountID: -1,
login,
displayName: login,
avatar: UserUtils.getDefaultAvatar(),
};
}
function DetailsPage(props) {
const login = lodashGet(props.route.params, 'login', '');
let details = _.find(props.personalDetails, (detail) => detail.login === login.toLowerCase());

if (!details) {
// TODO: these personal details aren't in my local test account but are in
// my staging account, i wonder why!
if (login === CONST.EMAIL.CONCIERGE) {
details = {
accountID: CONST.ACCOUNT_ID.CONCIERGE,
login,
displayName: 'Concierge',
avatar: UserUtils.getDefaultAvatar(CONST.ACCOUNT_ID.CONCIERGE),
};
} else {
details = {
accountID: -1,
login,
displayName: login,
avatar: UserUtils.getDefaultAvatar(),
};
}
}

const isSMSLogin = details.login ? Str.isSMSLogin(details.login) : false;
const isSMSLogin = details.login ? Str.isSMSLogin(details.login) : false;

const shouldShowLocalTime = !ReportUtils.hasAutomatedExpensifyAccountIDs([details.accountID]) && details.timezone;
let pronouns = details.pronouns;
const shouldShowLocalTime = !ReportUtils.hasAutomatedExpensifyAccountIDs([details.accountID]) && details.timezone;
let pronouns = details.pronouns;

if (pronouns && pronouns.startsWith(CONST.PRONOUNS.PREFIX)) {
const localeKey = pronouns.replace(CONST.PRONOUNS.PREFIX, '');
pronouns = this.props.translate(`pronouns.${localeKey}`);
}
if (pronouns && pronouns.startsWith(CONST.PRONOUNS.PREFIX)) {
const localeKey = pronouns.replace(CONST.PRONOUNS.PREFIX, '');
pronouns = props.translate(`pronouns.${localeKey}`);
}

const phoneNumber = getPhoneNumber(details);
const phoneOrEmail = isSMSLogin ? getPhoneNumber(details) : details.login;

const isCurrentUser = _.keys(this.props.loginList).includes(details.login);

return (
<ScreenWrapper>
<FullPageNotFoundView shouldShow={_.isEmpty(login)}>
<HeaderWithBackButton
title={this.props.translate('common.details')}
onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
/>
<View
pointerEvents="box-none"
style={[styles.containerWithSpaceBetween]}
>
{details ? (
<ScrollView>
<View style={styles.avatarSectionWrapper}>
<AttachmentModal
headerTitle={details.displayName}
source={UserUtils.getFullSizeAvatar(details.avatar, details.accountID)}
isAuthTokenRequired
originalFileName={details.originalFileName}
const phoneNumber = getPhoneNumber(details);
const phoneOrEmail = isSMSLogin ? getPhoneNumber(details) : details.login;

const isCurrentUser = _.keys(props.loginList).includes(details.login);

return (
<ScreenWrapper>
<FullPageNotFoundView shouldShow={_.isEmpty(login)}>
<HeaderWithBackButton
title={props.translate('common.details')}
onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
/>
<View
pointerEvents="box-none"
style={[styles.containerWithSpaceBetween]}
>
{details ? (
<ScrollView>
<View style={styles.avatarSectionWrapper}>
<AttachmentModal
headerTitle={details.displayName}
source={UserUtils.getFullSizeAvatar(details.avatar, details.accountID)}
isAuthTokenRequired
originalFileName={details.originalFileName}
>
{({show}) => (
<PressableWithoutFocus
style={styles.noOutline}
onPress={show}
>
<OfflineWithFeedback pendingAction={lodashGet(details, 'pendingFields.avatar', null)}>
<Avatar
containerStyles={[styles.avatarLarge, styles.mb3]}
imageStyles={[styles.avatarLarge]}
source={UserUtils.getAvatar(details.avatar, details.accountID)}
size={CONST.AVATAR_SIZE.LARGE}
/>
</OfflineWithFeedback>
</PressableWithoutFocus>
)}
</AttachmentModal>
{Boolean(details.displayName) && (
<Text
style={[styles.textHeadline, styles.mb6, styles.pre]}
numberOfLines={1}
>
{({show}) => (
<PressableWithoutFocus
style={styles.noOutline}
onPress={show}
>
<OfflineWithFeedback pendingAction={lodashGet(details, 'pendingFields.avatar', null)}>
<Avatar
containerStyles={[styles.avatarLarge, styles.mb3]}
imageStyles={[styles.avatarLarge]}
source={UserUtils.getAvatar(details.avatar, details.accountID)}
size={CONST.AVATAR_SIZE.LARGE}
/>
</OfflineWithFeedback>
</PressableWithoutFocus>
)}
</AttachmentModal>
{Boolean(details.displayName) && (
{details.displayName}
</Text>
)}
{details.login ? (
<View style={[styles.mb6, styles.detailsPageSectionContainer, styles.w100]}>
<Text
style={[styles.textHeadline, styles.mb6, styles.pre]}
style={[styles.textLabelSupporting, styles.mb1]}
numberOfLines={1}
>
{details.displayName}
{props.translate(isSMSLogin ? 'common.phoneNumber' : 'common.email')}
</Text>
)}
{details.login ? (
<View style={[styles.mb6, styles.detailsPageSectionContainer, styles.w100]}>
<Text
style={[styles.textLabelSupporting, styles.mb1]}
numberOfLines={1}
>
{this.props.translate(isSMSLogin ? 'common.phoneNumber' : 'common.email')}
</Text>
<CommunicationsLink value={phoneOrEmail}>
<UserDetailsTooltip accountID={details.accountID}>
<Text numberOfLines={1}>{isSMSLogin ? this.props.formatPhoneNumber(phoneNumber) : details.login}</Text>
</UserDetailsTooltip>
</CommunicationsLink>
</View>
) : null}
{pronouns ? (
<View style={[styles.mb6, styles.detailsPageSectionContainer]}>
<Text
style={[styles.textLabelSupporting, styles.mb1]}
numberOfLines={1}
>
{this.props.translate('profilePage.preferredPronouns')}
</Text>
<Text numberOfLines={1}>{pronouns}</Text>
</View>
) : null}
{shouldShowLocalTime && <AutoUpdateTime timezone={details.timezone} />}
</View>
{!isCurrentUser && (
<MenuItem
title={`${this.props.translate('common.message')}${details.displayName}`}
icon={Expensicons.ChatBubble}
onPress={() => Report.navigateToAndOpenReport([login])}
wrapperStyle={styles.breakAll}
shouldShowRightIcon
/>
)}
</ScrollView>
) : null}
</View>
</FullPageNotFoundView>
</ScreenWrapper>
);
}
<CommunicationsLink value={phoneOrEmail}>
<UserDetailsTooltip accountID={details.accountID}>
<Text numberOfLines={1}>{isSMSLogin ? props.formatPhoneNumber(phoneNumber) : details.login}</Text>
</UserDetailsTooltip>
</CommunicationsLink>
</View>
) : null}
{pronouns ? (
<View style={[styles.mb6, styles.detailsPageSectionContainer]}>
<Text
style={[styles.textLabelSupporting, styles.mb1]}
numberOfLines={1}
>
{props.translate('profilePage.preferredPronouns')}
</Text>
<Text numberOfLines={1}>{pronouns}</Text>
</View>
) : null}
{shouldShowLocalTime && <AutoUpdateTime timezone={details.timezone} />}
</View>
{!isCurrentUser && (
<MenuItem
title={`${props.translate('common.message')}${details.displayName}`}
icon={Expensicons.ChatBubble}
onPress={() => Report.navigateToAndOpenReport([login])}
wrapperStyle={styles.breakAll}
shouldShowRightIcon
/>
)}
</ScrollView>
) : null}
</View>
</FullPageNotFoundView>
</ScreenWrapper>
);
}

DetailsPage.propTypes = propTypes;
DetailsPage.defaultProps = defaultProps;
DetailsPage.displayName = 'DetailsPage';

export default compose(
withLocalize,
Expand Down

0 comments on commit bd0e843

Please sign in to comment.