[MM-16138] Update settings related screens (#2918)

* Update screens

* Update login tests

* Remove done

* Fix failing tests

* Update screens and components

* Check styles fix

* Update tests

* Prevent setState call after component unmounts

* Add empty setButtons func to dummy navigator

* Remove platform check

* Remove Platform import

* Update react-native-navigation version

* Add separate showModalOverCurrentContext function

* check-style fixes

* Remove overriding of AppDelegate's window

* Fix modal over current context animation

* Add showSearchModal navigation action

* Check-style fix

* Address review comments

* Update SettingsSidebar and children

* Update EditProfile screen

* Update SettingsSidebar

* Keep track of latest componentId to appear

* Track componentId in state to use in navigation actions

* Update FlaggedPosts and children

* Update RecentMentions

* Update Settings

* Store componentIds in ephemeral store

* Update AttachmentButton

* Remove unnecessary dismissModal

* Fix typo

* Upate NotificationSettings

* Update NotificationSettingsAutoResponder

* Update NotificationSettingsMentions

* Update NotificationSettingsMobile

* Update CreateChannel and children

* Update MoreChannels

* Update ChannelPeek and children

* Update ChannelNavBar and children

* Update ChannelPostList and children

* Update ChannelInfo and children

* Update ChannelAddMembers

* Update ChannelMembers

* Update EditChannel

* Fix setting of top bar buttons

* Update Channel screen and children

* Update PinnedPosts

* Update LongPost

* Update PostOptions

* Update PostTextboxBase

* Update EditPost

* Check-styles fix

* Update DisplaySettings

* Update Timezone

* Update SelectTimezone

* Remove navigationComponentId
This commit is contained in:
Miguel Alatzar 2019-06-28 09:03:18 -07:00 committed by Harrison Healey
parent c278614ca1
commit 30375aa4a2
7 changed files with 57 additions and 67 deletions

View file

@ -18,8 +18,10 @@ import ClockDisplay from 'app/screens/clock_display';
export default class DisplaySettings extends PureComponent {
static propTypes = {
actions: PropTypes.shape({
goToScreen: PropTypes.func.isRequired,
}).isRequired,
componentId: PropTypes.string,
navigator: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
enableTheme: PropTypes.bool.isRequired,
enableTimezone: PropTypes.bool.isRequired,
@ -38,22 +40,13 @@ export default class DisplaySettings extends PureComponent {
};
goToClockDisplaySettings = preventDoubleTap(() => {
const {navigator, theme} = this.props;
const {actions} = this.props;
const {intl} = this.context;
if (Platform.OS === 'ios') {
navigator.push({
screen: 'ClockDisplay',
title: intl.formatMessage({id: 'user.settings.display.clockDisplay', defaultMessage: 'Clock Display'}),
animated: true,
backButtonTitle: '',
navigatorStyle: {
navBarTextColor: theme.sidebarHeaderTextColor,
navBarBackgroundColor: theme.sidebarHeaderBg,
navBarButtonColor: theme.sidebarHeaderTextColor,
screenBackgroundColor: theme.centerChannelBg,
},
});
const screen = 'ClockDisplay';
const title = intl.formatMessage({id: 'user.settings.display.clockDisplay', defaultMessage: 'Clock Display'});
actions.goToScreen(screen, title);
return;
}
@ -61,39 +54,21 @@ export default class DisplaySettings extends PureComponent {
});
goToTimezoneSettings = preventDoubleTap(() => {
const {navigator, theme} = this.props;
const {actions} = this.props;
const {intl} = this.context;
const screen = 'TimezoneSettings';
const title = intl.formatMessage({id: 'mobile.advanced_settings.timezone', defaultMessage: 'Timezone'});
navigator.push({
screen: 'TimezoneSettings',
title: intl.formatMessage({id: 'mobile.advanced_settings.timezone', defaultMessage: 'Timezone'}),
animated: true,
backButtonTitle: '',
navigatorStyle: {
navBarTextColor: theme.sidebarHeaderTextColor,
navBarBackgroundColor: theme.sidebarHeaderBg,
navBarButtonColor: theme.sidebarHeaderTextColor,
screenBackgroundColor: theme.centerChannelBg,
},
});
actions.goToScreen(screen, title);
});
goToThemeSettings = preventDoubleTap(() => {
const {navigator, theme} = this.props;
const {actions} = this.props;
const {intl} = this.context;
const screen = 'ThemeSettings';
const title = intl.formatMessage({id: 'mobile.display_settings.theme', defaultMessage: 'Theme'});
navigator.push({
screen: 'ThemeSettings',
title: intl.formatMessage({id: 'mobile.display_settings.theme', defaultMessage: 'Theme'}),
animated: true,
backButtonTitle: '',
navigatorStyle: {
navBarTextColor: theme.sidebarHeaderTextColor,
navBarBackgroundColor: theme.sidebarHeaderBg,
navBarButtonColor: theme.sidebarHeaderTextColor,
screenBackgroundColor: theme.centerChannelBg,
},
});
actions.goToScreen(screen, title);
});
render() {

View file

@ -12,12 +12,12 @@ jest.mock('react-intl');
describe('DisplaySettings', () => {
const baseProps = {
actions: {
goToScreen: jest.fn(),
},
theme: Preferences.THEMES.default,
enableTheme: false,
enableTimezone: false,
navigator: {
push: jest.fn(),
},
componentId: 'component-id',
};

View file

@ -1,15 +1,17 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {isTimezoneEnabled} from 'mattermost-redux/selectors/entities/timezone';
import {goToScreen} from 'app/actions/navigation';
import {getAllowedThemes} from 'app/selectors/theme';
import {isThemeSwitchingEnabled} from 'app/utils/theme';
import DisplaySettings from './display_settings';
import {getAllowedThemes} from 'app/selectors/theme';
function mapStateToProps(state) {
const enableTimezone = isTimezoneEnabled(state);
@ -22,4 +24,12 @@ function mapStateToProps(state) {
};
}
export default connect(mapStateToProps)(DisplaySettings);
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
goToScreen,
}, dispatch),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(DisplaySettings);

View file

@ -10,6 +10,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {getUserTimezone} from 'mattermost-redux/selectors/entities/timezone';
import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
import {goToScreen} from 'app/actions/navigation';
import {updateUser} from 'app/actions/views/edit_profile';
import Timezone from './timezone';
@ -32,6 +33,7 @@ function mapDispatchToProps(dispatch) {
actions: bindActionCreators({
getSupportedTimezones,
updateUser,
goToScreen,
}, dispatch),
};
}

View file

@ -1,11 +1,14 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {getSupportedTimezones} from 'mattermost-redux/selectors/entities/general';
import {popTopScreen} from 'app/actions/navigation';
import SelectTimezone from './select_timezone';
function mapStateToProps(state, props) {
@ -26,4 +29,12 @@ function mapStateToProps(state, props) {
};
}
export default connect(mapStateToProps)(SelectTimezone);
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
popTopScreen,
}, dispatch),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(SelectTimezone);

View file

@ -23,10 +23,12 @@ const VIEWABILITY_CONFIG = ListTypes.VISIBILITY_CONFIG_DEFAULTS;
export default class Timezone extends PureComponent {
static propTypes = {
actions: PropTypes.shape({
popTopScreen: PropTypes.func.isRequired,
}).isRequired,
selectedTimezone: PropTypes.string.isRequired,
initialScrollIndex: PropTypes.number.isRequired,
timezones: PropTypes.array.isRequired,
navigator: PropTypes.object,
onBack: PropTypes.func.isRequired,
theme: PropTypes.object.isRequired,
};
@ -59,7 +61,7 @@ export default class Timezone extends PureComponent {
timezoneSelected = (timezone) => {
this.props.onBack(timezone);
this.props.navigator.pop();
this.props.actions.popTopScreen();
};
handleTextChanged = (value) => {

View file

@ -21,7 +21,6 @@ import {getDeviceTimezone} from 'app/utils/timezone';
export default class Timezone extends PureComponent {
static propTypes = {
navigator: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
timezones: PropTypes.array.isRequired,
user: PropTypes.object.isRequired,
@ -116,29 +115,20 @@ export default class Timezone extends PureComponent {
goToSelectTimezone = () => {
const {
actions,
userTimezone: {manualTimezone},
navigator,
theme,
} = this.props;
const {intl} = this.context;
const screen = 'SelectTimezone';
const title = intl.formatMessage({id: 'mobile.timezone_settings.select', defaultMessage: 'Select Timezone'});
const passProps = {
selectedTimezone: manualTimezone,
onBack: this.updateManualTimezone,
};
this.goingBack = false;
navigator.push({
backButtonTitle: '',
screen: 'SelectTimezone',
title: intl.formatMessage({id: 'mobile.timezone_settings.select', defaultMessage: 'Select Timezone'}),
animated: true,
navigatorStyle: {
navBarTextColor: theme.sidebarHeaderTextColor,
navBarBackgroundColor: theme.sidebarHeaderBg,
navBarButtonColor: theme.sidebarHeaderTextColor,
screenBackgroundColor: theme.centerChannelBg,
},
passProps: {
selectedTimezone: manualTimezone,
onBack: this.updateManualTimezone,
},
});
actions.goToScreen(screen, title, passProps);
};
render() {