toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[MM-13879] Add Edit profile button to RHS menu and own profile pop-over (#2832)

Browse source 
* Add Edit Profile button to right panel menu

* Make user info of right panel menu opens the users own profile

* Add an Edit button of the users own profile

* handle transitions

* Add commandType to propTypes

* Update test codes

* add unit tests for user_profile

* Assign commandType manually

* Remove async, set delay to 0
This commit is contained in:
Woolim Cho 2019-06-05 17:11:42 +09:00 committed by Saturnino Abril
parent 1d215deea6
commit b81cd49fb4
7 changed files with 170 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/components/sidebars/settings/settings_sidebar.js
View file

@ -153,11 +153,12 @@ export default class SettingsDrawer extends PureComponent {
goToEditProfile = preventDoubleTap(() => {
const {currentUser} = this.props;
const {formatMessage} = this.context.intl;
const commandType = 'ShowModal';
this.openModal(
'EditProfile',
formatMessage({id: 'mobile.routes.edit_profile', defaultMessage: 'Edit Profile'}),
{currentUser}
{currentUser, commandType}
);
});
@ -179,6 +180,17 @@ export default class SettingsDrawer extends PureComponent {
);
});
goToUserProfile = preventDoubleTap(() => {
const userId = this.props.currentUser.id;
const {formatMessage} = this.context.intl;
this.openModal(
'UserProfile',
formatMessage({id: 'mobile.routes.user_profile', defaultMessage: 'Profile'}),
{userId, fromSettings: true}
);
});
goToSettings = preventDoubleTap(() => {
const {intl} = this.context;
@ -258,7 +270,7 @@ export default class SettingsDrawer extends PureComponent {
contentContainerStyle={style.wrapper}
>
<UserInfo
onPress={this.goToEditProfile}
onPress={this.goToUserProfile}
user={currentUser}
/>
<View style={style.block}>
@ -293,6 +305,15 @@ export default class SettingsDrawer extends PureComponent {
</View>
<View style={style.separator}/>
<View style={style.block}>
<DrawerItem
defaultMessage='Edit Profile'
i18nId='mobile.routes.edit_profile'
iconName='ios-person'
iconType='ion'
onPress={this.goToEditProfile}
separator={true}
theme={theme}
/>
<DrawerItem
defaultMessage='Settings'
i18nId='mobile.routes.settings'

6
app/screens/edit_profile/__snapshots__/edit_profile.test.js.snap
View file

@ -34,12 +34,6 @@ exports[`edit_profile should match snapshot 1`] = `
"calls": Array [
Array [
Object {
"leftButtons": Array [
Object {
"id": "close-settings",
"title": undefined,
},
],
"rightButtons": Array [
Object {
"disabled": true,

18
app/screens/edit_profile/edit_profile.js
View file

@ -92,16 +92,13 @@ export default class EditProfile extends PureComponent {
currentUser: PropTypes.object.isRequired,
navigator: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
commandType: PropTypes.string.isRequired,
};
static contextTypes = {
intl: intlShape,
};
leftButton = {
id: 'close-settings',
};
rightButton = {
id: 'update-profile',
disabled: true,
@ -113,11 +110,8 @@ export default class EditProfile extends PureComponent {
const {email, first_name: firstName, last_name: lastName, nickname, position, username} = props.currentUser;
const buttons = {
leftButtons: [this.leftButton],
rightButtons: [this.rightButton],
};
this.leftButton.title = context.intl.formatMessage({id: t('mobile.account.settings.cancel'), defaultMessage: 'Cancel'});
this.rightButton.title = context.intl.formatMessage({id: t('mobile.account.settings.save'), defaultMessage: 'Save'});
props.navigator.setOnNavigatorEvent(this.onNavigatorEvent);
@ -164,9 +158,13 @@ export default class EditProfile extends PureComponent {
};
close = () => {
this.props.navigator.dismissModal({
animationType: 'slide-down',
});
if (this.props.commandType === 'Push') {
this.props.navigator.pop();
} else {
this.props.navigator.dismissModal({
animationType: 'slide-down',
});
}
};
emitCanUpdateAccount = (enabled) => {

1
app/screens/edit_profile/edit_profile.test.js
View file

@ -45,6 +45,7 @@ describe('edit_profile', () => {
nickname: 'Dragon',
position: 'position',
},
commandType: 'ShowModal',
};
test('should match snapshot', async () => {

2
app/screens/user_profile/index.js
View file

@ -12,6 +12,7 @@ import {getConfig} from 'mattermost-redux/selectors/entities/general';
import Preferences from 'mattermost-redux/constants/preferences';
import {loadBot} from 'mattermost-redux/actions/bots';
import {getBotAccounts} from 'mattermost-redux/selectors/entities/bots';
import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
import {isTimezoneEnabled} from 'app/utils/timezone';
@ -33,6 +34,7 @@ function mapStateToProps(state, ownProps) {
enableTimezone,
militaryTime,
theme: getTheme(state),
isMyUser: getCurrentUserId(state) === ownProps.userId,
};
}

67
app/screens/user_profile/user_profile.js
View file

@ -42,12 +42,34 @@ export default class UserProfile extends PureComponent {
bot: PropTypes.object,
militaryTime: PropTypes.bool.isRequired,
enableTimezone: PropTypes.bool.isRequired,
isMyUser: PropTypes.bool.isRequired,
fromSettings: PropTypes.bool,
};
static contextTypes = {
intl: intlShape.isRequired,
};
rightButton = {
id: 'edit-profile',
showAsAction: 'always',
};
constructor(props, context) {
super(props);
if (props.isMyUser) {
this.rightButton.title = context.intl.formatMessage({id: 'mobile.routes.user_profile.edit', defaultMessage: 'Edit'});
const buttons = {
rightButtons: [this.rightButton],
};
props.navigator.setOnNavigatorEvent(this.onNavigatorEvent);
props.navigator.setButtons(buttons);
}
}
componentWillReceiveProps(nextProps) {
if (this.props.theme !== nextProps.theme) {
setNavigatorStyles(this.props.navigator, nextProps.theme);
@ -63,6 +85,13 @@ export default class UserProfile extends PureComponent {
close = () => {
const {navigator, theme} = this.props;
if (this.props.fromSettings) {
navigator.dismissModal({
animationType: 'slide-down',
});
return;
}
navigator.resetTo({
screen: 'Channel',
animated: true,
@ -187,6 +216,44 @@ export default class UserProfile extends PureComponent {
};
};
goToEditProfile = () => {
const {user: currentUser} = this.props;
const {formatMessage} = this.context.intl;
const commandType = 'Push';
const {navigator, theme} = this.props;
const options = {
screen: 'EditProfile',
title: formatMessage({id: 'mobile.routes.edit_profile', defaultMessage: 'Edit Profile'}),
animated: true,
backButtonTitle: '',
passProps: {currentUser, commandType},
navigatorStyle: {
navBarTextColor: theme.sidebarHeaderTextColor,
navBarBackgroundColor: theme.sidebarHeaderBg,
navBarButtonColor: theme.sidebarHeaderTextColor,
screenBackgroundColor: theme.centerChannelBg,
},
};
requestAnimationFrame(() => {
navigator.push(options);
});
};
onNavigatorEvent = (event) => {
if (event.type === 'NavBarButtonPress') {
switch (event.id) {
case this.rightButton.id:
this.goToEditProfile();
break;
case 'close-settings':
this.close();
break;
}
}
};
renderAdditionalOptions = () => {
if (!Config.ExperimentalProfileLinks) {
return null;

69
app/screens/user_profile/user_profile.test.js
View file

@ -31,11 +31,14 @@ describe('user_profile', () => {
teammateNameDisplay: 'username',
navigator: {
resetTo: jest.fn(),
push: jest.fn(),
dismissModal: jest.fn(),
},
teams: [],
theme: Preferences.THEMES.default,
enableTimezone: false,
militaryTime: false,
isMyUser: false,
};
const user = {
@ -84,4 +87,70 @@ describe('user_profile', () => {
/>
)).toEqual(true);
});
test('should push EditProfile', async () => {
const props = {
...baseProps,
navigator: {
push: jest.fn(),
},
};
const wrapper = shallow(
<UserProfile
{...props}
user={user}
/>,
{context: {intl: {formatMessage: jest.fn()}}},
);
wrapper.instance().goToEditProfile();
setTimeout(() => {
expect(props.navigator.push).toHaveBeenCalledTimes(1);
}, 16);
});
test('should call goToEditProfile', () => {
const props = {
...baseProps,
navigator: {
push: jest.fn(),
},
};
const wrapper = shallow(
<UserProfile
{...props}
user={user}
/>,
{context: {intl: {formatMessage: jest.fn()}}},
);
const event = {type: 'NavBarButtonPress', id: wrapper.instance().rightButton.id};
wrapper.instance().onNavigatorEvent(event);
setTimeout(() => {
expect(props.navigator.push).toHaveBeenCalledTimes(1);
}, 0);
});
test('should close', async () => {
const props = {...baseProps, fromSettings: true};
const wrapper = shallow(
<UserProfile
{...props}
user={user}
/>,
{context: {intl: {formatMessage: jest.fn()}}},
);
const event = {type: 'NavBarButtonPress', id: 'close-settings'};
wrapper.instance().onNavigatorEvent(event);
expect(props.navigator.dismissModal).toHaveBeenCalledTimes(1);
props.fromSettings = false;
wrapper.setProps({...props});
wrapper.instance().onNavigatorEvent(event);
expect(props.navigator.resetTo).toHaveBeenCalledTimes(1);
});
});