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

Jump to bottom

Migrate DetailsPage to functional Component #20449

Closed
wants to merge 4 commits into from
Closed

Migrate DetailsPage to functional Component #20449

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a7d785d
Migrate DetailsPage to functional Component
esh-g Jun 8, 2023
19f9085
Lint Fix Prettier
esh-g Jun 8, 2023
2c40a81
Merge branch 'main' into DetailsPage-FC-Migration
esh-g Jun 13, 2023
9cb755d
Fixed Merge
esh-g Jun 13, 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
221 changes: 110 additions & 111 deletions src/pages/DetailsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,126 +87,125 @@ 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 = lodashGet(this.props.personalDetails, login);

if (!details) {
details = {
login,
displayName: ReportUtils.getDisplayNameForParticipant(login),
avatar: UserUtils.getAvatar(lodashGet(details, 'avatar', ''), login),
};
}

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

const shouldShowLocalTime = !ReportUtils.hasAutomatedExpensifyEmails([details.login]) && 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}`);
}

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.login)}
isAuthTokenRequired
originalFileName={details.originalFileName}
function DetailsPage(props) {
const login = lodashGet(props.route.params, 'login', '');
let details = lodashGet(props.personalDetails, login);

if (!details) {
details = {
login,
displayName: ReportUtils.getDisplayNameForParticipant(login),
avatar: UserUtils.getAvatar(lodashGet(details, 'avatar', ''), login),
};
}

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

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

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(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.login)}
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.login)}
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.login)}
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([details.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([details.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