Unverified Commit 4abd0d87 authored by Joram Wilander's avatar Joram Wilander Committed by GitHub
Browse files

Scroll to top when paging in custom emoji management (#698)

parent 97fb8a05
......@@ -2,11 +2,10 @@
// See License.txt for license information.
import React from 'react';
import PropTypes from 'prop-types';
import {Route, Switch} from 'react-router-dom';
import Pluggable from 'plugins/pluggable';
import TeamStore from 'stores/team_store.jsx';
import UserStore from 'stores/user_store.jsx';
import AnnouncementBar from 'components/announcement_bar';
import Integrations from 'components/integrations/components/integrations.jsx';
import Emoji from 'components/emoji';
......@@ -39,69 +38,56 @@ const BackstageRoute = ({component: Component, extraProps, ...rest}) => ( //esli
);
export default class BackstageController extends React.Component {
constructor(props) {
super(props);
static propTypes = {
this.onTeamChange = this.onTeamChange.bind(this);
this.onUserChange = this.onUserChange.bind(this);
/**
* Current user.
*/
user: PropTypes.object,
const team = TeamStore.getCurrent();
const user = UserStore.getCurrentUser();
/**
* Current team.
*/
team: PropTypes.object,
this.state = {
user,
team,
isAdmin: UserStore.isSystemAdminForCurrentUser(user) ||
TeamStore.isTeamAdminForCurrentTeam(team)
};
}
componentDidMount() {
TeamStore.addChangeListener(this.onTeamChange);
UserStore.addChangeListener(this.onUserChange);
}
componentWillUnmount() {
TeamStore.removeChangeListener(this.onTeamChange);
UserStore.removeChangeListener(this.onUserChange);
/**
* Set to indicate user is system admin or a team admin for current team.
*/
isAdmin: PropTypes.bool
}
onUserChange() {
const user = UserStore.getCurrentUser();
this.setState({
user
});
scrollToTop = () => {
if (this.listRef) {
this.listRef.scrollTop = 0;
}
}
onTeamChange() {
const team = TeamStore.getCurrent();
this.setState({
team,
isAdmin: UserStore.isSystemAdminForCurrentUser(this.state.user) ||
TeamStore.isTeamAdminForCurrentTeam(team)
});
setListRef = (ref) => {
this.listRef = ref;
}
render() {
if (this.state.team == null || this.state.user == null) {
if (this.props.team == null || this.props.user == null) {
return <div/>;
}
const extraProps = {
team: this.state.team,
user: this.state.user,
isAdmin: this.state.isAdmin
team: this.props.team,
user: this.props.user,
isAdmin: this.props.isAdmin,
scrollToTop: this.scrollToTop
};
return (
<div className='backstage'>
<AnnouncementBar/>
<BackstageNavbar team={this.state.team}/>
<BackstageNavbar team={this.props.team}/>
<Pluggable pluggableName='Root'/>
<div className='backstage-body'>
<div
className='backstage-body'
ref={this.setListRef}
>
<BackstageSidebar
team={this.state.team}
user={this.state.user}
team={this.props.team}
user={this.props.user}
/>
<Switch>
<BackstageRoute
......
// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
import {getCurrentTeam, getCurrentTeamMembership} from 'mattermost-redux/selectors/entities/teams';
import {isSystemAdmin, isAdmin as isTeamAdmin} from 'utils/utils.jsx';
import BackstageController from './backstage_controller.jsx';
function mapStateToProps(state) {
const user = getCurrentUser(state);
const team = getCurrentTeam(state);
const teamMember = getCurrentTeamMembership(state);
let isAdmin = false;
if (user) {
isAdmin = isSystemAdmin(user.roles);
}
if (teamMember) {
isAdmin = isAdmin || isTeamAdmin(teamMember.roles);
}
return {
user,
team,
isAdmin
};
}
export default withRouter(connect(mapStateToProps)(BackstageController));
......@@ -24,6 +24,11 @@ export default class EmojiList extends React.Component {
*/
emojiIds: PropTypes.arrayOf(PropTypes.string).isRequired,
/**
* Function to scroll list to top.
*/
scrollToTop: PropTypes.func.isRequired,
actions: PropTypes.shape({
/**
......@@ -73,6 +78,8 @@ export default class EmojiList extends React.Component {
if (data && data.length < EMOJI_PER_PAGE) {
this.setState({missingPages: false});
}
this.props.scrollToTop();
});
}
......@@ -82,6 +89,7 @@ export default class EmojiList extends React.Component {
}
this.setState({page: this.state.page - 1, nextLoading: false});
this.props.scrollToTop();
}
onSearchChange = (e) => {
......
......@@ -26,7 +26,12 @@ export default class EmojiPage extends React.Component {
/**
* Title of the app or site.
*/
siteName: PropTypes.string
siteName: PropTypes.string,
/**
* Function to scroll list to top.
*/
scrollToTop: PropTypes.func.isRequired
}
static defaultProps = {
......@@ -73,7 +78,7 @@ export default class EmojiPage extends React.Component {
/>
</button>
</Link>
<EmojiList/>
<EmojiList scrollToTop={this.props.scrollToTop}/>
</div>
</div>
);
......
......@@ -46,7 +46,7 @@ import Sidebar from 'components/sidebar';
import PermalinkView from 'components/permalink_view';
import ChannelIdentifierRouter from 'components/channel_identifier_router.jsx';
import {makeAsyncComponent} from 'components/async_load';
import loadBackstageController from 'bundle-loader?lazy!components/backstage/backstage_controller';
import loadBackstageController from 'bundle-loader?lazy!components/backstage';
const BackstageController = makeAsyncComponent(loadBackstageController);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment