scinote-web/app/javascript/packs/shared/navigation/components/TeamSwitch.jsx

109 lines
2.8 KiB
React
Raw Normal View History

2017-08-02 23:27:05 +08:00
import React, { Component } from "react";
2017-08-03 22:03:15 +08:00
import { connect } from "react-redux";
2017-08-02 23:27:05 +08:00
import PropTypes from "prop-types";
2017-08-07 15:31:24 +08:00
import { FormattedMessage } from "react-intl";
2017-08-09 18:46:04 +08:00
import { NavDropdown, MenuItem, Glyphicon } from "react-bootstrap";
import styled from "styled-components";
import _ from "lodash";
2017-08-02 23:27:05 +08:00
2017-08-09 18:46:04 +08:00
import { BORDER_GRAY_COLOR } from "../../constants/colors";
2017-08-03 22:03:15 +08:00
import { setCurrentUser, changeTeam } from "../../actions/TeamsActions";
2017-08-09 18:46:04 +08:00
import { getTeamsList } from "../../actions/TeamsActions";
const StyledNavDropdown = styled(NavDropdown)`
border-left: 1px solid ${BORDER_GRAY_COLOR};
border-right: 1px solid ${BORDER_GRAY_COLOR};
`;
2017-08-03 22:03:15 +08:00
2017-08-02 23:27:05 +08:00
class TeamSwitch extends Component {
constructor(props) {
super(props);
2017-08-03 22:03:15 +08:00
this.displayTeams = this.displayTeams.bind(this);
}
2017-08-09 18:46:04 +08:00
componentDidMount() {
this.props.getTeamsList();
}
2017-08-07 15:31:24 +08:00
changeTeam(teamId) {
this.props.changeTeam(teamId);
2017-08-03 22:03:15 +08:00
}
2017-08-02 23:27:05 +08:00
2017-08-03 22:03:15 +08:00
displayTeams() {
2017-08-09 18:46:04 +08:00
if (!_.isEmpty(this.props.all_teams)) {
return this.props.all_teams.filter(team => !team.current_team).map(team =>
<MenuItem onSelect={() => this.changeTeam(team.id)} key={team.id}>
{team.name}
</MenuItem>
);
}
2017-08-02 23:27:05 +08:00
}
2017-08-07 15:31:24 +08:00
newTeamLink() {
return (
<MenuItem href="/users/settings/teams/new" key="addNewTeam">
2017-08-09 18:46:04 +08:00
<Glyphicon glyph="plus" />&nbsp;
2017-08-07 15:31:24 +08:00
<FormattedMessage id="global_team_switch.new_team" />
</MenuItem>
);
}
2017-08-02 23:27:05 +08:00
render() {
return (
2017-08-09 18:46:04 +08:00
<StyledNavDropdown
2017-08-07 15:31:24 +08:00
noCaret
2017-08-02 23:27:05 +08:00
eventKey={this.props.eventKey}
2017-08-09 18:46:04 +08:00
title={
<span>
<i className="fa fa-users" />&nbsp;{this.props.current_team.name}
</span>
}
2017-08-02 23:27:05 +08:00
id="team-switch"
>
2017-08-03 22:03:15 +08:00
{this.displayTeams()}
2017-08-09 18:46:04 +08:00
<MenuItem key="divider" divider />
2017-08-07 15:31:24 +08:00
{this.newTeamLink()}
2017-08-09 18:46:04 +08:00
</StyledNavDropdown>
2017-08-02 23:27:05 +08:00
);
}
}
TeamSwitch.propTypes = {
2017-08-09 18:46:04 +08:00
getTeamsList: PropTypes.func.isRequired,
2017-08-03 22:03:15 +08:00
eventKey: PropTypes.number.isRequired,
2017-08-07 15:31:24 +08:00
changeTeam: PropTypes.func.isRequired,
2017-08-03 22:03:15 +08:00
all_teams: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
current_team: PropTypes.bool.isRequired
2017-08-09 18:46:04 +08:00
}).isRequired
2017-08-03 22:03:15 +08:00
),
current_team: PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
current_team: PropTypes.bool.isRequired
2017-08-09 18:46:04 +08:00
}).isRequired
2017-08-03 22:03:15 +08:00
};
// Map the states from store to component
2017-08-09 18:46:04 +08:00
const mapStateToProps = ({ all_teams, current_team }) => ({
current_team,
all_teams: _.values(all_teams)
});
2017-08-03 22:03:15 +08:00
// Map the fetch activity action to component
const mapDispatchToProps = dispatch => ({
setCurrentUser() {
dispatch(setCurrentUser());
},
2017-08-09 18:46:04 +08:00
changeTeam(teamId) {
dispatch(changeTeam(teamId));
},
getTeamsList() {
dispatch(getTeamsList());
2017-08-03 22:03:15 +08:00
}
});
2017-08-02 23:27:05 +08:00
2017-08-03 22:03:15 +08:00
export default connect(mapStateToProps, mapDispatchToProps)(TeamSwitch);