diff options
Diffstat (limited to 'web/react/components/sidebar.jsx')
| -rw-r--r-- | web/react/components/sidebar.jsx | 449 |
1 files changed, 449 insertions, 0 deletions
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx new file mode 100644 index 000000000..10017c7ee --- /dev/null +++ b/web/react/components/sidebar.jsx @@ -0,0 +1,449 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); +var ChannelStore = require('../stores/channel_store.jsx'); +var AsyncClient = require('../utils/async_client.jsx'); +var SocketStore = require('../stores/socket_store.jsx'); +var UserStore = require('../stores/user_store.jsx'); +var utils = require('../utils/utils.jsx'); +var SidebarHeader = require('./sidebar_header.jsx'); +var SearchBox = require('./search_bar.jsx'); + +var Constants = require('../utils/constants.jsx'); +var ActionTypes = Constants.ActionTypes; + +var SidebarLoginForm = React.createClass({ + handleSubmit: function(e) { + e.preventDefault(); + var state = { } + + var domain = this.refs.domain.getDOMNode().value.trim(); + if (!domain) { + state.server_error = "A domain is required" + this.setState(state); + return; + } + + var email = this.refs.email.getDOMNode().value.trim(); + if (!email) { + state.server_error = "An email is required" + this.setState(state); + return; + } + + var password = this.refs.password.getDOMNode().value.trim(); + if (!password) { + state.server_error = "A password is required" + this.setState(state); + return; + } + + state.server_error = ""; + this.setState(state); + + client.loginByEmail(domain, email, password, + function(data) { + UserStore.setLastDomain(domain); + UserStore.setLastEmail(email); + UserStore.setCurrentUser(data); + + var redirect = utils.getUrlParameter("redirect"); + if (redirect) { + window.location.href = decodeURI(redirect); + } else { + window.location.href = '/channels/town-square'; + } + + }.bind(this), + function(err) { + if (err.message == "Login failed because email address has not been verified") { + window.location.href = '/verify?domain=' + encodeURIComponent(domain) + '&email=' + encodeURIComponent(email); + return; + } + state.server_error = err.message; + this.valid = false; + this.setState(state); + }.bind(this) + ); + }, + getInitialState: function() { + return { }; + }, + render: function() { + var server_error = this.state.server_error ? <label className="control-label">{this.state.server_error}</label> : null; + + var subDomain = utils.getSubDomain(); + var subDomainClass = "form-control hidden"; + + if (subDomain == "") { + subDomain = UserStore.getLastDomain(); + subDomainClass = "form-control"; + } + + return ( + <form className="" onSubmit={this.handleSubmit}> + <a href="/find_team">{"Find your " + strings.Team}</a> + <div className={server_error ? 'form-group has-error' : 'form-group'}> + { server_error } + <input type="text" className={subDomainClass} name="domain" defaultValue={subDomain} ref="domain" placeholder="Domain" /> + </div> + <div className={server_error ? 'form-group has-error' : 'form-group'}> + <input type="text" className="form-control" name="email" defaultValue={UserStore.getLastEmail()} ref="email" placeholder="Email" /> + </div> + <div className={server_error ? 'form-group has-error' : 'form-group'}> + <input type="password" className="form-control" name="password" ref="password" placeholder="Password" /> + </div> + <button type="submit" className="btn btn-default">Login</button> + </form> + ); + } +}); + +function getStateFromStores() { + var members = ChannelStore.getAllMembers(); + var team_member_map = UserStore.getActiveOnlyProfiles(); + var current_id = ChannelStore.getCurrentId(); + + var teammates = []; + for (var id in team_member_map) { + if (id === UserStore.getCurrentId()) continue; + teammates.push(team_member_map[id]); + } + + // Create lists of all read and unread direct channels + var showDirectChannels = []; + var readDirectChannels = []; + for (var i = 0; i < teammates.length; i++) { + var teammate = teammates[i]; + + if (teammate.id == UserStore.getCurrentId()) { + continue; + } + + var channelName = ""; + if (teammate.id > UserStore.getCurrentId()) { + channelName = UserStore.getCurrentId() + '__' + teammate.id; + } else { + channelName = teammate.id + '__' + UserStore.getCurrentId(); + } + + var channel = ChannelStore.getByName(channelName); + + if (channel != null) { + channel.display_name = teammate.full_name.trim() != "" ? teammate.full_name : teammate.username; + channel.teammate_username = teammate.username; + + channel.status = UserStore.getStatus(teammate.id); + + var channelMember = members[channel.id]; + var msg_count = channel.total_msg_count - channelMember.msg_count; + if (msg_count > 0) { + channel.unread = msg_count; + showDirectChannels.push(channel); + } else if (current_id === channel.id) { + showDirectChannels.push(channel); + } else { + readDirectChannels.push(channel); + } + } else { + var tempChannel = {}; + tempChannel.fake = true; + tempChannel.name = channelName; + tempChannel.display_name = teammate.full_name.trim() != "" ? teammate.full_name : teammate.username; + tempChannel.status = UserStore.getStatus(teammate.id); + tempChannel.last_post_at = 0; + readDirectChannels.push(tempChannel); + } + } + + // If we don't have MAX_DMS unread channels, sort the read list by last_post_at + if (showDirectChannels.length < Constants.MAX_DMS) { + readDirectChannels.sort(function(a,b) { + // sort by last_post_at first + if (a.last_post_at > b.last_post_at) return -1; + if (a.last_post_at < b.last_post_at) return 1; + // if last_post_at is equal, sort by name + if (a.display_name < b.display_name) return -1; + if (a.display_name > b.display_name) return 1; + return 0; + }); + + var index = 0; + while (showDirectChannels.length < Constants.MAX_DMS && index < readDirectChannels.length) { + showDirectChannels.push(readDirectChannels[index]); + index++; + } + readDirectChannels = readDirectChannels.slice(index); + + showDirectChannels.sort(function(a,b) { + if (a.display_name < b.display_name) return -1; + if (a.display_name > b.display_name) return 1; + return 0; + }); + } + + return { + active_id: current_id, + channels: ChannelStore.getAll(), + members: members, + showDirectChannels: showDirectChannels, + hideDirectChannels: readDirectChannels + }; +} + +var SidebarLoggedIn = React.createClass({ + componentDidMount: function() { + ChannelStore.addChangeListener(this._onChange); + UserStore.addChangeListener(this._onChange); + UserStore.addStatusesChangeListener(this._onChange); + SocketStore.addChangeListener(this._onSocketChange); + $(".nav-pills__container").perfectScrollbar(); + + this.updateTitle(); + }, + componentDidUpdate: function() { + this.updateTitle(); + }, + componentWillUnmount: function() { + ChannelStore.removeChangeListener(this._onChange); + UserStore.removeChangeListener(this._onChange); + UserStore.removeStatusesChangeListener(this._onChange); + SocketStore.removeChangeListener(this._onSocketChange); + }, + _onChange: function() { + var newState = getStateFromStores(); + if (!utils.areStatesEqual(newState, this.state)) { + this.setState(newState); + } + }, + _onSocketChange: function(msg) { + if (msg.action == "posted") { + if (ChannelStore.getCurrentId() === msg.channel_id) { + AsyncClient.getChannels(true, window.isActive); + } else { + AsyncClient.getChannels(true); + } + + if (UserStore.getCurrentId() != msg.user_id) { + + var mentions = msg.props.mentions ? JSON.parse(msg.props.mentions) : []; + var channel = ChannelStore.get(msg.channel_id); + + var user = UserStore.getCurrentUser(); + if (user.notify_props && ((user.notify_props.desktop === "mention" && mentions.indexOf(user.id) === -1 && channel.type !== 'D') || user.notify_props.desktop === "none")) { + return; + } + + var member = ChannelStore.getMember(msg.channel_id); + if ((member.notify_level === "mention" && mentions.indexOf(user.id) === -1) || member.notify_level === "none" || member.notify_level === "quiet") { + return; + } + + var username = "Someone"; + if (UserStore.hasProfile(msg.user_id)) { + username = UserStore.getProfile(msg.user_id).username; + } + + var title = channel ? channel.display_name : "Posted"; + + var repRegex = new RegExp("<br>", "g"); + var post = JSON.parse(msg.props.post); + var msg = post.message.replace(repRegex, "\n").split("\n")[0].replace("<mention>", "").replace("</mention>", ""); + if (msg.length > 50) { + msg = msg.substring(0,49) + "..."; + } + utils.notifyMe(title, username + " wrote: " + msg, channel); + if (!user.notify_props || user.notify_props.desktop_sound === "true") { + utils.ding(); + } + } + + } else if (msg.action == "viewed") { + if (ChannelStore.getCurrentId() != msg.channel_id) { + AsyncClient.getChannels(true); + } + } + }, + updateTitle: function() { + var channel = ChannelStore.getCurrent(); + if (channel) { + if (channel.type === 'D') { + userIds = channel.name.split('__'); + if (userIds.length < 2) return; + if (userIds[0] == UserStore.getCurrentId() && UserStore.getProfile(userIds[1])) { + document.title = UserStore.getProfile(userIds[1]).username + " " + document.title.substring(document.title.lastIndexOf("-")); + } else if (userIds[1] == UserStore.getCurrentId() && UserStore.getProfile(userIds[0])) { + document.title = UserStore.getProfile(userIds[0]).username + " " + document.title.substring(document.title.lastIndexOf("-")); + } + } else { + document.title = channel.display_name + " " + document.title.substring(document.title.lastIndexOf("-")) + } + } + }, + getInitialState: function() { + return getStateFromStores(); + }, + render: function() { + var members = this.state.members; + var newsActive = window.location.pathname === "/" ? "active" : ""; + var badgesActive = false; + var self = this; + var channelItems = this.state.channels.map(function(channel) { + if (channel.type != 'O') { + return ""; + } + + var channelMember = members[channel.id]; + var active = channel.id === self.state.active_id ? "active" : ""; + + var msg_count = channel.total_msg_count - channelMember.msg_count; + var titleClass = "" + if (msg_count > 0 && channelMember.notify_level !== "quiet") { + titleClass = "unread-title" + } + + var badge = ""; + if (channelMember.mention_count > 0) { + badge = <span className="badge pull-right small">{channelMember.mention_count}</span>; + badgesActive = true; + titleClass = "unread-title" + } + + return ( + <li key={channel.id} className={active}><a className={"sidebar-channel " + titleClass} href="#" onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li> + ); + }); + + var privateChannelItems = this.state.channels.map(function(channel) { + if (channel.type != 'P') { + return ""; + } + + var channelMember = members[channel.id]; + var active = channel.id === self.state.active_id ? "active" : ""; + + var msg_count = channel.total_msg_count - channelMember.msg_count; + var titleClass = "" + if (msg_count > 0 && channelMember.notify_level !== "quiet") { + titleClass = "unread-title" + } + + var badge = ""; + if (channelMember.mention_count > 0) { + badge = <span className="badge pull-right small">{channelMember.mention_count}</span>; + badgesActive = true; + titleClass = "unread-title" + } + + return ( + <li key={channel.id} className={active}><a className={"sidebar-channel " + titleClass} href="#" onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li> + ); + }); + + var directMessageItems = this.state.showDirectChannels.map(function(channel) { + var badge = ""; + var titleClass = ""; + + var statusIcon = ""; + if (channel.status === "online") { + statusIcon = Constants.ONLINE_ICON_SVG; + } else if (channel.status === "away") { + statusIcon = Constants.ONLINE_ICON_SVG; + } else { + statusIcon = Constants.OFFLINE_ICON_SVG; + } + + if (!channel.fake) { + var active = channel.id === self.state.active_id ? "active" : ""; + + if (channel.unread) { + badge = <span className="badge pull-right small">{channel.unread}</span>; + badgesActive = true; + titleClass = "unread-title" + } + + return ( + <li key={channel.name} className={active}><a className={"sidebar-channel " + titleClass} href="#" onClick={function(e){e.preventDefault(); utils.switchChannel(channel, channel.teammate_username);}}><span className="status" dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li> + ); + } else { + return ( + <li key={channel.name} className={active}><a className={"sidebar-channel " + titleClass} href={"/channels/"+channel.name}><span className="status" dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li> + ); + } + + }); + + var link = document.createElement('link'); + link.type = 'image/x-icon'; + link.rel = 'shortcut icon'; + link.id = 'favicon'; + if (badgesActive) { + link.href = '/static/images/redfavicon.ico'; + } else { + link.href = '/static/images/favicon.ico'; + } + var head = document.getElementsByTagName('head')[0]; + var oldLink = document.getElementById('favicon'); + if (oldLink) { + head.removeChild(oldLink); + } + head.appendChild(link); + + if (channelItems.length == 0) { + <li><small>Loading...</small></li> + } + + if (privateChannelItems.length == 0) { + <li><small>Loading...</small></li> + } + return ( + <div> + <SidebarHeader teamName={this.props.teamName} teamType={this.props.teamType} /> + <SearchBox /> + + <div className="nav-pills__container"> + <ul className="nav nav-pills nav-stacked"> + <li><h4>Channels<a className="add-channel-btn" href="#" data-toggle="modal" data-target="#new_channel" data-channeltype="O">+</a></h4></li> + {channelItems} + <li><a href="#" data-toggle="modal" className="nav-more" data-target="#more_channels" data-channeltype="O">More...</a></li> + </ul> + + <ul className="nav nav-pills nav-stacked"> + <li><h4>Private Groups<a className="add-channel-btn" href="#" data-toggle="modal" data-target="#new_channel" data-channeltype="P">+</a></h4></li> + {privateChannelItems} + </ul> + <ul className="nav nav-pills nav-stacked"> + <li><h4>Direct Messages</h4></li> + {directMessageItems} + { this.state.hideDirectChannels.length > 0 ? + <li><a href="#" data-toggle="modal" className="nav-more" data-target="#more_direct_channels" data-channels={JSON.stringify(this.state.hideDirectChannels)}>{"More ("+this.state.hideDirectChannels.length+")"}</a></li> + : "" } + </ul> + </div> + </div> + ); + } +}); + +var SidebarLoggedOut = React.createClass({ + render: function() { + return ( + <div> + <SidebarHeader teamName={this.props.teamName} /> + <SidebarLoginForm /> + </div> + ); + } +}); + +module.exports = React.createClass({ + render: function() { + var currentId = UserStore.getCurrentId(); + if (currentId != null) { + return <SidebarLoggedIn teamName={this.props.teamName} teamType={this.props.teamType} />; + } else { + return <SidebarLoggedOut teamName={this.props.teamName} />; + } + } +}); |