// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. const ChannelStore = require('../stores/channel_store.jsx'); const UserStore = require('../stores/user_store.jsx'); const PostStore = require('../stores/post_store.jsx'); const SocketStore = require('../stores/socket_store.jsx'); const NavbarSearchBox = require('./search_bar.jsx'); const AsyncClient = require('../utils/async_client.jsx'); const Client = require('../utils/client.jsx'); const Utils = require('../utils/utils.jsx'); const MessageWrapper = require('./message_wrapper.jsx'); const PopoverListMembers = require('./popover_list_members.jsx'); const AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); const Constants = require('../utils/constants.jsx'); const ActionTypes = Constants.ActionTypes; export default class ChannelHeader extends React.Component { constructor(props) { super(props); this.onListenerChange = this.onListenerChange.bind(this); this.onSocketChange = this.onSocketChange.bind(this); this.handleLeave = this.handleLeave.bind(this); this.searchMentions = this.searchMentions.bind(this); this.state = this.getStateFromStores(); } getStateFromStores() { return { channel: ChannelStore.getCurrent(), memberChannel: ChannelStore.getCurrentMember(), memberTeam: UserStore.getCurrentUser(), users: ChannelStore.getCurrentExtraInfo().members, searchVisible: PostStore.getSearchResults() !== null }; } componentDidMount() { ChannelStore.addChangeListener(this.onListenerChange); ChannelStore.addExtraInfoChangeListener(this.onListenerChange); PostStore.addSearchChangeListener(this.onListenerChange); UserStore.addChangeListener(this.onListenerChange); SocketStore.addChangeListener(this.onSocketChange); } componentWillUnmount() { ChannelStore.removeChangeListener(this.onListenerChange); ChannelStore.removeExtraInfoChangeListener(this.onListenerChange); PostStore.removeSearchChangeListener(this.onListenerChange); UserStore.addChangeListener(this.onListenerChange); } onListenerChange() { const newState = this.getStateFromStores(); if (!Utils.areStatesEqual(newState, this.state)) { this.setState(newState); } $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover click', html: true, delay: {show: 500, hide: 500}}); } onSocketChange(msg) { if (msg.action === 'new_user') { AsyncClient.getChannelExtraInfo(true); } } handleLeave() { Client.leaveChannel(this.state.channel.id, function handleLeaveSuccess() { AppDispatcher.handleViewAction({ type: ActionTypes.LEAVE_CHANNEL, id: this.state.channel.id }); const townsquare = ChannelStore.getByName('town-square'); Utils.switchChannel(townsquare); }.bind(this), function handleLeaveError(err) { AsyncClient.dispatchError(err, 'handleLeave'); } ); } searchMentions(e) { e.preventDefault(); const user = UserStore.getCurrentUser(); let terms = ''; if (user.notify_props && user.notify_props.mention_keys) { let termKeys = UserStore.getCurrentMentionKeys(); if (user.notify_props.all === 'true' && termKeys.indexOf('@all') !== -1) { termKeys.splice(termKeys.indexOf('@all'), 1); } if (user.notify_props.channel === 'true' && termKeys.indexOf('@channel') !== -1) { termKeys.splice(termKeys.indexOf('@channel'), 1); } terms = termKeys.join(' '); } AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_SEARCH_TERM, term: terms, do_search: true, is_mention_search: true }); } render() { if (this.state.channel === null) { return null; } const channel = this.state.channel; const description = Utils.textToJsx(channel.description, {singleline: true, noMentionHighlight: true}); const popoverContent = React.renderToString(); let channelTitle = channel.display_name; const currentId = UserStore.getCurrentId(); const isAdmin = this.state.memberChannel.roles.indexOf('admin') > -1 || this.state.memberTeam.roles.indexOf('admin') > -1; const isDirect = (this.state.channel.type === 'D'); if (isDirect) { if (this.state.users.length > 1) { let contact; if (this.state.users[0].id === currentId) { contact = this.state.users[1]; } else { contact = this.state.users[0]; } channelTitle = contact.nickname || contact.username; } } let channelTerm = 'Channel'; if (channel.type === 'P') { channelTerm = 'Group'; } let dropdownContents = []; if (!isDirect) { dropdownContents.push(
  • View Info
  • ); if (!ChannelStore.isDefault(channel)) { dropdownContents.push(
  • Add Members
  • ); if (isAdmin) { dropdownContents.push(
  • Manage Members
  • ); } } dropdownContents.push(
  • Set {channelTerm} Description...
  • ); dropdownContents.push(
  • Notification Preferences
  • ); if (!ChannelStore.isDefault(channel)) { if (isAdmin) { dropdownContents.push(
  • Rename {channelTerm}...
  • ); dropdownContents.push(
  • Delete {channelTerm}...
  • ); } dropdownContents.push(
  • Leave {channelTerm}
  • ); } } else { dropdownContents.push(
  • Set Channel Description...
  • ); } return (
    {channelTitle}
      {dropdownContents}
    {description}
    ); } }