4c8594d330
* Add linter rules for import order and type member delimiters * Remove unneeded group * Group all app/* imports before the internal imports * Move app/ imports before parent imports * Separate @node_modules imports into a different group * Substitute app paths by aliases * Fix @node_modules import order and add test related modules * Add aliases for types and test, and group import types
591 lines
20 KiB
JavaScript
591 lines
20 KiB
JavaScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import PropTypes from 'prop-types';
|
|
import React, {PureComponent} from 'react';
|
|
import {intlShape} from 'react-intl';
|
|
import {
|
|
Alert,
|
|
ScrollView,
|
|
Text,
|
|
View,
|
|
} from 'react-native';
|
|
import {Navigation} from 'react-native-navigation';
|
|
import {SafeAreaView} from 'react-native-safe-area-context';
|
|
|
|
import {
|
|
goToScreen,
|
|
dismissModal,
|
|
setButtons,
|
|
dismissAllModalsAndPopToRoot,
|
|
} from '@actions/navigation';
|
|
import Config from '@assets/config';
|
|
import ChannelIcon from '@components/channel_icon';
|
|
import ClearButton from '@components/custom_status/clear_button';
|
|
import CustomStatusExpiry from '@components/custom_status/custom_status_expiry';
|
|
import CustomStatusText from '@components/custom_status/custom_status_text';
|
|
import Emoji from '@components/emoji';
|
|
import FormattedText from '@components/formatted_text';
|
|
import FormattedTime from '@components/formatted_time';
|
|
import ProfilePicture from '@components/profile_picture';
|
|
import StatusBar from '@components/status_bar';
|
|
import {BotTag, GuestTag} from '@components/tag';
|
|
import {General} from '@mm-redux/constants';
|
|
import {getUserCurrentTimezone} from '@mm-redux/utils/timezone_utils';
|
|
import {displayUsername} from '@mm-redux/utils/user_utils';
|
|
import {alertErrorWithFallback} from '@utils/general';
|
|
import {t} from '@utils/i18n';
|
|
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
|
|
import {tryOpenURL} from '@utils/url';
|
|
import {isGuest} from '@utils/users';
|
|
|
|
import UserProfileRow from './user_profile_row';
|
|
|
|
export default class UserProfile extends PureComponent {
|
|
static propTypes = {
|
|
actions: PropTypes.shape({
|
|
makeDirectChannel: PropTypes.func.isRequired,
|
|
setChannelDisplayName: PropTypes.func.isRequired,
|
|
loadBot: PropTypes.func.isRequired,
|
|
getRemoteClusterInfo: PropTypes.func.isRequired,
|
|
unsetCustomStatus: PropTypes.func.isRequired,
|
|
}).isRequired,
|
|
componentId: PropTypes.string,
|
|
config: PropTypes.object.isRequired,
|
|
currentDisplayName: PropTypes.string,
|
|
teammateNameDisplay: PropTypes.string,
|
|
theme: PropTypes.object.isRequired,
|
|
user: PropTypes.object.isRequired,
|
|
bot: PropTypes.object,
|
|
isMilitaryTime: PropTypes.bool.isRequired,
|
|
enableTimezone: PropTypes.bool.isRequired,
|
|
isMyUser: PropTypes.bool.isRequired,
|
|
remoteClusterInfo: PropTypes.object,
|
|
customStatus: PropTypes.object,
|
|
isCustomStatusExpired: PropTypes.bool.isRequired,
|
|
isCustomStatusExpirySupported: PropTypes.bool.isRequired,
|
|
};
|
|
|
|
static contextTypes = {
|
|
intl: intlShape.isRequired,
|
|
};
|
|
|
|
rightButton = {
|
|
id: 'edit-profile',
|
|
showAsAction: 'always',
|
|
testID: 'user_profile.edit.button',
|
|
};
|
|
|
|
constructor(props, context) {
|
|
super(props);
|
|
|
|
if (props.isMyUser) {
|
|
this.rightButton.color = props.theme.sidebarHeaderTextColor;
|
|
this.rightButton.text = context.intl.formatMessage({id: 'mobile.routes.user_profile.edit', defaultMessage: 'Edit'});
|
|
|
|
const buttons = {
|
|
rightButtons: [this.rightButton],
|
|
};
|
|
|
|
setButtons(props.componentId, buttons);
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.navigationEventListener = Navigation.events().bindComponent(this);
|
|
|
|
const {user} = this.props;
|
|
if (user) {
|
|
if (user.is_bot) {
|
|
this.props.actions.loadBot(user.id);
|
|
}
|
|
if (user.remote_id) {
|
|
this.props.actions.getRemoteClusterInfo(user.remote_id);
|
|
}
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.navigationEventListener) {
|
|
this.navigationEventListener.remove();
|
|
}
|
|
}
|
|
|
|
navigationButtonPressed({buttonId}) {
|
|
switch (buttonId) {
|
|
case this.rightButton.id:
|
|
this.goToEditProfile();
|
|
break;
|
|
case 'close-settings':
|
|
this.close();
|
|
break;
|
|
}
|
|
}
|
|
|
|
close = async () => {
|
|
dismissModal();
|
|
};
|
|
|
|
getDisplayName = () => {
|
|
const {config, theme, teammateNameDisplay, user} = this.props;
|
|
const style = createStyleSheet(theme);
|
|
|
|
const displayName = displayUsername(user, teammateNameDisplay);
|
|
const showGuest = isGuest(user);
|
|
|
|
if (displayName && (config.ShowFullName === 'true' || user.is_bot || showGuest)) {
|
|
return (
|
|
<View style={style.indicatorContainer}>
|
|
<Text
|
|
style={style.displayName}
|
|
testID='user_profile.display_name'
|
|
>
|
|
{displayName}
|
|
</Text>
|
|
<BotTag
|
|
show={Boolean(user.is_bot)}
|
|
testID='user_profile.bot_tag'
|
|
theme={theme}
|
|
/>
|
|
<GuestTag
|
|
show={showGuest}
|
|
testID='user_profile.guest_tag'
|
|
theme={theme}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
buildDisplayBlock = (property) => {
|
|
const {formatMessage} = this.context.intl;
|
|
const {theme, user} = this.props;
|
|
const style = createStyleSheet(theme);
|
|
let label;
|
|
|
|
if (Object.prototype.hasOwnProperty.call(user, property) && user[property].length > 0) {
|
|
switch (property) {
|
|
case 'first_name':
|
|
label = formatMessage({id: 'user.settings.general.firstName', defaultMessage: 'First Name'});
|
|
break;
|
|
case 'last_name':
|
|
label = formatMessage({id: 'user.settings.general.lastName', defaultMessage: 'Last Name'});
|
|
break;
|
|
case 'email':
|
|
label = formatMessage({id: 'user.settings.general.email', defaultMessage: 'Email'});
|
|
break;
|
|
case 'nickname':
|
|
label = formatMessage({id: 'user.settings.general.nickname', defaultMessage: 'Nickname'});
|
|
break;
|
|
case 'position':
|
|
label = formatMessage({id: 'user.settings.general.position', defaultMessage: 'Position'});
|
|
}
|
|
|
|
return (
|
|
<View testID='user_profile.display_block'>
|
|
<Text
|
|
style={style.header}
|
|
testID={`user_profile.display_block.${property}.label`}
|
|
>
|
|
{label}
|
|
</Text>
|
|
<Text
|
|
style={style.text}
|
|
testID={`user_profile.display_block.${property}.value`}
|
|
>
|
|
{user[property]}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
buildOrganizationBlock = () => {
|
|
const {theme, remoteClusterInfo} = this.props;
|
|
if (!remoteClusterInfo) {
|
|
return null;
|
|
}
|
|
const style = createStyleSheet(theme);
|
|
return (
|
|
<View>
|
|
<FormattedText
|
|
id='mobile.routes.user_profile.organization'
|
|
defaultMessage='ORGANIZATION'
|
|
style={style.header}
|
|
/>
|
|
<View style={style.organizationDataContainer}>
|
|
<ChannelIcon
|
|
isActive={true}
|
|
isArchived={false}
|
|
isBot={false}
|
|
isInfo={true}
|
|
size={16}
|
|
shared={true}
|
|
theme={theme}
|
|
type={General.OPEN_CHANNEL}
|
|
/>
|
|
<Text style={style.text}>{remoteClusterInfo.display_name}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
buildCustomStatusBlock = () => {
|
|
const {formatMessage} = this.context.intl;
|
|
const {customStatus, theme, isMyUser, isCustomStatusExpired, isCustomStatusExpirySupported} = this.props;
|
|
const style = createStyleSheet(theme);
|
|
const isStatusSet = !isCustomStatusExpired && customStatus?.emoji;
|
|
|
|
if (!isStatusSet) {
|
|
return null;
|
|
}
|
|
|
|
const label = formatMessage({id: 'user.settings.general.status', defaultMessage: 'Status'});
|
|
|
|
return (
|
|
<View
|
|
testID='user_profile.custom_status'
|
|
>
|
|
<Text style={style.header}>
|
|
{label}
|
|
{' '}
|
|
{Boolean(customStatus?.duration && isCustomStatusExpirySupported) && (
|
|
<CustomStatusExpiry
|
|
time={customStatus?.expires_at}
|
|
theme={theme}
|
|
textStyles={style.customStatusExpiry}
|
|
showPrefix={true}
|
|
withinBrackets={true}
|
|
/>
|
|
)}
|
|
</Text>
|
|
<View style={style.customStatus}>
|
|
<Text
|
|
style={style.iconContainer}
|
|
testID={`custom_status.emoji.${customStatus.emoji}`}
|
|
>
|
|
<Emoji
|
|
emojiName={customStatus.emoji}
|
|
size={20}
|
|
/>
|
|
</Text>
|
|
<View style={style.customStatusTextContainer}>
|
|
<CustomStatusText
|
|
text={customStatus?.text}
|
|
theme={theme}
|
|
textStyle={style.text}
|
|
/>
|
|
</View>
|
|
{isMyUser && (
|
|
<View style={style.clearButton}>
|
|
<ClearButton
|
|
theme={theme}
|
|
handlePress={this.props.actions.unsetCustomStatus}
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
buildTimezoneBlock = () => {
|
|
const {theme, user, isMilitaryTime} = this.props;
|
|
const style = createStyleSheet(theme);
|
|
|
|
const currentTimezone = getUserCurrentTimezone(user.timezone);
|
|
if (!currentTimezone) {
|
|
return null;
|
|
}
|
|
const nowDate = new Date();
|
|
|
|
return (
|
|
<View>
|
|
<FormattedText
|
|
id='mobile.routes.user_profile.local_time'
|
|
defaultMessage='LOCAL TIME'
|
|
style={style.header}
|
|
testID='user_profile.timezone_block.local_time.label'
|
|
/>
|
|
<Text
|
|
style={style.text}
|
|
testID='user_profile.timezone_block.local_time.value'
|
|
>
|
|
<FormattedTime
|
|
timezone={currentTimezone}
|
|
isMilitaryTime={isMilitaryTime}
|
|
value={nowDate}
|
|
/>
|
|
</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
sendMessage = async () => {
|
|
const {intl} = this.context;
|
|
const {actions, currentDisplayName, teammateNameDisplay, user} = this.props;
|
|
|
|
// save the current channel display name in case it fails
|
|
const currentChannelDisplayName = currentDisplayName;
|
|
|
|
const userDisplayName = displayUsername(user, teammateNameDisplay);
|
|
actions.setChannelDisplayName(userDisplayName);
|
|
|
|
const result = await actions.makeDirectChannel(user.id);
|
|
if (result.error) {
|
|
actions.setChannelDisplayName(currentChannelDisplayName);
|
|
alertErrorWithFallback(
|
|
intl,
|
|
result.error,
|
|
{
|
|
id: t('mobile.open_dm.error'),
|
|
defaultMessage: "We couldn't open a direct message with {displayName}. Please check your connection and try again.",
|
|
},
|
|
{
|
|
displayName: userDisplayName,
|
|
},
|
|
);
|
|
} else {
|
|
dismissAllModalsAndPopToRoot();
|
|
}
|
|
};
|
|
|
|
handleLinkPress = (link) => {
|
|
const username = this.props.user.username;
|
|
const email = this.props.user.email;
|
|
const {intl} = this.context;
|
|
|
|
return () => {
|
|
let hydrated = link.replace(/{email}/, email);
|
|
hydrated = hydrated.replace(/{username}/, username);
|
|
|
|
const onError = () => {
|
|
Alert.alert(
|
|
intl.formatMessage({
|
|
id: 'mobile.link.error.title',
|
|
defaultMessage: 'Error',
|
|
}),
|
|
intl.formatMessage({
|
|
id: 'mobile.link.error.text',
|
|
defaultMessage: 'Unable to open the link.',
|
|
}),
|
|
);
|
|
};
|
|
tryOpenURL(hydrated, onError);
|
|
};
|
|
};
|
|
|
|
goToEditProfile = () => {
|
|
const {user: currentUser} = this.props;
|
|
const {formatMessage} = this.context.intl;
|
|
const commandType = 'Push';
|
|
const screen = 'EditProfile';
|
|
const title = formatMessage({id: 'mobile.routes.edit_profile', defaultMessage: 'Edit Profile'});
|
|
const passProps = {currentUser, commandType};
|
|
|
|
requestAnimationFrame(() => {
|
|
goToScreen(screen, title, passProps);
|
|
});
|
|
};
|
|
|
|
renderAdditionalOptions = () => {
|
|
if (!Config.ExperimentalProfileLinks) {
|
|
return null;
|
|
}
|
|
|
|
const profileLinks = Config.ExperimentalProfileLinks;
|
|
|
|
const additionalOptions = profileLinks.map((l) => {
|
|
let action;
|
|
if (l.type === 'link') {
|
|
action = this.handleLinkPress(l.url);
|
|
}
|
|
|
|
return (
|
|
<UserProfileRow
|
|
key={l.defaultMessage}
|
|
action={action}
|
|
defaultMessage={l.defaultMessage}
|
|
textId={l.textId}
|
|
icon={l.icon}
|
|
theme={this.props.theme}
|
|
iconSize={l.iconSize}
|
|
testID='user_profile.additional_options.action'
|
|
/>
|
|
);
|
|
});
|
|
|
|
return additionalOptions;
|
|
};
|
|
|
|
renderDetailsBlock = (style) => {
|
|
if (this.props.user.is_bot) {
|
|
if (!this.props.bot) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<View style={style.content}>
|
|
<View>
|
|
<Text style={style.header}>{'DESCRIPTION'}</Text>
|
|
<Text style={style.text}>{this.props.bot.description || ''}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={style.content}>
|
|
{this.props.config.ShowFullName === 'true' && this.buildDisplayBlock('first_name')}
|
|
{this.props.config.ShowFullName === 'true' && this.buildDisplayBlock('last_name')}
|
|
{this.props.config.ShowEmailAddress === 'true' && this.buildDisplayBlock('email')}
|
|
{this.props.config.EnableCustomUserStatuses === 'true' && this.buildCustomStatusBlock()}
|
|
{this.buildDisplayBlock('nickname')}
|
|
{this.buildOrganizationBlock()}
|
|
{this.buildDisplayBlock('position')}
|
|
{this.props.enableTimezone && this.buildTimezoneBlock()}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const {theme, user} = this.props;
|
|
const style = createStyleSheet(theme);
|
|
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView
|
|
style={style.container}
|
|
testID='user_profile.screen'
|
|
>
|
|
<StatusBar/>
|
|
<ScrollView
|
|
style={style.scrollView}
|
|
contentContainerStyle={style.contentContainer}
|
|
testID='user_profile.scroll_view'
|
|
>
|
|
<View style={style.top}>
|
|
<ProfilePicture
|
|
userId={user.id}
|
|
size={153}
|
|
iconSize={104}
|
|
statusBorderWidth={6}
|
|
statusSize={36}
|
|
testID='user_profile.profile_picture'
|
|
/>
|
|
{this.getDisplayName()}
|
|
<Text
|
|
style={style.username}
|
|
testID='user_profile.username'
|
|
>
|
|
{`@${user.username}`}
|
|
</Text>
|
|
</View>
|
|
<View style={style.divider}/>
|
|
{this.renderDetailsBlock(style)}
|
|
<View style={style.divider}/>
|
|
<UserProfileRow
|
|
action={this.sendMessage}
|
|
defaultMessage='Send Message'
|
|
icon='send'
|
|
iconSize={24}
|
|
textId={t('mobile.routes.user_profile.send_message')}
|
|
theme={theme}
|
|
testID='user_profile.send_message.action'
|
|
/>
|
|
{this.renderAdditionalOptions()}
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
}
|
|
|
|
const createStyleSheet = makeStyleSheetFromTheme((theme) => {
|
|
return {
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
iconContainer: {
|
|
marginBottom: 3,
|
|
marginRight: 5,
|
|
color: theme.centerChannelColor,
|
|
},
|
|
customStatus: {
|
|
flexDirection: 'row',
|
|
},
|
|
customStatusTextContainer: {
|
|
width: '80%',
|
|
justifyContent: 'center',
|
|
},
|
|
customStatusExpiry: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
textTransform: 'uppercase',
|
|
color: changeOpacity(theme.centerChannelColor, 0.5),
|
|
},
|
|
clearButton: {
|
|
position: 'absolute',
|
|
top: -8,
|
|
right: 0,
|
|
},
|
|
content: {
|
|
marginBottom: 25,
|
|
marginHorizontal: 15,
|
|
},
|
|
displayName: {
|
|
color: theme.centerChannelColor,
|
|
fontSize: 17,
|
|
fontWeight: '600',
|
|
},
|
|
header: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
textTransform: 'uppercase',
|
|
color: changeOpacity(theme.centerChannelColor, 0.5),
|
|
marginTop: 25,
|
|
marginBottom: 10,
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
backgroundColor: theme.centerChannelBg,
|
|
},
|
|
contentContainer: {
|
|
paddingBottom: 48,
|
|
},
|
|
text: {
|
|
fontSize: 15,
|
|
color: theme.centerChannelColor,
|
|
},
|
|
top: {
|
|
padding: 25,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
username: {
|
|
marginTop: 15,
|
|
color: theme.centerChannelColor,
|
|
fontSize: 15,
|
|
},
|
|
indicatorContainer: {
|
|
marginTop: 15,
|
|
flexDirection: 'row',
|
|
},
|
|
divider: {
|
|
height: 1,
|
|
marginLeft: 16,
|
|
marginRight: 22,
|
|
backgroundColor: '#EBEBEC',
|
|
},
|
|
organizationDataContainer: {
|
|
alignItems: 'center',
|
|
flexDirection: 'row',
|
|
},
|
|
};
|
|
});
|