From afdef124c8b76292ac3b8431a0c6137457d998e0 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Sat, 21 Nov 2015 08:53:45 -0500 Subject: Converted TeamMembers (now called TeamMembersModal) to React-Bootstrap --- web/react/components/member_list_team.jsx | 47 ++++++++-- web/react/components/navbar_dropdown.jsx | 10 +-- web/react/components/sidebar_right_menu.jsx | 11 ++- web/react/components/team_members.jsx | 130 ---------------------------- web/react/components/team_members_modal.jsx | 69 +++++++++++++++ web/react/pages/channel.jsx | 6 -- 6 files changed, 119 insertions(+), 154 deletions(-) delete mode 100644 web/react/components/team_members.jsx create mode 100644 web/react/components/team_members_modal.jsx diff --git a/web/react/components/member_list_team.jsx b/web/react/components/member_list_team.jsx index 72fdb7be9..f1c31131f 100644 --- a/web/react/components/member_list_team.jsx +++ b/web/react/components/member_list_team.jsx @@ -2,17 +2,56 @@ // See License.txt for license information. import MemberListTeamItem from './member_list_team_item.jsx'; +import UserStore from '../stores/user_store.jsx'; export default class MemberListTeam extends React.Component { + constructor(props) { + super(props); + + this.getUsers = this.getUsers.bind(this); + this.onChange = this.onChange.bind(this); + + this.state = { + users: this.getUsers() + }; + } + + componentDidMount() { + UserStore.addChangeListener(this.onChange); + } + + componentWillUnmount() { + UserStore.removeChangeListener(this.onChange); + } + + getUsers() { + const profiles = UserStore.getProfiles(); + const users = []; + + for (const id of Object.keys(profiles)) { + users.push(profiles[id]); + } + + users.sort((a, b) => a.username.localeCompare(b.username)); + + return users; + } + + onChange() { + this.setState({ + users: this.getUsers() + }); + } + render() { - const memberList = this.props.users.map(function makeListItem(user) { + const memberList = this.state.users.map((user) => { return ( ); - }, this); + }); return ( @@ -23,7 +62,3 @@ export default class MemberListTeam extends React.Component { ); } } - -MemberListTeam.propTypes = { - users: React.PropTypes.arrayOf(React.PropTypes.object).isRequired -}; diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx index a14434bfc..c286ee6f9 100644 --- a/web/react/components/navbar_dropdown.jsx +++ b/web/react/components/navbar_dropdown.jsx @@ -8,6 +8,8 @@ import TeamStore from '../stores/team_store.jsx'; import * as EventHelpers from '../dispatcher/event_helpers.jsx'; import AboutBuildModal from './about_build_modal.jsx'; +import TeamMembersModal from './team_members_modal.jsx'; +import ToggleModalButton from './toggle_modal_button.jsx'; import UserSettingsModal from './user_settings/user_settings_modal.jsx'; import Constants from '../utils/constants.jsx'; @@ -117,13 +119,9 @@ export default class NavbarDropdown extends React.Component { if (isAdmin) { manageLink = (
  • - + {'Manage Members'} - +
    • ); diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx index 0525eca4b..1f268a2f7 100644 --- a/web/react/components/sidebar_right_menu.jsx +++ b/web/react/components/sidebar_right_menu.jsx @@ -1,6 +1,8 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import TeamMembersModal from './team_members_modal.jsx'; +import ToggleModalButton from './toggle_modal_button.jsx'; import UserSettingsModal from './user_settings/user_settings_modal.jsx'; import UserStore from '../stores/user_store.jsx'; import * as client from '../utils/client.jsx'; @@ -78,12 +80,9 @@ export default class SidebarRightMenu extends React.Component { ); manageLink = (
  • - - Manage Members + + {'Manage Members'} +
    • ); } diff --git a/web/react/components/team_members.jsx b/web/react/components/team_members.jsx deleted file mode 100644 index cd0766012..000000000 --- a/web/react/components/team_members.jsx +++ /dev/null @@ -1,130 +0,0 @@ -// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import UserStore from '../stores/user_store.jsx'; -import MemberListTeam from './member_list_team.jsx'; -import * as utils from '../utils/utils.jsx'; - -function getStateFromStores() { - var users = UserStore.getProfiles(); - var memberList = []; - for (var id in users) { - if (users.hasOwnProperty(id)) { - memberList.push(users[id]); - } - } - - memberList.sort(function sort(a, b) { - if (a.username < b.username) { - return -1; - } - - if (a.username > b.username) { - return 1; - } - - return 0; - }); - - return { - member_list: memberList - }; -} - -export default class TeamMembers extends React.Component { - constructor(props) { - super(props); - - this.onChange = this.onChange.bind(this); - - this.state = getStateFromStores(); - } - - componentDidMount() { - UserStore.addChangeListener(this.onChange); - - var self = this; - $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', function show() { - self.setState({render_members: false}); - }); - - $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', function hide() { - self.setState({render_members: true}); - }); - } - - componentWillUnmount() { - UserStore.removeChangeListener(this.onChange); - } - - onChange() { - var newState = getStateFromStores(); - if (!utils.areObjectsEqual(newState, this.state)) { - this.setState(newState); - } - } - - render() { - var serverError = null; - - if (this.state.server_error) { - serverError = ; - } - - var renderMembers = ''; - - if (this.state.render_members) { - renderMembers = ; - } - - return ( - - ); - } -} - -TeamMembers.propTypes = { - teamDisplayName: React.PropTypes.string -}; diff --git a/web/react/components/team_members_modal.jsx b/web/react/components/team_members_modal.jsx new file mode 100644 index 000000000..0a30a2202 --- /dev/null +++ b/web/react/components/team_members_modal.jsx @@ -0,0 +1,69 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import MemberListTeam from './member_list_team.jsx'; +import TeamStore from '../stores/team_store.jsx'; + +const Modal = ReactBootstrap.Modal; + +export default class TeamMembersModal extends React.Component { + constructor(props) { + super(props); + + this.onShow = this.onShow.bind(this); + } + + componentDidMount() { + if (this.props.show) { + this.onShow(); + } + } + + componentDidUpdate(prevProps) { + if (this.props.show && !prevProps.show) { + this.onShow(); + } + } + + onShow() { + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); + if ($(window).width() > 768) { + $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); + } + } + + render() { + const team = TeamStore.getCurrent(); + + return ( + + + {team.display_name + ' Members'} + + +
    + +
    +     + + + +     + ); + } +} + +TeamMembersModal.propTypes = { + show: React.PropTypes.bool.isRequired, + onHide: React.PropTypes.func.isRequired +}; diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 161e6ab22..b73dfdafe 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -14,7 +14,6 @@ import DeletePostModal from '../components/delete_post_modal.jsx'; import MoreChannelsModal from '../components/more_channels.jsx'; import PostDeletedModal from '../components/post_deleted_modal.jsx'; import TeamSettingsModal from '../components/team_settings_modal.jsx'; -import TeamMembersModal from '../components/team_members.jsx'; import RemovedFromChannelModal from '../components/removed_from_channel_modal.jsx'; import RegisterAppModal from '../components/register_app_modal.jsx'; import ImportThemeModal from '../components/user_settings/import_theme_modal.jsx'; @@ -86,11 +85,6 @@ function setupChannelPage(props, team, channel) { document.getElementById('team_settings_modal') ); - ReactDOM.render( - , - document.getElementById('team_members_modal') - ); - ReactDOM.render( , document.getElementById('rename_channel_modal') -- cgit v1.2.3-1-g7c22