diff options
Diffstat (limited to 'webapp/components/analytics/team_analytics')
-rw-r--r-- | webapp/components/analytics/team_analytics/index.js | 10 | ||||
-rw-r--r-- | webapp/components/analytics/team_analytics/team_analytics.jsx | 89 |
2 files changed, 48 insertions, 51 deletions
diff --git a/webapp/components/analytics/team_analytics/index.js b/webapp/components/analytics/team_analytics/index.js index 270967a1b..0620a8fdb 100644 --- a/webapp/components/analytics/team_analytics/index.js +++ b/webapp/components/analytics/team_analytics/index.js @@ -5,10 +5,20 @@ import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import {getTeams} from 'mattermost-redux/actions/teams'; +import {getTeamsList} from 'mattermost-redux/selectors/entities/teams'; +import BrowserStore from 'stores/browser_store.jsx'; + import TeamAnalytics from './team_analytics.jsx'; +const LAST_ANALYTICS_TEAM = 'last_analytics_team'; + function mapStateToProps(state, ownProps) { + const teams = getTeamsList(state); + const teamId = BrowserStore.getGlobalItem(LAST_ANALYTICS_TEAM, teams.length > 0 ? teams[0].id : ''); + return { + initialTeam: state.entities.teams.teams[teamId], + teams, ...ownProps }; } diff --git a/webapp/components/analytics/team_analytics/team_analytics.jsx b/webapp/components/analytics/team_analytics/team_analytics.jsx index eff19a309..6591d293a 100644 --- a/webapp/components/analytics/team_analytics/team_analytics.jsx +++ b/webapp/components/analytics/team_analytics/team_analytics.jsx @@ -1,21 +1,18 @@ -import PropTypes from 'prop-types'; - // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import React from 'react'; +import PropTypes from 'prop-types'; import {FormattedDate, FormattedMessage, FormattedHTMLMessage} from 'react-intl'; import Banner from 'components/admin_console/banner.jsx'; import LoadingScreen from 'components/loading_screen.jsx'; -import AdminStore from 'stores/admin_store.jsx'; import AnalyticsStore from 'stores/analytics_store.jsx'; import BrowserStore from 'stores/browser_store.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import {StatTypes} from 'utils/constants.jsx'; -import {convertTeamMapToList} from 'utils/team_utils.jsx'; import LineChart from 'components/analytics/line_chart.jsx'; import StatisticCount from 'components/analytics/statistic_count.jsx'; @@ -26,7 +23,22 @@ const LAST_ANALYTICS_TEAM = 'last_analytics_team'; export default class TeamAnalytics extends React.Component { static propTypes = { + + /* + * Array of team objects + */ + teams: PropTypes.arrayOf(PropTypes.object).isRequired, + + /* + * Initial team to load analytics for + */ + initialTeam: PropTypes.object, + actions: PropTypes.shape({ + + /* + * Function to get teams + */ getTeams: PropTypes.func.isRequired }).isRequired } @@ -34,37 +46,27 @@ export default class TeamAnalytics extends React.Component { constructor(props) { super(props); - this.onChange = this.onChange.bind(this); - this.onAllTeamsChange = this.onAllTeamsChange.bind(this); - this.handleTeamChange = this.handleTeamChange.bind(this); - - const teams = convertTeamMapToList(AdminStore.getAllTeams()); - const teamId = BrowserStore.getGlobalItem(LAST_ANALYTICS_TEAM, teams.length > 0 ? teams[0].id : ''); + const teamId = props.initialTeam ? props.initialTeam.id : ''; this.state = { - teams, - teamId, - team: AdminStore.getTeam(teamId), + team: props.initialTeam, stats: AnalyticsStore.getAllTeam(teamId) }; } componentDidMount() { AnalyticsStore.addChangeListener(this.onChange); - AdminStore.addAllTeamsChangeListener(this.onAllTeamsChange); - if (this.state.teamId !== '') { - this.getData(this.state.teamId); + if (this.state.team) { + this.getData(this.state.team.id); } - if (this.state.teams.length === 0) { - this.props.actions.getTeams(0, 1000); - } + this.props.actions.getTeams(0, 1000); } componentWillUpdate(nextProps, nextState) { - if (nextState.teamId !== this.state.teamId) { - this.getData(nextState.teamId); + if (nextState.team && nextState.team !== this.state.team) { + this.getData(nextState.team.id); } } @@ -77,53 +79,38 @@ export default class TeamAnalytics extends React.Component { componentWillUnmount() { AnalyticsStore.removeChangeListener(this.onChange); - AdminStore.removeAllTeamsChangeListener(this.onAllTeamsChange); } - onChange() { + onChange = () => { + const teamId = this.state.team ? this.state.team.id : ''; this.setState({ - stats: AnalyticsStore.getAllTeam(this.state.teamId) + stats: AnalyticsStore.getAllTeam(teamId) }); } - onAllTeamsChange() { - const teams = convertTeamMapToList(AdminStore.getAllTeams()); - - if (teams.length > 0) { - if (this.state.teamId) { - this.setState({ - team: AdminStore.getTeam(this.state.teamId) - }); - } else { - this.setState({ - teamId: teams[0].id, - team: teams[0] - }); - } - } + handleTeamChange = (e) => { + const teamId = e.target.value; - this.setState({ - teams + let team; + this.props.teams.forEach((t) => { + if (t.id === teamId) { + team = t; + } }); - } - - handleTeamChange(e) { - const teamId = e.target.value; this.setState({ - teamId, - team: AdminStore.getTeam(teamId) + team }); BrowserStore.setGlobalItem(LAST_ANALYTICS_TEAM, teamId); } render() { - if (this.state.teams.length === 0 || !this.state.team || !this.state.stats) { + if (this.props.teams.length === 0 || !this.state.team || !this.state.stats) { return <LoadingScreen/>; } - if (this.state.teamId === '') { + if (this.state.team == null) { return ( <Banner description={ @@ -217,7 +204,7 @@ export default class TeamAnalytics extends React.Component { const recentActiveUsers = formatRecentUsersData(stats[StatTypes.RECENTLY_ACTIVE_USERS]); const newlyCreatedUsers = formatNewUsersData(stats[StatTypes.NEWLY_CREATED_USERS]); - const teams = this.state.teams.map((team) => { + const teams = this.props.teams.map((team) => { return ( <option key={team.id} @@ -246,7 +233,7 @@ export default class TeamAnalytics extends React.Component { <select className='form-control team-statistics__team-filter__dropdown' onChange={this.handleTeamChange} - value={this.state.teamId} + value={this.state.team.id} > {teams} </select> |