Skip to content

Details page function migrate #20702

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

Merged
grgia merged 5 commits into from
Jun 16, 2023
+117 −118
Merged

Details page function migrate #20702

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8c8065b
Fix conflict
esh-g Jun 13, 2023
cd913a0
Revert "Fix conflict"
esh-g Jun 13, 2023
c48da1e
Migrate DetailsPage to Function component
esh-g Jun 13, 2023
4a12f9c
Merge branch 'main' into DetailsPage-FC-Migrate
esh-g Jun 15, 2023
ae67538
Fix conflict
esh-g Jun 15, 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
235 changes: 117 additions & 118 deletions src/pages/DetailsPage.js
View file
Open in desktop
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