// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import $ from 'jquery'; import LoadingScreen from './loading_screen.jsx'; import NewChannelFlow from './new_channel_flow.jsx'; import ChannelStore from 'stores/channel_store.jsx'; import * as Utils from 'utils/utils.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; import {FormattedMessage} from 'react-intl'; import {browserHistory} from 'react-router/es6'; import React from 'react'; import ReactDOM from 'react-dom'; import PureRenderMixin from 'react-addons-pure-render-mixin'; import loadingGif from 'images/load.gif'; function getStateFromStores() { return { channels: ChannelStore.getMoreAll(), serverError: null }; } export default class MoreChannels extends React.Component { constructor(props) { super(props); this.onListenerChange = this.onListenerChange.bind(this); this.handleJoin = this.handleJoin.bind(this); this.handleNewChannel = this.handleNewChannel.bind(this); this.createChannelRow = this.createChannelRow.bind(this); this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); var initState = getStateFromStores(); initState.channelType = ''; initState.joiningChannel = ''; initState.showNewChannelModal = false; this.state = initState; } componentDidMount() { ChannelStore.addMoreChangeListener(this.onListenerChange); $(ReactDOM.findDOMNode(this.refs.modal)).on('shown.bs.modal', () => { AsyncClient.getMoreChannels(true); }); var self = this; $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', (e) => { var button = e.relatedTarget; self.setState({channelType: $(button).attr('data-channeltype')}); }); } componentWillUnmount() { ChannelStore.removeMoreChangeListener(this.onListenerChange); } onListenerChange() { var newState = getStateFromStores(); if (!Utils.areObjectsEqual(newState.channels, this.state.channels)) { this.setState(newState); } } handleJoin(channel) { this.setState({joiningChannel: channel.id}); GlobalActions.emitJoinChannelEvent( channel, () => { $(ReactDOM.findDOMNode(this.refs.modal)).modal('hide'); browserHistory.push(Utils.getTeamURLNoOriginFromAddressBar() + '/channels/' + channel.name); this.setState({joiningChannel: ''}); }, (err) => { this.setState({joiningChannel: '', serverError: err.message}); } ); } handleNewChannel() { $(ReactDOM.findDOMNode(this.refs.modal)).modal('hide'); this.setState({showNewChannelModal: true}); } createChannelRow(channel) { let joinButton; if (this.state.joiningChannel === channel.id) { joinButton = ( ); } else { joinButton = ( ); } return (

{channel.display_name}

{channel.purpose}

{joinButton}
); } render() { let maxHeight = 1000; if (Utils.windowHeight() <= 1200) { maxHeight = Utils.windowHeight() - 300; } var serverError; if (this.state.serverError) { serverError =
; } var moreChannels; if (this.state.channels != null) { var channels = this.state.channels; if (channels.loading) { moreChannels = ; } else if (channels.length) { moreChannels = (
{channels.map(this.createChannelRow)}
); } else { moreChannels = (

); } } return ( ); } }