Skip to content

Commit

Permalink
fix crash on DetailsPage
Browse files Browse the repository at this point in the history
  • Loading branch information
vladnobenladen committed Sep 5, 2022
1 parent 11761be commit f1769bc
Showing 1 changed file with 126 additions and 116 deletions.
242 changes: 126 additions & 116 deletions src/pages/DetailsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {View, ScrollView} from 'react-native';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
import Str from 'expensify-common/lib/str';
import lodashGet from 'lodash/get';
import styles from '../styles/styles';
import Text from '../components/Text';
import ONYXKEYS from '../ONYXKEYS';
Expand Down Expand Up @@ -65,129 +66,138 @@ const getPhoneNumber = (details) => {
return Str.removeSMSDomain(details.login);
};

const DetailsPage = (props) => {
const details = props.personalDetails[props.route.params.login];
if (!details) {
// Personal details have not loaded yet
return <FullscreenLoadingIndicator />;
class DetailsPage extends React.PureComponent {
componentDidMount() {
if (lodashGet(this.props.route.params, 'login')) {
return;
}
Navigation.dismissModal();
}
const isSMSLogin = Str.isSMSLogin(details.login);

// If we have a reportID param this means that we
// arrived here via the ParticipantsPage and should be allowed to navigate back to it
const shouldShowBackButton = Boolean(props.route.params.reportID);
const timezone = DateUtils.getLocalMomentFromTimestamp(props.preferredLocale, null, details.timezone.selected);
const GMTTime = `${timezone.toString().split(/[+-]/)[0].slice(-3)} ${timezone.zoneAbbr()}`;
const currentTime = Number.isNaN(Number(timezone.zoneAbbr())) ? timezone.zoneAbbr() : GMTTime;
const shouldShowLocalTime = !ReportUtils.hasExpensifyEmails([details.login]);
render() {
const details = this.props.personalDetails[lodashGet(this.props.route.params, 'login')];
if (!details) {
// Personal details have not loaded yet
return <FullscreenLoadingIndicator />;
}
const isSMSLogin = Str.isSMSLogin(details.login);

let pronouns = details.pronouns;
// If we have a reportID param this means that we
// arrived here via the ParticipantsPage and should be allowed to navigate back to it
const shouldShowBackButton = Boolean(this.props.route.params.reportID);
const timezone = DateUtils.getLocalMomentFromTimestamp(this.props.preferredLocale, null, details.timezone.selected);
const GMTTime = `${timezone.toString().split(/[+-]/)[0].slice(-3)} ${timezone.zoneAbbr()}`;
const currentTime = Number.isNaN(Number(timezone.zoneAbbr())) ? timezone.zoneAbbr() : GMTTime;
const shouldShowLocalTime = !ReportUtils.hasExpensifyEmails([details.login]);

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

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

return (
<ScreenWrapper>
<HeaderWithCloseButton
title={props.translate('common.details')}
shouldShowBackButton={shouldShowBackButton}
onBackButtonPress={() => Navigation.goBack()}
onCloseButtonPress={() => Navigation.dismissModal()}
/>
<View
pointerEvents="box-none"
style={[
styles.containerWithSpaceBetween,
]}
>
{details ? (
<ScrollView>
<View style={styles.pageWrapper}>
<AttachmentModal
headerTitle={isSMSLogin ? props.toLocalPhone(details.displayName) : details.displayName}
sourceURL={details.avatar}
isAuthTokenRequired
>
{({show}) => (
<PressableWithoutFocus
style={styles.noOutline}
onPress={show}
>
<Avatar
containerStyles={[styles.avatarLarge, styles.mb3]}
imageStyles={[styles.avatarLarge]}
source={details.avatar}
size={CONST.AVATAR_SIZE.LARGE}
/>
</PressableWithoutFocus>
return (
<ScreenWrapper>
<HeaderWithCloseButton
title={this.props.translate('common.details')}
shouldShowBackButton={shouldShowBackButton}
onBackButtonPress={() => Navigation.goBack()}
onCloseButtonPress={() => Navigation.dismissModal()}
/>
<View
pointerEvents="box-none"
style={[
styles.containerWithSpaceBetween,
]}
>
{details ? (
<ScrollView>
<View style={styles.pageWrapper}>
<AttachmentModal
headerTitle={isSMSLogin ? this.props.toLocalPhone(details.displayName) : details.displayName}
sourceURL={details.avatar}
isAuthTokenRequired
>
{({show}) => (
<PressableWithoutFocus
style={styles.noOutline}
onPress={show}
>
<Avatar
containerStyles={[styles.avatarLarge, styles.mb3]}
imageStyles={[styles.avatarLarge]}
source={details.avatar}
size={CONST.AVATAR_SIZE.LARGE}
/>
</PressableWithoutFocus>
)}
</AttachmentModal>
{details.displayName && (
<Text style={[styles.displayName, styles.mb6]} numberOfLines={1}>
{isSMSLogin ? this.props.toLocalPhone(details.displayName) : details.displayName}
</Text>
)}
</AttachmentModal>
{details.displayName && (
<Text style={[styles.displayName, styles.mb6]} numberOfLines={1}>
{isSMSLogin ? props.toLocalPhone(details.displayName) : details.displayName}
</Text>
{details.login ? (
<View style={[styles.mb6, styles.detailsPageSectionContainer, styles.w100]}>
<Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
{this.props.translate(isSMSLogin
? 'common.phoneNumber'
: 'common.email')}
</Text>
<CommunicationsLink
type={isSMSLogin ? CONST.LOGIN_TYPE.PHONE : CONST.LOGIN_TYPE.EMAIL}
value={isSMSLogin ? getPhoneNumber(details) : details.login}
>
<Tooltip text={isSMSLogin ? getPhoneNumber(details) : details.login}>
<Text numberOfLines={1}>
{isSMSLogin
? this.props.toLocalPhone(getPhoneNumber(details))
: details.login}
</Text>
</Tooltip>
</CommunicationsLink>
</View>
) : null}
{pronouns ? (
<View style={[styles.mb6, styles.detailsPageSectionContainer]}>
<Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
{this.props.translate('profilePage.preferredPronouns')}
</Text>
<Text numberOfLines={1}>
{pronouns}
</Text>
</View>
) : null}
{shouldShowLocalTime && details.timezone ? (
<View style={[styles.mb6, styles.detailsPageSectionContainer]}>
<Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
{this.props.translate('detailsPage.localTime')}
</Text>
<Text numberOfLines={1}>
{timezone.format('LT')}
{' '}
{currentTime}
</Text>
</View>
) : null}
</View>
{details.login !== this.props.session.email && (
<MenuItem
title={`${this.props.translate('common.message')}${details.displayName}`}
icon={Expensicons.ChatBubble}
onPress={() => Report.fetchOrCreateChatReport([this.props.session.email, details.login])}
wrapperStyle={styles.breakAll}
shouldShowRightIcon
/>
)}
{details.login ? (
<View style={[styles.mb6, styles.detailsPageSectionContainer, styles.w100]}>
<Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
{props.translate(isSMSLogin
? 'common.phoneNumber'
: 'common.email')}
</Text>
<CommunicationsLink
type={isSMSLogin ? CONST.LOGIN_TYPE.PHONE : CONST.LOGIN_TYPE.EMAIL}
value={isSMSLogin ? getPhoneNumber(details) : details.login}
>
<Tooltip text={isSMSLogin ? getPhoneNumber(details) : details.login}>
<Text numberOfLines={1}>
{isSMSLogin
? props.toLocalPhone(getPhoneNumber(details))
: details.login}
</Text>
</Tooltip>
</CommunicationsLink>
</View>
) : null}
{pronouns ? (
<View style={[styles.mb6, styles.detailsPageSectionContainer]}>
<Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
{props.translate('profilePage.preferredPronouns')}
</Text>
<Text numberOfLines={1}>
{pronouns}
</Text>
</View>
) : null}
{shouldShowLocalTime && details.timezone ? (
<View style={[styles.mb6, styles.detailsPageSectionContainer]}>
<Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
{props.translate('detailsPage.localTime')}
</Text>
<Text numberOfLines={1}>
{timezone.format('LT')}
{' '}
{currentTime}
</Text>
</View>
) : null}
</View>
{details.login !== props.session.email && (
<MenuItem
title={`${props.translate('common.message')}${details.displayName}`}
icon={Expensicons.ChatBubble}
onPress={() => Report.fetchOrCreateChatReport([props.session.email, details.login])}
wrapperStyle={styles.breakAll}
shouldShowRightIcon
/>
)}
</ScrollView>
) : null}
</View>
</ScreenWrapper>
);
};
</ScrollView>
) : null}
</View>
</ScreenWrapper>
);
}
}

DetailsPage.propTypes = propTypes;
DetailsPage.displayName = 'DetailsPage';
Expand Down

0 comments on commit f1769bc

Please sign in to comment.