diff options
Diffstat (limited to 'web/react/components')
60 files changed, 4236 insertions, 2440 deletions
diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx index 1192a72bc..2a83b3c40 100644 --- a/web/react/components/activity_log_modal.jsx +++ b/web/react/components/activity_log_modal.jsx @@ -1,102 +1,104 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var UserStore = require('../stores/user_store.jsx'); -var Client = require('../utils/client.jsx'); -var AsyncClient = require('../utils/async_client.jsx'); -var LoadingScreen = require('./loading_screen.jsx'); -var utils = require('../utils/utils.jsx'); +const UserStore = require('../stores/user_store.jsx'); +const Client = require('../utils/client.jsx'); +const AsyncClient = require('../utils/async_client.jsx'); +const LoadingScreen = require('./loading_screen.jsx'); +const Utils = require('../utils/utils.jsx'); -function getStateFromStoresForSessions() { - return { - sessions: UserStore.getSessions(), - serverError: null, - clientError: null - }; -} +export default class ActivityLogModal extends React.Component { + constructor(props) { + super(props); + + this.submitRevoke = this.submitRevoke.bind(this); + this.onListenerChange = this.onListenerChange.bind(this); + this.handleMoreInfo = this.handleMoreInfo.bind(this); -module.exports = React.createClass({ - displayName: 'ActivityLogModal', - submitRevoke: function(altId) { + this.state = this.getStateFromStores(); + this.state.moreInfo = []; + } + getStateFromStores() { + return { + sessions: UserStore.getSessions(), + serverError: null, + clientError: null + }; + } + submitRevoke(altId) { Client.revokeSession(altId, - function(data) { + function handleRevokeSuccess() { AsyncClient.getSessions(); - }.bind(this), - function(err) { - var state = getStateFromStoresForSessions(); + }, + function handleRevokeError(err) { + let state = this.getStateFromStores(); state.serverError = err; this.setState(state); }.bind(this) ); - }, - componentDidMount: function() { + } + componentDidMount() { UserStore.addSessionsChangeListener(this.onListenerChange); - $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) { + $(React.findDOMNode(this.refs.modal)).on('shown.bs.modal', function handleShow() { AsyncClient.getSessions(); }); - var self = this; - $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) { + $(React.findDOMNode(this.refs.modal)).on('hidden.bs.modal', function handleHide() { $('#user_settings').modal('show'); - self.setState({moreInfo: []}); - }); - }, - componentWillUnmount: function() { + this.setState({moreInfo: []}); + }.bind(this)); + } + componentWillUnmount() { UserStore.removeSessionsChangeListener(this.onListenerChange); - }, - onListenerChange: function() { - var newState = getStateFromStoresForSessions(); - if (!utils.areStatesEqual(newState.sessions, this.state.sessions)) { + } + onListenerChange() { + const newState = this.getStateFromStores(); + if (!Utils.areStatesEqual(newState.sessions, this.state.sessions)) { this.setState(newState); } - }, - handleMoreInfo: function(index) { - var newMoreInfo = this.state.moreInfo; + } + handleMoreInfo(index) { + let newMoreInfo = this.state.moreInfo; newMoreInfo[index] = true; this.setState({moreInfo: newMoreInfo}); - }, - getInitialState: function() { - var initialState = getStateFromStoresForSessions(); - initialState.moreInfo = []; - return initialState; - }, - render: function() { - var activityList = []; - var serverError = this.state.serverError; - - // Squash any false-y value for server error into null - if (!serverError) { - serverError = null; - } + } + render() { + let activityList = []; - for (var i = 0; i < this.state.sessions.length; i++) { - var currentSession = this.state.sessions[i]; - var lastAccessTime = new Date(currentSession.last_activity_at); - var firstAccessTime = new Date(currentSession.create_at); - var devicePicture = ''; + for (let i = 0; i < this.state.sessions.length; i++) { + const currentSession = this.state.sessions[i]; + const lastAccessTime = new Date(currentSession.last_activity_at); + const firstAccessTime = new Date(currentSession.create_at); + let devicePicture = ''; if (currentSession.props.platform === 'Windows') { devicePicture = 'fa fa-windows'; - } - else if (currentSession.props.platform === 'Macintosh' || currentSession.props.platform === 'iPhone') { + } else if (currentSession.props.platform === 'Macintosh' || currentSession.props.platform === 'iPhone') { devicePicture = 'fa fa-apple'; - } - else if (currentSession.props.platform === 'Linux') { + } else if (currentSession.props.platform === 'Linux') { devicePicture = 'fa fa-linux'; } - var moreInfo; + let moreInfo; if (this.state.moreInfo[i]) { moreInfo = ( <div> - <div>{'First time active: ' + firstAccessTime.toDateString() + ', ' + lastAccessTime.toLocaleTimeString()}</div> - <div>{'OS: ' + currentSession.props.os}</div> - <div>{'Browser: ' + currentSession.props.browser}</div> - <div>{'Session ID: ' + currentSession.alt_id}</div> + <div>{`First time active: ${firstAccessTime.toDateString()}, ${lastAccessTime.toLocaleTimeString()}`}</div> + <div>{`OS: ${currentSession.props.os}`}</div> + <div>{`Browser: ${currentSession.props.browser}`}</div> + <div>{`Session ID: ${currentSession.alt_id}`}</div> </div> ); } else { - moreInfo = (<a className='theme' href='#' onClick={this.handleMoreInfo.bind(this, i)}>More info</a>); + moreInfo = ( + <a + className='theme' + href='#' + onClick={this.handleMoreInfo.bind(this, i)} + > + More info + </a> + ); } activityList[i] = ( @@ -104,33 +106,62 @@ module.exports = React.createClass({ <div className='activity-log__report'> <div className='report__platform'><i className={devicePicture} />{currentSession.props.platform}</div> <div className='report__info'> - <div>{'Last activity: ' + lastAccessTime.toDateString() + ', ' + lastAccessTime.toLocaleTimeString()}</div> + <div>{`Last activity: ${lastAccessTime.toDateString()}, ${lastAccessTime.toLocaleTimeString()}`}</div> {moreInfo} </div> </div> - <div className='activity-log__action'><button onClick={this.submitRevoke.bind(this, currentSession.alt_id)} className='btn btn-primary'>Logout</button></div> + <div className='activity-log__action'> + <button + onClick={this.submitRevoke.bind(this, currentSession.alt_id)} + className='btn btn-primary' + > + Logout + </button> + </div> </div> ); } - var content; + let content; if (this.state.sessions.loading) { - content = (<LoadingScreen />); + content = <LoadingScreen />; } else { - content = (<form role='form'>{activityList}</form>); + content = <form role='form'>{activityList}</form>; } return ( <div> - <div className='modal fade' ref='modal' id='activity-log' tabIndex='-1' role='dialog' aria-hidden='true'> + <div + className='modal fade' + ref='modal' + id='activity-log' + tabIndex='-1' + role='dialog' + aria-hidden='true' + > <div className='modal-dialog modal-lg'> <div className='modal-content'> <div className='modal-header'> - <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button> - <h4 className='modal-title' id='myModalLabel'>Active Sessions</h4> + <button + type='button' + className='close' + data-dismiss='modal' + aria-label='Close' + > + <span aria-hidden='true'>×</span> + </button> + <h4 + className='modal-title' + id='myModalLabel' + > + Active Sessions + </h4> </div> <p className='session-help-text'>Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the 'Logout' button below to end a session.</p> - <div ref='modalBody' className='modal-body'> + <div + ref='modalBody' + className='modal-body' + > {content} </div> </div> @@ -139,4 +170,4 @@ module.exports = React.createClass({ </div> ); } -}); +} diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 0254d0e82..87b9cab04 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -1,139 +1,85 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var ChannelStore = require('../stores/channel_store.jsx'); -var UserStore = require('../stores/user_store.jsx'); -var PostStore = require('../stores/post_store.jsx'); -var SocketStore = require('../stores/socket_store.jsx'); -var NavbarSearchBox = require('./search_bar.jsx'); -var AsyncClient = require('../utils/async_client.jsx'); -var Client = require('../utils/client.jsx'); -var utils = require('../utils/utils.jsx'); -var MessageWrapper = require('./message_wrapper.jsx'); - -var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); -var Constants = require('../utils/constants.jsx'); -var ActionTypes = Constants.ActionTypes; - -var PopoverListMembers = React.createClass({ - componentDidMount: function() { - var originalLeave = $.fn.popover.Constructor.prototype.leave; - $.fn.popover.Constructor.prototype.leave = function(obj) { - var selfObj; - if (obj instanceof this.constructor) { - selfObj = obj; - } else { - selfObj = $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type); - } - originalLeave.call(this, obj); - - if (obj.currentTarget && selfObj.$tip) { - selfObj.$tip.one('mouseenter', function() { - clearTimeout(selfObj.timeout); - selfObj.$tip.one('mouseleave', function() { - $.fn.popover.Constructor.prototype.leave.call(selfObj, selfObj); - }); - }); - } - }; +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'); - $('#member_popover').popover({placement: 'bottom', trigger: 'click', html: true}); - $('body').on('click', function(e) { - if ($(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) { - $('#member_popover').popover('hide'); - } - }); - }, - - render: function() { - var popoverHtml = ''; - var members = this.props.members; - var count; - if (members.length > 20) { - count = '20+'; - } else { - count = members.length || '-'; - } +const AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); +const Constants = require('../utils/constants.jsx'); +const ActionTypes = Constants.ActionTypes; - if (members) { - members.sort(function(a, b) { - return a.username.localeCompare(b.username); - }); +export default class ChannelHeader extends React.Component { + constructor(props) { + super(props); - members.forEach(function(m) { - popoverHtml += "<div class='text--nowrap'>" + m.username + '</div>'; - }); - } + this.onListenerChange = this.onListenerChange.bind(this); + this.onSocketChange = this.onSocketChange.bind(this); + this.handleLeave = this.handleLeave.bind(this); + this.searchMentions = this.searchMentions.bind(this); - return ( - <div id='member_popover' data-toggle='popover' data-content={popoverHtml} data-original-title='Members' > - <div id='member_tooltip' data-placement='left' data-toggle='tooltip' title='View Channel Members'> - {count} <span className='glyphicon glyphicon-user' aria-hidden='true'></span> - </div> - </div> - ); + this.state = this.getStateFromStores(); } -}); - -function getStateFromStores() { - return { - channel: ChannelStore.getCurrent(), - memberChannel: ChannelStore.getCurrentMember(), - memberTeam: UserStore.getCurrentUser(), - users: ChannelStore.getCurrentExtraInfo().members, - searchVisible: PostStore.getSearchResults() != null - }; -} - -module.exports = React.createClass({ - displayName: 'ChannelHeader', - componentDidMount: function() { + 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: function() { + } + componentWillUnmount() { ChannelStore.removeChangeListener(this.onListenerChange); ChannelStore.removeExtraInfoChangeListener(this.onListenerChange); PostStore.removeSearchChangeListener(this.onListenerChange); UserStore.addChangeListener(this.onListenerChange); - }, - onListenerChange: function() { - var newState = getStateFromStores(); - if (!utils.areStatesEqual(newState, this.state)) { + } + 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: function(msg) { + } + onSocketChange(msg) { if (msg.action === 'new_user') { AsyncClient.getChannelExtraInfo(true); } - }, - getInitialState: function() { - return getStateFromStores(); - }, - handleLeave: function() { + } + handleLeave() { Client.leaveChannel(this.state.channel.id, - function() { - var townsquare = ChannelStore.getByName('town-square'); - utils.switchChannel(townsquare); + function handleLeaveSuccess() { + const townsquare = ChannelStore.getByName('town-square'); + Utils.switchChannel(townsquare); }, - function(err) { + function handleLeaveError(err) { AsyncClient.dispatchError(err, 'handleLeave'); } ); - }, - searchMentions: function(e) { + } + searchMentions(e) { e.preventDefault(); - var user = UserStore.getCurrentUser(); + const user = UserStore.getCurrentUser(); - var terms = ''; + let terms = ''; if (user.notify_props && user.notify_props.mention_keys) { - var termKeys = UserStore.getCurrentMentionKeys(); + let termKeys = UserStore.getCurrentMentionKeys(); if (user.notify_props.all === 'true' && termKeys.indexOf('@all') !== -1) { termKeys.splice(termKeys.indexOf('@all'), 1); } @@ -149,23 +95,23 @@ module.exports = React.createClass({ do_search: true, is_mention_search: true }); - }, - render: function() { - if (this.state.channel == null) { + } + render() { + if (this.state.channel === null) { return null; } - var channel = this.state.channel; - var description = utils.textToJsx(channel.description, {singleline: true, noMentionHighlight: true}); - var popoverContent = React.renderToString(<MessageWrapper message={channel.description}/>); - var channelTitle = channel.display_name; - var currentId = UserStore.getCurrentId(); - var isAdmin = this.state.memberChannel.roles.indexOf('admin') > -1 || this.state.memberTeam.roles.indexOf('admin') > -1; - var isDirect = (this.state.channel.type === 'D'); + const channel = this.state.channel; + const description = Utils.textToJsx(channel.description, {singleline: true, noMentionHighlight: true}); + const popoverContent = React.renderToString(<MessageWrapper message={channel.description}/>); + 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) { - var contact; + let contact; if (this.state.users[0].id === currentId) { contact = this.state.users[1]; } else { @@ -175,64 +121,244 @@ module.exports = React.createClass({ } } - var channelTerm = 'Channel'; + let channelTerm = 'Channel'; if (channel.type === 'P') { channelTerm = 'Group'; } + let dropdownContents = []; + if (!isDirect) { + dropdownContents.push( + <li + key='view_info' + role='presentation' + > + <a + role='menuitem' + data-toggle='modal' + data-target='#channel_info' + data-channelid={channel.id} + href='#' + > + View Info + </a> + </li> + ); + + if (!ChannelStore.isDefault(channel)) { + dropdownContents.push( + <li + key='add_members' + role='presentation' + > + <a + role='menuitem' + data-toggle='modal' + data-target='#channel_invite' + href='#' + > + Add Members + </a> + </li> + ); + + if (isAdmin) { + dropdownContents.push( + <li + key='manage_members' + role='presentation' + > + <a + role='menuitem' + data-toggle='modal' + data-target='#channel_members' + href='#' + > + Manage Members + </a> + </li> + ); + } + } + + dropdownContents.push( + <li + key='set_channel_description' + role='presentation' + > + <a + role='menuitem' + href='#' + data-toggle='modal' + data-target='#edit_channel' + data-desc={channel.description} + data-title={channel.display_name} + data-channelid={channel.id} + > + Set {channelTerm} Description... + </a> + </li> + ); + dropdownContents.push( + <li + key='notification_preferences' + role='presentation' + > + <a + role='menuitem' + href='#' + data-toggle='modal' + data-target='#channel_notifications' + data-title={channel.display_name} + data-channelid={channel.id} + > + Notification Preferences + </a> + </li> + ); + + if (!ChannelStore.isDefault(channel)) { + if (isAdmin) { + dropdownContents.push( + <li + key='rename_channel' + role='presentation' + > + <a + role='menuitem' + href='#' + data-toggle='modal' + data-target='#rename_channel' + data-display={channel.display_name} + data-name={channel.name} + data-channelid={channel.id} + > + Rename {channelTerm}... + </a> + </li> + ); + dropdownContents.push( + <li + key='delete_channel' + role='presentation' + > + <a + role='menuitem' + href='#' + data-toggle='modal' + data-target='#delete_channel' + data-title={channel.display_name} + data-channelid={channel.id} + > + Delete {channelTerm}... + </a> + </li> + ); + } + + dropdownContents.push( + <li + key='leave_channel' + role='presentation' + > + <a + role='menuitem' + href='#' + onClick={this.handleLeave} + > + Leave {channelTerm} + </a> + </li> + ); + } + } else { + dropdownContents.push( + <li + key='edit_description_direct' + role='presentation' + > + <a + role='menuitem' + href='#' + data-toggle='modal' + data-target='#edit_channel' + data-desc={channel.description} + data-title={channel.display_name} + data-channelid={channel.id} + > + Set Channel Description... + </a> + </li> + ); + } + return ( <table className='channel-header alt'> <tr> <th> <div className='channel-header__info'> <div className='dropdown'> - <a href='#' className='dropdown-toggle theme' type='button' id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true'> + <a + href='#' + className='dropdown-toggle theme' + type='button' + id='channel_header_dropdown' + data-toggle='dropdown' + aria-expanded='true' + > <strong className='heading'>{channelTitle} </strong> - <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'></span> + <span className='glyphicon glyphicon-chevron-down header-dropdown__icon' /> </a> - {!isDirect ? - <ul className='dropdown-menu' role='menu' aria-labelledby='channel_header_dropdown'> - <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_info' data-channelid={channel.id} href='#'>View Info</a></li> - {!ChannelStore.isDefault(channel) ? - <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_invite' href='#'>Add Members</a></li> - : null - } - {isAdmin && !ChannelStore.isDefault(channel) ? - <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_members' href='#'>Manage Members</a></li> - : null - } - <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set {channelTerm} Description...</a></li> - <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#channel_notifications' data-title={channel.display_name} data-channelid={channel.id}>Notification Preferences</a></li> - {isAdmin && !ChannelStore.isDefault(channel) ? - <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#rename_channel' data-display={channel.display_name} data-name={channel.name} data-channelid={channel.id}>Rename {channelTerm}...</a></li> - : null - } - {isAdmin && !ChannelStore.isDefault(channel) ? - <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#delete_channel' data-title={channel.display_name} data-channelid={channel.id}>Delete {channelTerm}...</a></li> - : null - } - {!ChannelStore.isDefault(channel) ? - <li role='presentation'><a role='menuitem' href='#' onClick={this.handleLeave}>Leave {channelTerm}</a></li> - : null - } - </ul> - : - <ul className='dropdown-menu' role='menu' aria-labelledby='channel_header_dropdown'> - <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li> + <ul + className='dropdown-menu' + role='menu' + aria-labelledby='channel_header_dropdown' + > + {dropdownContents} </ul> - } </div> - <div data-toggle='popover' data-content={popoverContent} className='description'>{description}</div> + <div + data-toggle='popover' + data-content={popoverContent} + className='description' + > + {description} + </div> </div> </th> - <th><PopoverListMembers members={this.state.users} channelId={channel.id} /></th> + <th> + <PopoverListMembers + members={this.state.users} + channelId={channel.id} + /> + </th> <th className='search-bar__container'><NavbarSearchBox /></th> <th> <div className='dropdown channel-header__links'> - <a href='#' className='dropdown-toggle theme' type='button' id='channel_header_right_dropdown' data-toggle='dropdown' aria-expanded='true'> - <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} /> </a> - <ul className='dropdown-menu dropdown-menu-right' role='menu' aria-labelledby='channel_header_right_dropdown'> - <li role='presentation'><a role='menuitem' href='#' onClick={this.searchMentions}>Recent Mentions</a></li> + <a + href='#' + className='dropdown-toggle theme' + type='button' + id='channel_header_right_dropdown' + data-toggle='dropdown' + aria-expanded='true' + > + <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} /> + </a> + <ul + className='dropdown-menu dropdown-menu-right' + role='menu' + aria-labelledby='channel_header_right_dropdown' + > + <li role='presentation'> + <a + role='menuitem' + href='#' + onClick={this.searchMentions} + > + Recent Mentions + </a> + </li> </ul> </div> </th> @@ -240,4 +366,4 @@ module.exports = React.createClass({ </table> ); } -}); +} diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx index 0fa433383..8e8ed3f73 100644 --- a/web/react/components/channel_loader.jsx +++ b/web/react/components/channel_loader.jsx @@ -10,13 +10,18 @@ var SocketStore = require('../stores/socket_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); var PostStore = require('../stores/post_store.jsx'); var UserStore = require('../stores/user_store.jsx'); -var Constants = require('../utils/constants.jsx'); -var utils = require('../utils/utils.jsx'); +var Utils = require('../utils/utils.jsx'); -module.exports = React.createClass({ - componentDidMount: function() { +export default class ChannelLoader extends React.Component { + constructor(props) { + super(props); + this.onSocketChange = this.onSocketChange.bind(this); + + this.state = {}; + } + componentDidMount() { /* Initial aysnc loads */ AsyncClient.getMe(); AsyncClient.getPosts(ChannelStore.getCurrentId()); @@ -60,32 +65,32 @@ module.exports = React.createClass({ var user = UserStore.getCurrentUser(); if (user.props && user.props.theme) { - utils.changeCss('div.theme', 'background-color:' + user.props.theme + ';'); - utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme + ';'); - utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme + ';'); - utils.changeCss('.mention', 'background: ' + user.props.theme + ';'); - utils.changeCss('.mention-link', 'color: ' + user.props.theme + ';'); - utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme + ';}'); - utils.changeCss('.search-item-container:hover', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) + ';'); + Utils.changeCss('div.theme', 'background-color:' + user.props.theme + ';'); + Utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme + ';'); + Utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme + ';'); + Utils.changeCss('.mention', 'background: ' + user.props.theme + ';'); + Utils.changeCss('.mention-link', 'color: ' + user.props.theme + ';'); + Utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme + ';}'); + Utils.changeCss('.search-item-container:hover', 'background: ' + Utils.changeOpacity(user.props.theme, 0.05) + ';'); } if (user.props.theme !== '#000000' && user.props.theme !== '#585858') { - utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) + ';'); - utils.changeCss('a.theme', 'color:' + user.props.theme + '; fill:' + user.props.theme + '!important;'); + Utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + Utils.changeColor(user.props.theme, -10) + ';'); + Utils.changeCss('a.theme', 'color:' + user.props.theme + '; fill:' + user.props.theme + '!important;'); } else if (user.props.theme === '#000000') { - utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50) + ';'); + Utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + Utils.changeColor(user.props.theme, +50) + ';'); $('.team__header').addClass('theme--black'); } else if (user.props.theme === '#585858') { - utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10) + ';'); + Utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + Utils.changeColor(user.props.theme, +10) + ';'); $('.team__header').addClass('theme--gray'); } - }, - onSocketChange: function(msg) { + } + onSocketChange(msg) { if (msg && msg.user_id && msg.user_id !== UserStore.getCurrentId()) { UserStore.setStatus(msg.user_id, 'online'); } - }, - render: function() { + } + render() { return <div/>; } -}); +} diff --git a/web/react/components/channel_members.jsx b/web/react/components/channel_members.jsx index db4bec400..04fa2c7a2 100644 --- a/web/react/components/channel_members.jsx +++ b/web/react/components/channel_members.jsx @@ -1,154 +1,200 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var UserStore = require('../stores/user_store.jsx'); -var ChannelStore = require('../stores/channel_store.jsx'); -var AsyncClient = require('../utils/async_client.jsx'); -var MemberList = require('./member_list.jsx'); -var client = require('../utils/client.jsx'); -var utils = require('../utils/utils.jsx'); - -function getStateFromStores() { - var users = UserStore.getActiveOnlyProfiles(); - var member_list = ChannelStore.getCurrentExtraInfo().members; - - var nonmember_list = []; - for (var id in users) { - var found = false; - for (var i = 0; i < member_list.length; i++) { - if (member_list[i].id === id) { - found = true; - break; +const UserStore = require('../stores/user_store.jsx'); +const ChannelStore = require('../stores/channel_store.jsx'); +const AsyncClient = require('../utils/async_client.jsx'); +const MemberList = require('./member_list.jsx'); +const Client = require('../utils/client.jsx'); +const Utils = require('../utils/utils.jsx'); + +export default class ChannelMembers extends React.Component { + constructor(props) { + super(props); + + this.getStateFromStores = this.getStateFromStores.bind(this); + this.onChange = this.onChange.bind(this); + this.handleRemove = this.handleRemove.bind(this); + + this.state = this.getStateFromStores(); + } + getStateFromStores() { + const users = UserStore.getActiveOnlyProfiles(); + let memberList = ChannelStore.getCurrentExtraInfo().members; + + let nonmemberList = []; + for (let id in users) { + if (users.hasOwnProperty(id)) { + let found = false; + for (let i = 0; i < memberList.length; i++) { + if (memberList[i].id === id) { + found = true; + break; + } + } + if (!found) { + nonmemberList.push(users[id]); + } } } - if (!found) { - nonmember_list.push(users[id]); + + function compareByUsername(a, b) { + if (a.username < b.username) { + return -1; + } else if (a.username > b.username) { + return 1; + } + + return 0; } - } - member_list.sort(function(a,b) { - if (a.username < b.username) return -1; - if (a.username > b.username) return 1; - return 0; - }); - - nonmember_list.sort(function(a,b) { - if (a.username < b.username) return -1; - if (a.username > b.username) return 1; - return 0; - }); - - var channel_name = ChannelStore.getCurrent() ? ChannelStore.getCurrent().display_name : ""; - - return { - nonmember_list: nonmember_list, - member_list: member_list, - channel_name: channel_name - }; -} + memberList.sort(compareByUsername); + nonmemberList.sort(compareByUsername); + + const channel = ChannelStore.getCurrent(); + let channelName = ''; + if (channel) { + channelName = channel.display_name; + } -module.exports = React.createClass({ - componentDidMount: function() { - ChannelStore.addExtraInfoChangeListener(this._onChange); - ChannelStore.addChangeListener(this._onChange); - var self = this; - $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) { - self.setState({ render_members: false }); - }); - - $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { - self.setState({ render_members: true }); - }); - }, - componentWillUnmount: function() { - ChannelStore.removeExtraInfoChangeListener(this._onChange); - ChannelStore.removeChangeListener(this._onChange); - }, - _onChange: function() { - var new_state = getStateFromStores(); - if (!utils.areStatesEqual(this.state, new_state)) { - this.setState(new_state); + return { + nonmemberList: nonmemberList, + memberList: memberList, + channelName: channelName + }; + } + componentDidMount() { + ChannelStore.addExtraInfoChangeListener(this.onChange); + ChannelStore.addChangeListener(this.onChange); + $(React.findDOMNode(this.refs.modal)).on('hidden.bs.modal', function handleHide() { + this.setState({renderMembers: false}); + }.bind(this)); + + $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function handleShow() { + this.setState({renderMembers: true}); + }.bind(this)); + } + componentWillUnmount() { + ChannelStore.removeExtraInfoChangeListener(this.onChange); + ChannelStore.removeChangeListener(this.onChange); + } + onChange() { + const newState = this.getStateFromStores(); + if (!Utils.areStatesEqual(this.state, newState)) { + this.setState(newState); } - }, - handleRemove: function(user_id) { + } + handleRemove(userId) { // Make sure the user is a member of the channel - var member_list = this.state.member_list; - var found = false; - for (var i = 0; i < member_list.length; i++) { - if (member_list[i].id === user_id) { + let memberList = this.state.memberList; + let found = false; + for (let i = 0; i < memberList.length; i++) { + if (memberList[i].id === userId) { found = true; break; } } - if (!found) { return }; + if (!found) { + return; + } - var data = {}; - data['user_id'] = user_id; + let data = {}; + data.user_id = userId; - client.removeChannelMember(ChannelStore.getCurrentId(), data, - function(data) { - var old_member; - for (var i = 0; i < member_list.length; i++) { - if (user_id === member_list[i].id) { - old_member = member_list[i]; - member_list.splice(i, 1); + Client.removeChannelMember(ChannelStore.getCurrentId(), data, + function handleRemoveSuccess() { + let oldMember; + for (let i = 0; i < memberList.length; i++) { + if (userId === memberList[i].id) { + oldMember = memberList[i]; + memberList.splice(i, 1); break; } } - var nonmember_list = this.state.nonmember_list; - if (old_member) { - nonmember_list.push(old_member); + let nonmemberList = this.state.nonmemberList; + if (oldMember) { + nonmemberList.push(oldMember); } - this.setState({ member_list: member_list, nonmember_list: nonmember_list }); + this.setState({memberList: memberList, nonmemberList: nonmemberList}); AsyncClient.getChannelExtraInfo(true); }.bind(this), - function(err) { - this.setState({ invite_error: err.message }); + function handleRemoveError(err) { + this.setState({inviteError: err.message}); }.bind(this) ); - }, - getInitialState: function() { - return getStateFromStores(); - }, - render: function() { - var currentMember = ChannelStore.getCurrentMember(); - var isAdmin = false; + } + render() { + const currentMember = ChannelStore.getCurrentMember(); + let isAdmin = false; if (currentMember) { - isAdmin = currentMember.roles.indexOf("admin") > -1 || UserStore.getCurrentUser().roles.indexOf("admin") > -1; + isAdmin = currentMember.roles.indexOf('admin') > -1 || UserStore.getCurrentUser().roles.indexOf('admin') > -1; + } + + var memberList = null; + if (this.state.renderMembers) { + memberList = ( + <MemberList + memberList={this.state.memberList} + isAdmin={isAdmin} + handleRemove={this.handleRemove} + /> + ); } return ( - <div className="modal fade" ref="modal" id="channel_members" tabIndex="-1" role="dialog" aria-hidden="true"> - <div className="modal-dialog"> - <div className="modal-content"> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title"><span className="name">{this.state.channel_name}</span> Members</h4> - <a className="btn btn-md btn-primary" data-toggle="modal" data-target="#channel_invite"><i className="glyphicon glyphicon-envelope"/> Add New Members</a> - </div> - <div ref="modalBody" className="modal-body"> - <div className="col-sm-12"> - <div className="team-member-list"> - { this.state.render_members ? - <MemberList - memberList={this.state.member_list} - isAdmin={isAdmin} - handleRemove={this.handleRemove} - /> - : "" } + <div + className='modal fade' + ref='modal' + id='channel_members' + tabIndex='-1' + role='dialog' + aria-hidden='true' + > + <div className='modal-dialog'> + <div className='modal-content'> + <div className='modal-header'> + <button + type='button' + className='close' + data-dismiss='modal' + aria-label='Close' + > + <span aria-hidden='true'>×</span> + </button> + <h4 className='modal-title'><span className='name'>{this.state.channelName}</span> Members</h4> + <a + className='btn btn-md btn-primary' + data-toggle='modal' + data-target='#channel_invite' + > + <i className='glyphicon glyphicon-envelope'/> Add New Members + </a> + </div> + <div + ref='modalBody' + className='modal-body' + > + <div className='col-sm-12'> + <div className='team-member-list'> + {memberList} + </div> </div> </div> + <div className='modal-footer'> + <button + type='button' + className='btn btn-default' + data-dismiss='modal' + > + Close + </button> + </div> </div> - <div className="modal-footer"> - <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> - </div> - </div> - </div> + </div> </div> - ); } -}); +} diff --git a/web/react/components/confirm_modal.jsx b/web/react/components/confirm_modal.jsx index 3be13cf9b..cb3b9c5e3 100644 --- a/web/react/components/confirm_modal.jsx +++ b/web/react/components/confirm_modal.jsx @@ -1,31 +1,70 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -module.exports = React.createClass({ - handleConfirm: function() { - $('#'+this.props.parent_id).attr('data-confirm', 'true'); - $('#'+this.props.parent_id).modal('hide'); - $('#'+this.props.id).modal('hide'); - }, - render: function() { +export default class ConfirmModal extends React.Component { + constructor(props) { + super(props); + + this.handleConfirm = this.handleConfirm.bind(this); + + this.state = {}; + } + handleConfirm() { + $('#' + this.props.parent_id).attr('data-confirm', 'true'); + $('#' + this.props.parent_id).modal('hide'); + $('#' + this.props.id).modal('hide'); + } + render() { return ( - <div className="modal fade" id={this.props.id} tabIndex="-1" role="dialog" aria-hidden="true"> - <div className="modal-dialog"> - <div className="modal-content"> - <div className="modal-header"> - <h4 className="modal-title">{this.props.title}</h4> - </div> - <div className="modal-body"> - {this.props.message} - </div> - <div className="modal-footer"> - <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button> - <button onClick={this.handleConfirm} type="button" className="btn btn-primary">{this.props.confirm_button}</button> + <div + className='modal fade' + id={this.props.id} + tabIndex='-1' + role='dialog' + aria-hidden='true' + > + <div className='modal-dialog'> + <div className='modal-content'> + <div className='modal-header'> + <h4 className='modal-title'>{this.props.title}</h4> + </div> + <div className='modal-body'> + {this.props.message} + </div> + <div className='modal-footer'> + <button + type='button' + className='btn btn-default' + data-dismiss='modal' + > + Cancel + </button> + <button + onClick={this.handleConfirm} + type='button' + className='btn btn-primary' + > + {this.props.confirm_button} + </button> + </div> </div> - </div> - </div> + </div> </div> ); } -}); +} +ConfirmModal.defaultProps = { + parent_id: '', + id: '', + title: '', + message: '', + confirm_button: '' +}; +ConfirmModal.propTypes = { + parent_id: React.PropTypes.string, + id: React.PropTypes.string, + title: React.PropTypes.string, + message: React.PropTypes.string, + confirm_button: React.PropTypes.string +}; diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index c2b7e222f..c2fc0dcf3 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -1,24 +1,48 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); -var client = require('../utils/client.jsx'); -var AsyncClient = require('../utils/async_client.jsx'); -var SocketStore = require('../stores/socket_store.jsx'); -var ChannelStore = require('../stores/channel_store.jsx'); -var UserStore = require('../stores/user_store.jsx'); -var PostStore = require('../stores/post_store.jsx'); -var Textbox = require('./textbox.jsx'); -var MsgTyping = require('./msg_typing.jsx'); -var FileUpload = require('./file_upload.jsx'); -var FilePreview = require('./file_preview.jsx'); -var utils = require('../utils/utils.jsx'); -var Constants = require('../utils/constants.jsx'); -var ActionTypes = Constants.ActionTypes; - -module.exports = React.createClass({ - lastTime: 0, - handleSubmit: function(e) { +const AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); +const Client = require('../utils/client.jsx'); +const AsyncClient = require('../utils/async_client.jsx'); +const SocketStore = require('../stores/socket_store.jsx'); +const ChannelStore = require('../stores/channel_store.jsx'); +const UserStore = require('../stores/user_store.jsx'); +const PostStore = require('../stores/post_store.jsx'); +const Textbox = require('./textbox.jsx'); +const MsgTyping = require('./msg_typing.jsx'); +const FileUpload = require('./file_upload.jsx'); +const FilePreview = require('./file_preview.jsx'); +const Utils = require('../utils/utils.jsx'); +const Constants = require('../utils/constants.jsx'); +const ActionTypes = Constants.ActionTypes; + +export default class CreateComment extends React.Component { + constructor(props) { + super(props); + + this.lastTime = 0; + + this.handleSubmit = this.handleSubmit.bind(this); + this.commentMsgKeyPress = this.commentMsgKeyPress.bind(this); + this.handleUserInput = this.handleUserInput.bind(this); + this.handleUploadStart = this.handleUploadStart.bind(this); + this.handleFileUploadComplete = this.handleFileUploadComplete.bind(this); + this.handleUploadError = this.handleUploadError.bind(this); + this.removePreview = this.removePreview.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + this.getFileCount = this.getFileCount.bind(this); + + PostStore.clearCommentDraftUploads(); + + const draft = PostStore.getCommentDraft(this.props.rootId); + this.state = { + messageText: draft.message, + uploadsInProgress: draft.uploadsInProgress, + previews: draft.previews, + submitting: false + }; + } + handleSubmit(e) { e.preventDefault(); if (this.state.uploadsInProgress.length > 0) { @@ -29,7 +53,7 @@ module.exports = React.createClass({ return; } - var post = {}; + let post = {}; post.filenames = []; post.message = this.state.messageText; @@ -38,30 +62,30 @@ module.exports = React.createClass({ } if (post.message.length > Constants.CHARACTER_LIMIT) { - this.setState({postError: 'Comment length must be less than ' + Constants.CHARACTER_LIMIT + ' characters.'}); + this.setState({postError: `Comment length must be less than ${Constants.CHARACTER_LIMIT} characters.`}); return; } - var user_id = UserStore.getCurrentId(); + const userId = UserStore.getCurrentId(); post.channel_id = this.props.channelId; post.root_id = this.props.rootId; post.parent_id = this.props.rootId; post.filenames = this.state.previews; - var time = utils.getTimestamp(); - post.pending_post_id = user_id + ':'+ time; - post.user_id = user_id; + const time = Utils.getTimestamp(); + post.pending_post_id = `${userId}:${time}`; + post.user_id = userId; post.create_at = time; PostStore.storePendingPost(post); PostStore.storeCommentDraft(this.props.rootId, null); - client.createPost(post, ChannelStore.getCurrent(), - function(data) { + Client.createPost(post, ChannelStore.getCurrent(), + function handlePostSuccess(data) { AsyncClient.getPosts(this.props.channelId); - var channel = ChannelStore.get(this.props.channelId); - var member = ChannelStore.getMember(this.props.channelId); + const channel = ChannelStore.get(this.props.channelId); + let member = ChannelStore.getMember(this.props.channelId); member.msg_count = channel.total_msg_count; member.last_viewed_at = Date.now(); ChannelStore.setChannelMember(member); @@ -71,8 +95,8 @@ module.exports = React.createClass({ post: data }); }.bind(this), - function(err) { - var state = {}; + function handlePostError(err) { + let state = {}; if (err.message === 'Invalid RootId parameter') { if ($('#post_deleted').length > 0) { @@ -90,76 +114,76 @@ module.exports = React.createClass({ ); this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); - }, - commentMsgKeyPress: function(e) { + } + commentMsgKeyPress(e) { if (e.which === 13 && !e.shiftKey && !e.altKey) { e.preventDefault(); - this.refs.textbox.getDOMNode().blur(); + React.findDOMNode(this.refs.textbox).blur(); this.handleSubmit(e); } - var t = Date.now(); + const t = Date.now(); if ((t - this.lastTime) > 5000) { - SocketStore.sendMessage({channel_id: this.props.channelId, action: 'typing', props: {'parent_id': this.props.rootId}}); + SocketStore.sendMessage({channel_id: this.props.channelId, action: 'typing', props: {parent_id: this.props.rootId}}); this.lastTime = t; } - }, - handleUserInput: function(messageText) { - var draft = PostStore.getCommentDraft(this.props.rootId); + } + handleUserInput(messageText) { + let draft = PostStore.getCommentDraft(this.props.rootId); draft.message = messageText; PostStore.storeCommentDraft(this.props.rootId, draft); $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight); $('.post-right__scroll').perfectScrollbar('update'); this.setState({messageText: messageText}); - }, - handleUploadStart: function(clientIds, channelId) { - var draft = PostStore.getCommentDraft(this.props.rootId); + } + handleUploadStart(clientIds) { + let draft = PostStore.getCommentDraft(this.props.rootId); - draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds); + draft.uploadsInProgress = draft.uploadsInProgress.concat(clientIds); PostStore.storeCommentDraft(this.props.rootId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress']}); - }, - handleFileUploadComplete: function(filenames, clientIds, channelId) { - var draft = PostStore.getCommentDraft(this.props.rootId); + this.setState({uploadsInProgress: draft.uploadsInProgress}); + } + handleFileUploadComplete(filenames, clientIds) { + let draft = PostStore.getCommentDraft(this.props.rootId); // remove each finished file from uploads - for (var i = 0; i < clientIds.length; i++) { - var index = draft['uploadsInProgress'].indexOf(clientIds[i]); + for (let i = 0; i < clientIds.length; i++) { + const index = draft.uploadsInProgress.indexOf(clientIds[i]); if (index !== -1) { - draft['uploadsInProgress'].splice(index, 1); + draft.uploadsInProgress.splice(index, 1); } } - draft['previews'] = draft['previews'].concat(filenames); + draft.previews = draft.previews.concat(filenames); PostStore.storeCommentDraft(this.props.rootId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); - }, - handleUploadError: function(err, clientId) { + this.setState({uploadsInProgress: draft.uploadsInProgress, previews: draft.previews}); + } + handleUploadError(err, clientId) { if (clientId !== -1) { - var draft = PostStore.getCommentDraft(this.props.rootId); + let draft = PostStore.getCommentDraft(this.props.rootId); - var index = draft['uploadsInProgress'].indexOf(clientId); + const index = draft.uploadsInProgress.indexOf(clientId); if (index !== -1) { - draft['uploadsInProgress'].splice(index, 1); + draft.uploadsInProgress.splice(index, 1); } PostStore.storeCommentDraft(this.props.rootId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); + this.setState({uploadsInProgress: draft.uploadsInProgress, serverError: err}); } else { this.setState({serverError: err}); } - }, - removePreview: function(id) { - var previews = this.state.previews; - var uploadsInProgress = this.state.uploadsInProgress; + } + removePreview(id) { + let previews = this.state.previews; + let uploadsInProgress = this.state.uploadsInProgress; // id can either be the path of an uploaded file or the client id of an in progress upload - var index = previews.indexOf(id); + let index = previews.indexOf(id); if (index !== -1) { previews.splice(index, 1); } else { @@ -171,30 +195,24 @@ module.exports = React.createClass({ } } - var draft = PostStore.getCommentDraft(this.props.rootId); + let draft = PostStore.getCommentDraft(this.props.rootId); draft.previews = previews; draft.uploadsInProgress = uploadsInProgress; PostStore.storeCommentDraft(this.props.rootId, draft); this.setState({previews: previews, uploadsInProgress: uploadsInProgress}); - }, - getInitialState: function() { - PostStore.clearCommentDraftUploads(); - - var draft = PostStore.getCommentDraft(this.props.rootId); - return {messageText: draft['message'], uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews'], submitting: false}; - }, - componentWillReceiveProps: function(newProps) { + } + componentWillReceiveProps(newProps) { if (newProps.rootId !== this.props.rootId) { - var draft = PostStore.getCommentDraft(newProps.rootId); - this.setState({messageText: draft['message'], uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); + const draft = PostStore.getCommentDraft(newProps.rootId); + this.setState({messageText: draft.message, uploadsInProgress: draft.uploadsInProgress, previews: draft.previews}); } - }, - getFileCount: function(channelId) { + } + getFileCount() { return this.state.previews.length + this.state.uploadsInProgress.length; - }, - render: function() { - var serverError = null; + } + render() { + let serverError = null; if (this.state.serverError) { serverError = ( <div className='form-group has-error'> @@ -203,22 +221,23 @@ module.exports = React.createClass({ ); } - var postError = null; + let postError = null; if (this.state.postError) { postError = <label className='control-label'>{this.state.postError}</label>; } - var preview = null; + let preview = null; if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) { preview = ( <FilePreview files={this.state.previews} onRemove={this.removePreview} - uploadsInProgress={this.state.uploadsInProgress} /> + uploadsInProgress={this.state.uploadsInProgress} + /> ); } - var postFooterClassName = 'post-create-footer'; + let postFooterClassName = 'post-create-footer'; if (postError) { postFooterClassName += ' has-error'; } @@ -226,7 +245,10 @@ module.exports = React.createClass({ return ( <form onSubmit={this.handleSubmit}> <div className='post-create'> - <div id={this.props.rootId} className='post-create-body comment-create-body'> + <div + id={this.props.rootId} + className='post-create-body comment-create-body' + > <Textbox onUserInput={this.handleUserInput} onKeyPress={this.commentMsgKeyPress} @@ -234,7 +256,8 @@ module.exports = React.createClass({ createMessage='Add a comment...' initialText='' id='reply_textbox' - ref='textbox' /> + ref='textbox' + /> <FileUpload ref='fileUpload' getFileCount={this.getFileCount} @@ -242,11 +265,20 @@ module.exports = React.createClass({ onFileUpload={this.handleFileUploadComplete} onUploadError={this.handleUploadError} postType='comment' - channelId={this.props.channelId} /> + channelId={this.props.channelId} + /> </div> - <MsgTyping channelId={this.props.channelId} parentId={this.props.rootId} /> + <MsgTyping + channelId={this.props.channelId} + parentId={this.props.rootId} + /> <div className={postFooterClassName}> - <input type='button' className='btn btn-primary comment-btn pull-right' value='Add Comment' onClick={this.handleSubmit} /> + <input + type='button' + className='btn btn-primary comment-btn pull-right' + value='Add Comment' + onClick={this.handleSubmit} + /> {postError} {serverError} </div> @@ -255,4 +287,9 @@ module.exports = React.createClass({ </form> ); } -}); +} + +CreateComment.propTypes = { + channelId: React.PropTypes.string.isRequired, + rootId: React.PropTypes.string.isRequired +}; diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index b9142223f..ce4ebac9e 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -1,33 +1,68 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); -var client = require('../utils/client.jsx'); -var AsyncClient = require('../utils/async_client.jsx'); -var ChannelStore = require('../stores/channel_store.jsx'); -var PostStore = require('../stores/post_store.jsx'); -var UserStore = require('../stores/user_store.jsx'); -var SocketStore = require('../stores/socket_store.jsx'); -var MsgTyping = require('./msg_typing.jsx'); -var Textbox = require('./textbox.jsx'); -var FileUpload = require('./file_upload.jsx'); -var FilePreview = require('./file_preview.jsx'); -var utils = require('../utils/utils.jsx'); - -var Constants = require('../utils/constants.jsx'); -var ActionTypes = Constants.ActionTypes; - -module.exports = React.createClass({ - displayName: 'CreatePost', - lastTime: 0, - handleSubmit: function(e) { +const AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); +const Client = require('../utils/client.jsx'); +const AsyncClient = require('../utils/async_client.jsx'); +const ChannelStore = require('../stores/channel_store.jsx'); +const PostStore = require('../stores/post_store.jsx'); +const UserStore = require('../stores/user_store.jsx'); +const SocketStore = require('../stores/socket_store.jsx'); +const MsgTyping = require('./msg_typing.jsx'); +const Textbox = require('./textbox.jsx'); +const FileUpload = require('./file_upload.jsx'); +const FilePreview = require('./file_preview.jsx'); +const Utils = require('../utils/utils.jsx'); + +const Constants = require('../utils/constants.jsx'); +const ActionTypes = Constants.ActionTypes; + +export default class CreatePost extends React.Component { + constructor(props) { + super(props); + + this.lastTime = 0; + + this.handleSubmit = this.handleSubmit.bind(this); + this.postMsgKeyPress = this.postMsgKeyPress.bind(this); + this.handleUserInput = this.handleUserInput.bind(this); + this.resizePostHolder = this.resizePostHolder.bind(this); + this.handleUploadStart = this.handleUploadStart.bind(this); + this.handleFileUploadComplete = this.handleFileUploadComplete.bind(this); + this.handleUploadError = this.handleUploadError.bind(this); + this.removePreview = this.removePreview.bind(this); + this.onChange = this.onChange.bind(this); + this.getFileCount = this.getFileCount.bind(this); + + PostStore.clearDraftUploads(); + + const draft = PostStore.getCurrentDraft(); + let previews = []; + let messageText = ''; + let uploadsInProgress = []; + if (draft && draft.previews && draft.message) { + previews = draft.previews; + messageText = draft.message; + uploadsInProgress = draft.uploadsInProgress; + } + + this.state = { + channelId: ChannelStore.getCurrentId(), + messageText: messageText, + uploadsInProgress: uploadsInProgress, + previews: previews, + submitting: false, + initialText: messageText + }; + } + handleSubmit(e) { e.preventDefault(); if (this.state.uploadsInProgress.length > 0 || this.state.submitting) { return; } - var post = {}; + let post = {}; post.filenames = []; post.message = this.state.messageText; @@ -36,18 +71,18 @@ module.exports = React.createClass({ } if (post.message.length > Constants.CHARACTER_LIMIT) { - this.setState({postError: 'Post length must be less than ' + Constants.CHARACTER_LIMIT + ' characters.'}); + this.setState({postError: `Post length must be less than ${Constants.CHARACTER_LIMIT} characters.`}); return; } this.setState({submitting: true, serverError: null}); if (post.message.indexOf('/') === 0) { - client.executeCommand( + Client.executeCommand( this.state.channelId, post.message, false, - function(data) { + function handleCommandSuccess(data) { PostStore.storeDraft(data.channel_id, null); this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); @@ -55,8 +90,8 @@ module.exports = React.createClass({ window.location.href = data.goto_location; } }.bind(this), - function(err) { - var state = {}; + function handleCommandError(err) { + let state = {}; state.serverError = err.message; state.submitting = false; this.setState(state); @@ -66,26 +101,26 @@ module.exports = React.createClass({ post.channel_id = this.state.channelId; post.filenames = this.state.previews; - var time = utils.getTimestamp(); - var userId = UserStore.getCurrentId(); - post.pending_post_id = userId + ':' + time; + const time = Utils.getTimestamp(); + const userId = UserStore.getCurrentId(); + post.pending_post_id = `${userId}:${time}`; post.user_id = userId; post.create_at = time; post.root_id = this.state.rootId; post.parent_id = this.state.parentId; - var channel = ChannelStore.get(this.state.channelId); + const channel = ChannelStore.get(this.state.channelId); PostStore.storePendingPost(post); PostStore.storeDraft(channel.id, null); this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); - client.createPost(post, channel, - function(data) { + Client.createPost(post, channel, + function handlePostSuccess(data) { this.resizePostHolder(); AsyncClient.getPosts(); - var member = ChannelStore.getMember(channel.id); + let member = ChannelStore.getMember(channel.id); member.msg_count = channel.total_msg_count; member.last_viewed_at = Date.now(); ChannelStore.setChannelMember(member); @@ -95,8 +130,8 @@ module.exports = React.createClass({ post: data }); }.bind(this), - function(err) { - var state = {}; + function handlePostError(err) { + let state = {}; if (err.message === 'Invalid RootId parameter') { if ($('#post_deleted').length > 0) { @@ -113,83 +148,83 @@ module.exports = React.createClass({ }.bind(this) ); } - }, - componentDidUpdate: function() { + } + componentDidUpdate() { this.resizePostHolder(); - }, - postMsgKeyPress: function(e) { + } + postMsgKeyPress(e) { if (e.which === 13 && !e.shiftKey && !e.altKey) { e.preventDefault(); - this.refs.textbox.getDOMNode().blur(); + React.findDOMNode(this.refs.textbox).blur(); this.handleSubmit(e); } - var t = Date.now(); + const t = Date.now(); if ((t - this.lastTime) > 5000) { - SocketStore.sendMessage({channel_id: this.state.channelId, action: 'typing', props: {'parent_id': ''}, state: {}}); + SocketStore.sendMessage({channel_id: this.state.channelId, action: 'typing', props: {parent_id: ''}, state: {}}); this.lastTime = t; } - }, - handleUserInput: function(messageText) { + } + handleUserInput(messageText) { this.resizePostHolder(); this.setState({messageText: messageText}); - var draft = PostStore.getCurrentDraft(); - draft['message'] = messageText; + let draft = PostStore.getCurrentDraft(); + draft.message = messageText; PostStore.storeCurrentDraft(draft); - }, - resizePostHolder: function() { - var height = $(window).height() - $(this.refs.topDiv.getDOMNode()).height() - $('#error_bar').outerHeight() - 50; - $('.post-list-holder-by-time').css('height', height + 'px'); + } + resizePostHolder() { + const height = $(window).height() - $(React.findDOMNode(this.refs.topDiv)).height() - $('#error_bar').outerHeight() - 50; + $('.post-list-holder-by-time').css('height', `${height}px`); $(window).trigger('resize'); - }, - handleUploadStart: function(clientIds, channelId) { - var draft = PostStore.getDraft(channelId); + } + handleUploadStart(clientIds, channelId) { + let draft = PostStore.getDraft(channelId); - draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds); + draft.uploadsInProgress = draft.uploadsInProgress.concat(clientIds); PostStore.storeDraft(channelId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress']}); - }, - handleFileUploadComplete: function(filenames, clientIds, channelId) { - var draft = PostStore.getDraft(channelId); + this.setState({uploadsInProgress: draft.uploadsInProgress}); + } + handleFileUploadComplete(filenames, clientIds, channelId) { + let draft = PostStore.getDraft(channelId); // remove each finished file from uploads - for (var i = 0; i < clientIds.length; i++) { - var index = draft['uploadsInProgress'].indexOf(clientIds[i]); + for (let i = 0; i < clientIds.length; i++) { + const index = draft.uploadsInProgress.indexOf(clientIds[i]); if (index !== -1) { - draft['uploadsInProgress'].splice(index, 1); + draft.uploadsInProgress.splice(index, 1); } } - draft['previews'] = draft['previews'].concat(filenames); + draft.previews = draft.previews.concat(filenames); PostStore.storeDraft(channelId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); - }, - handleUploadError: function(err, clientId) { + this.setState({uploadsInProgress: draft.uploadsInProgress, previews: draft.previews}); + } + handleUploadError(err, clientId) { if (clientId !== -1) { - var draft = PostStore.getDraft(this.state.channelId); + let draft = PostStore.getDraft(this.state.channelId); - var index = draft['uploadsInProgress'].indexOf(clientId); + const index = draft.uploadsInProgress.indexOf(clientId); if (index !== -1) { - draft['uploadsInProgress'].splice(index, 1); + draft.uploadsInProgress.splice(index, 1); } PostStore.storeDraft(this.state.channelId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); + this.setState({uploadsInProgress: draft.uploadsInProgress, serverError: err}); } else { this.setState({serverError: err}); } - }, - removePreview: function(id) { - var previews = this.state.previews; - var uploadsInProgress = this.state.uploadsInProgress; + } + removePreview(id) { + let previews = this.state.previews; + let uploadsInProgress = this.state.uploadsInProgress; // id can either be the path of an uploaded file or the client id of an in progress upload - var index = previews.indexOf(id); + let index = previews.indexOf(id); if (index !== -1) { previews.splice(index, 1); } else { @@ -201,28 +236,28 @@ module.exports = React.createClass({ } } - var draft = PostStore.getCurrentDraft(); - draft['previews'] = previews; - draft['uploadsInProgress'] = uploadsInProgress; + let draft = PostStore.getCurrentDraft(); + draft.previews = previews; + draft.uploadsInProgress = uploadsInProgress; PostStore.storeCurrentDraft(draft); this.setState({previews: previews, uploadsInProgress: uploadsInProgress}); - }, - componentDidMount: function() { - ChannelStore.addChangeListener(this._onChange); + } + componentDidMount() { + ChannelStore.addChangeListener(this.onChange); this.resizePostHolder(); - }, - componentWillUnmount: function() { - ChannelStore.removeChangeListener(this._onChange); - }, - _onChange: function() { - var channelId = ChannelStore.getCurrentId(); + } + componentWillUnmount() { + ChannelStore.removeChangeListener(this.onChange); + } + onChange() { + const channelId = ChannelStore.getCurrentId(); if (this.state.channelId !== channelId) { - var draft = PostStore.getCurrentDraft(); + let draft = PostStore.getCurrentDraft(); - var previews = []; - var messageText = ''; - var uploadsInProgress = []; + let previews = []; + let messageText = ''; + let uploadsInProgress = []; if (draft && draft.previews && draft.message) { previews = draft.previews; messageText = draft.message; @@ -231,33 +266,17 @@ module.exports = React.createClass({ this.setState({channelId: channelId, messageText: messageText, initialText: messageText, submitting: false, serverError: null, postError: null, previews: previews, uploadsInProgress: uploadsInProgress}); } - }, - getInitialState: function() { - PostStore.clearDraftUploads(); - - var draft = PostStore.getCurrentDraft(); - var previews = []; - var messageText = ''; - var uploadsInProgress = []; - if (draft && draft.previews && draft.message) { - previews = draft.previews; - messageText = draft.message; - uploadsInProgress = draft.uploadsInProgress; - } - - return {channelId: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews, submitting: false, initialText: messageText}; - }, - getFileCount: function(channelId) { + } + getFileCount(channelId) { if (channelId === this.state.channelId) { return this.state.previews.length + this.state.uploadsInProgress.length; - } else { - var draft = PostStore.getDraft(channelId); - - return draft['previews'].length + draft['uploadsInProgress'].length; } - }, - render: function() { - var serverError = null; + + const draft = PostStore.getDraft(channelId); + return draft.previews.length + draft.uploadsInProgress.length; + } + render() { + let serverError = null; if (this.state.serverError) { serverError = ( <div className='has-error'> @@ -266,12 +285,12 @@ module.exports = React.createClass({ ); } - var postError = null; + let postError = null; if (this.state.postError) { postError = <label className='control-label'>{this.state.postError}</label>; } - var preview = null; + let preview = null; if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) { preview = ( <FilePreview @@ -281,13 +300,18 @@ module.exports = React.createClass({ ); } - var postFooterClassName = 'post-create-footer'; + let postFooterClassName = 'post-create-footer'; if (postError) { postFooterClassName += ' has-error'; } return ( - <form id='create_post' ref='topDiv' role='form' onSubmit={this.handleSubmit}> + <form + id='create_post' + ref='topDiv' + role='form' + onSubmit={this.handleSubmit} + > <div className='post-create'> <div className='post-create-body'> <Textbox @@ -311,10 +335,13 @@ module.exports = React.createClass({ {postError} {serverError} {preview} - <MsgTyping channelId={this.state.channelId} parentId=''/> + <MsgTyping + channelId={this.state.channelId} + parentId='' + /> </div> </div> </form> ); } -}); +} diff --git a/web/react/components/delete_channel_modal.jsx b/web/react/components/delete_channel_modal.jsx index 589737271..4efb9cb23 100644 --- a/web/react/components/delete_channel_modal.jsx +++ b/web/react/components/delete_channel_modal.jsx @@ -1,58 +1,99 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var Client =require('../utils/client.jsx'); -var AsyncClient =require('../utils/async_client.jsx'); -var ChannelStore =require('../stores/channel_store.jsx') +const Client = require('../utils/client.jsx'); +const AsyncClient = require('../utils/async_client.jsx'); +const ChannelStore = require('../stores/channel_store.jsx'); -module.exports = React.createClass({ - handleDelete: function(e) { - if (this.state.channel_id.length != 26) return; +export default class DeleteChannelModal extends React.Component { + constructor(props) { + super(props); - Client.deleteChannel(this.state.channel_id, - function(data) { + this.handleDelete = this.handleDelete.bind(this); + + this.state = { + title: '', + channelId: '' + }; + } + handleDelete() { + if (this.state.channelId.length !== 26) { + return; + } + + Client.deleteChannel(this.state.channelId, + function handleDeleteSuccess() { AsyncClient.getChannels(true); window.location.href = '/'; - }.bind(this), - function(err) { - AsyncClient.dispatchError(err, "handleDelete"); - }.bind(this) + }, + function handleDeleteError(err) { + AsyncClient.dispatchError(err, 'handleDelete'); + } ); - }, - componentDidMount: function() { - var self = this; - $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { + } + componentDidMount() { + $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function handleShow(e) { var button = $(e.relatedTarget); - self.setState({ title: button.attr('data-title'), channel_id: button.attr('data-channelid') }); - }); - }, - getInitialState: function() { - return { title: "", channel_id: "" }; - }, - render: function() { - - var channelType = ChannelStore.getCurrent() && ChannelStore.getCurrent().type === 'P' ? "private group" : "channel" + this.setState({ + title: button.attr('data-title'), + channelId: button.attr('data-channelid') + }); + }.bind(this)); + } + render() { + const channel = ChannelStore.getCurrent(); + let channelType = 'channel'; + if (channel && channel.type === 'P') { + channelType = 'private group'; + } return ( - <div className="modal fade" ref="modal" id="delete_channel" role="dialog" tabIndex="-1" aria-hidden="true"> - <div className="modal-dialog"> - <div className="modal-content"> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title">Confirm DELETE Channel</h4> - </div> - <div className="modal-body"> - <p> - Are you sure you wish to delete the {this.state.title} {channelType}? - </p> - </div> - <div className="modal-footer"> - <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button> - <button type="button" className="btn btn-danger" data-dismiss="modal" onClick={this.handleDelete}>Delete</button> - </div> + <div + className='modal fade' + ref='modal' + id='delete_channel' + role='dialog' + tabIndex='-1' + aria-hidden='true' + > + <div className='modal-dialog'> + <div className='modal-content'> + <div className='modal-header'> + <button + type='button' + className='close' + data-dismiss='modal' + aria-label='Close' + > + <span aria-hidden='true'>×</span> + </button> + <h4 className='modal-title'>Confirm DELETE Channel</h4> + </div> + <div className='modal-body'> + <p> + Are you sure you wish to delete the {this.state.title} {channelType}? + </p> + </div> + <div className='modal-footer'> + <button + type='button' + className='btn btn-default' + data-dismiss='modal' + > + Cancel + </button> + <button + type='button' + className='btn btn-danger' + data-dismiss='modal' + onClick={this.handleDelete} + > + Delete + </button> + </div> + </div> </div> - </div> </div> ); } -}); +} diff --git a/web/react/components/delete_post_modal.jsx b/web/react/components/delete_post_modal.jsx index 55d6f509c..075f9c742 100644 --- a/web/react/components/delete_post_modal.jsx +++ b/web/react/components/delete_post_modal.jsx @@ -4,20 +4,28 @@ var Client = require('../utils/client.jsx'); var PostStore = require('../stores/post_store.jsx'); var BrowserStore = require('../stores/browser_store.jsx'); -var utils = require('../utils/utils.jsx'); +var Utils = require('../utils/utils.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; -module.exports = React.createClass({ - handleDelete: function(e) { - Client.deletePost(this.state.channel_id, this.state.post_id, - function(data) { - var selected_list = this.state.selectedList; - if (selected_list && selected_list.order && selected_list.order.length > 0) { - var selected_post = selected_list.posts[selected_list.order[0]]; - if ((selected_post.id === this.state.post_id && this.state.title === "Post") || selected_post.root_id === this.state.post_id) { +export default class DeletePostModal extends React.Component { + constructor(props) { + super(props); + + this.handleDelete = this.handleDelete.bind(this); + this.onListenerChange = this.onListenerChange.bind(this); + + this.state = {title: '', postId: '', channelId: '', selectedList: PostStore.getSelectedPost(), comments: 0}; + } + handleDelete() { + Client.deletePost(this.state.channelId, this.state.postId, + function deleteSuccess() { + var selectedList = this.state.selectedList; + if (selectedList && selectedList.order && selectedList.order.length > 0) { + var selectedPost = selectedList.posts[selectedList.order[0]]; + if ((selectedPost.id === this.state.postId && this.state.title === 'Post') || selectedPost.root_id === this.state.postId) { AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_SEARCH, results: null @@ -27,14 +35,14 @@ module.exports = React.createClass({ type: ActionTypes.RECIEVED_POST_SELECTED, results: null }); - } else if (selected_post.id === this.state.post_id && this.state.title === "Comment") { - if (selected_post.root_id && selected_post.root_id.length > 0 && selected_list.posts[selected_post.root_id]) { - selected_list.order = [selected_post.root_id]; - delete selected_list.posts[selected_post.id]; + } else if (selectedPost.id === this.state.postId && this.state.title === 'Comment') { + if (selectedPost.root_id && selectedPost.root_id.length > 0 && selectedList.posts[selectedPost.root_id]) { + selectedList.order = [selectedPost.root_id]; + delete selectedList.posts[selectedPost.id]; AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_POST_SELECTED, - post_list: selected_list + post_list: selectedList }); AppDispatcher.handleServerAction({ @@ -44,67 +52,97 @@ module.exports = React.createClass({ } } } - PostStore.removePost(this.state.post_id, this.state.channel_id); - AsyncClient.getPosts(this.state.channel_id); + PostStore.removePost(this.state.postId, this.state.channelId); + AsyncClient.getPosts(this.state.channelId); }.bind(this), - function(err) { - AsyncClient.dispatchError(err, "deletePost"); - }.bind(this) + function deleteFailed(err) { + AsyncClient.dispatchError(err, 'deletePost'); + } ); - }, - componentDidMount: function() { - var self = this; - $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { + } + componentDidMount() { + $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function freshOpen(e) { var newState = {}; - if(BrowserStore.getItem('edit_state_transfer')) { + if (BrowserStore.getItem('edit_state_transfer')) { newState = BrowserStore.getItem('edit_state_transfer'); BrowserStore.removeItem('edit_state_transfer'); } else { var button = e.relatedTarget; - newState = { title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), post_id: $(button).attr('data-postid'), comments: $(button).attr('data-comments') }; + newState = {title: $(button).attr('data-title'), channelId: $(button).attr('data-channelid'), postId: $(button).attr('data-postid'), comments: $(button).attr('data-comments')}; } - self.setState(newState); - }); - PostStore.addSelectedPostChangeListener(this._onChange); - }, - componentWillUnmount: function() { - PostStore.removeSelectedPostChangeListener(this._onChange); - }, - _onChange: function() { + this.setState(newState); + }.bind(this)); + PostStore.addSelectedPostChangeListener(this.onListenerChange); + } + componentWillUnmount() { + PostStore.removeSelectedPostChangeListener(this.onListenerChange); + } + onListenerChange() { var newList = PostStore.getSelectedPost(); - if (!utils.areStatesEqual(this.state.selectedList, newList)) { - this.setState({ selectedList: newList }); + if (!Utils.areStatesEqual(this.state.selectedList, newList)) { + this.setState({selectedList: newList}); + } + } + render() { + var error = null; + if (this.state.error) { + error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>; + } + + var commentWarning = ''; + if (this.state.comments > 0) { + commentWarning = 'This post has ' + this.state.comments + ' comment(s) on it.'; } - }, - getInitialState: function() { - return { title: "", post_id: "", channel_id: "", selectedList: PostStore.getSelectedPost(), comments: 0 }; - }, - render: function() { - var error = this.state.error ? <div className='form-group has-error'><label className='control-label'>{ this.state.error }</label></div> : null; return ( - <div className="modal fade" id="delete_post" ref="modal" role="dialog" tabIndex="-1" aria-hidden="true"> - <div className="modal-dialog modal-push-down"> - <div className="modal-content"> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title">Confirm {this.state.title} Delete</h4> + <div + className='modal fade' + id='delete_post' + ref='modal' + role='dialog' + tabIndex='-1' + aria-hidden='true' + > + <div className='modal-dialog modal-push-down'> + <div className='modal-content'> + <div className='modal-header'> + <button + type='button' + className='close' + data-dismiss='modal' + aria-label='Close' + > + <span aria-hidden='true'>×</span> + </button> + <h4 className='modal-title'>Confirm {this.state.title} Delete</h4> </div> - <div className="modal-body"> + <div className='modal-body'> Are you sure you want to delete the {this.state.title.toLowerCase()}? <br/> <br/> - { this.state.comments > 0 ? - "This post has " + this.state.comments + " comment(s) on it." - : "" } + {commentWarning} </div> - <div className="modal-footer"> - <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button> - <button type="button" className="btn btn-danger" data-dismiss="modal" onClick={this.handleDelete}>Delete</button> + {error} + <div className='modal-footer'> + <button + type='button' + className='btn btn-default' + data-dismiss='modal' + > + Cancel + </button> + <button + type='button' + className='btn btn-danger' + data-dismiss='modal' + onClick={this.handleDelete} + > + Delete + </button> </div> </div> </div> </div> ); } -}); +} diff --git a/web/react/components/edit_channel_modal.jsx b/web/react/components/edit_channel_modal.jsx index 76f0c2c4d..e93bab431 100644 --- a/web/react/components/edit_channel_modal.jsx +++ b/web/react/components/edit_channel_modal.jsx @@ -1,79 +1,142 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var Client = require('../utils/client.jsx'); -var AsyncClient = require('../utils/async_client.jsx'); +const Client = require('../utils/client.jsx'); +const AsyncClient = require('../utils/async_client.jsx'); -module.exports = React.createClass({ - handleEdit: function(e) { +export default class EditChannelModal extends React.Component { + constructor(props) { + super(props); + + this.handleEdit = this.handleEdit.bind(this); + this.handleUserInput = this.handleUserInput.bind(this); + this.handleClose = this.handleClose.bind(this); + + this.state = { + description: '', + title: '', + channelId: '', + serverError: '' + }; + } + handleEdit() { var data = {}; - data["channel_id"] = this.state.channel_id; - if (data["channel_id"].length !== 26) return; - data["channel_description"] = this.state.description.trim(); + data.channel_id = this.state.channelId; + + if (data.channel_id.length !== 26) { + return; + } + + data.channel_description = this.state.description.trim(); Client.updateChannelDesc(data, - function(data) { - this.setState({ server_error: "" }); - AsyncClient.getChannel(this.state.channel_id); - $(this.refs.modal.getDOMNode()).modal('hide'); + function handleUpdateSuccess() { + this.setState({serverError: ''}); + AsyncClient.getChannel(this.state.channelId); + $(React.findDOMNode(this.refs.modal)).modal('hide'); }.bind(this), - function(err) { - if (err.message === "Invalid channel_description parameter") { - this.setState({ server_error: "This description is too long, please enter a shorter one" }); - } - else { - this.setState({ server_error: err.message }); + function handleUpdateError(err) { + if (err.message === 'Invalid channel_description parameter') { + this.setState({serverError: 'This description is too long, please enter a shorter one'}); + } else { + this.setState({serverError: err.message}); } }.bind(this) ); - }, - handleUserInput: function(e) { - this.setState({ description: e.target.value }); - }, - handleClose: function() { - this.setState({description: "", server_error: ""}); - }, - componentDidMount: function() { - var self = this; - $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { - var button = e.relatedTarget; - self.setState({ description: $(button).attr('data-desc'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), server_error: "" }); - }); - $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', this.handleClose) - }, - componentWillUnmount: function() { - $(this.refs.modal.getDOMNode()).off('hidden.bs.modal', this.handleClose) - }, - getInitialState: function() { - return { description: "", title: "", channel_id: "" }; - }, - render: function() { - var server_error = this.state.server_error ? <div className='form-group has-error'><br/><label className='control-label'>{ this.state.server_error }</label></div> : null; + } + handleUserInput(e) { + this.setState({description: e.target.value}); + } + handleClose() { + this.setState({description: '', serverError: ''}); + } + componentDidMount() { + $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function handleShow(e) { + const button = e.relatedTarget; + this.setState({description: $(button).attr('data-desc'), title: $(button).attr('data-title'), channelId: $(button).attr('data-channelid'), serverError: ''}); + }.bind(this)); + $(React.findDOMNode(this.refs.modal)).on('hidden.bs.modal', this.handleClose); + } + componentWillUnmount() { + $(React.findDOMNode(this.refs.modal)).off('hidden.bs.modal', this.handleClose); + } + render() { + var serverError = null; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><br/><label className='control-label'>{this.state.serverError}</label></div>; + } - var editTitle = <h4 className='modal-title' ref='title'>Edit Description</h4>; + var editTitle = ( + <h4 + className='modal-title' + ref='title' + > + Edit Description + </h4> + ); if (this.state.title) { - editTitle = <h4 className='modal-title' ref='title'>Edit Description for <span className='name'>{this.state.title}</span></h4>; + editTitle = ( + <h4 + className='modal-title' + ref='title' + > + Edit Description for <span className='name'>{this.state.title}</span> + </h4> + ); } return ( - <div className="modal fade" ref="modal" id="edit_channel" role="dialog" tabIndex="-1" aria-hidden="true"> - <div className="modal-dialog"> - <div className="modal-content"> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - {editTitle} - </div> - <div className="modal-body"> - <textarea className="form-control no-resize" rows="6" ref="channelDesc" maxLength="1024" value={this.state.description} onChange={this.handleUserInput}></textarea> - { server_error } - </div> - <div className="modal-footer"> - <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button> - <button type="button" className="btn btn-primary" onClick={this.handleEdit}>Save</button> - </div> + <div + className='modal fade' + ref='modal' + id='edit_channel' + role='dialog' + tabIndex='-1' + aria-hidden='true' + > + <div className='modal-dialog'> + <div className='modal-content'> + <div className='modal-header'> + <button + type='button' + className='close' + data-dismiss='modal' + aria-label='Close' + > + <span aria-hidden='true'>×</span> + </button> + {editTitle} + </div> + <div className='modal-body'> + <textarea + className='form-control no-resize' + rows='6' + ref='channelDesc' + maxLength='1024' + value={this.state.description} + onChange={this.handleUserInput} + /> + {serverError} + </div> + <div className='modal-footer'> + <button + type='button' + className='btn btn-default' + data-dismiss='modal' + > + Cancel + </button> + <button + type='button' + className='btn btn-primary' + onClick={this.handleEdit} + > + Save + </button> + </div> + </div> </div> - </div> </div> ); } -}); +} diff --git a/web/react/components/edit_post_modal.jsx b/web/react/components/edit_post_modal.jsx index 1c5a1ed5e..fef60c715 100644 --- a/web/react/components/edit_post_modal.jsx +++ b/web/react/components/edit_post_modal.jsx @@ -3,13 +3,21 @@ var Client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); -var Constants = require('../utils/constants.jsx'); -var utils = require('../utils/utils.jsx'); var Textbox = require('./textbox.jsx'); var BrowserStore = require('../stores/browser_store.jsx'); -module.exports = React.createClass({ - handleEdit: function(e) { +export default class EditPostModal extends React.Component { + constructor() { + super(); + + this.handleEdit = this.handleEdit.bind(this); + this.handleEditInput = this.handleEditInput.bind(this); + this.handleEditKeyPress = this.handleEditKeyPress.bind(this); + this.handleUserInput = this.handleUserInput.bind(this); + + this.state = {editText: '', title: '', post_id: '', channel_id: '', comments: 0, refocusId: ''}; + } + handleEdit() { var updatedPost = {}; updatedPost.message = this.state.editText.trim(); @@ -17,8 +25,8 @@ module.exports = React.createClass({ var tempState = this.state; delete tempState.editText; BrowserStore.setItem('edit_state_transfer', tempState); - $("#edit_post").modal('hide'); - $("#delete_post").modal('show'); + $('#edit_post').modal('hide'); + $('#delete_post').modal('show'); return; } @@ -26,79 +34,102 @@ module.exports = React.createClass({ updatedPost.channel_id = this.state.channel_id; Client.updatePost(updatedPost, - function(data) { + function success() { AsyncClient.getPosts(this.state.channel_id); window.scrollTo(0, 0); }.bind(this), - function(err) { - AsyncClient.dispatchError(err, "updatePost"); - }.bind(this) + function error(err) { + AsyncClient.dispatchError(err, 'updatePost'); + } ); - $("#edit_post").modal('hide'); + $('#edit_post').modal('hide'); $(this.state.refocusId).focus(); - }, - handleEditInput: function(editMessage) { + } + handleEditInput(editMessage) { this.setState({editText: editMessage}); - }, - handleEditKeyPress: function(e) { - if (e.which == 13 && !e.shiftKey && !e.altKey) { + } + handleEditKeyPress(e) { + if (e.which === 13 && !e.shiftKey && !e.altKey) { e.preventDefault(); - this.refs.editbox.getDOMNode().blur(); + React.findDOMNode(this.refs.editbox).blur(); this.handleEdit(e); } - }, - handleUserInput: function(e) { - this.setState({ editText: e.target.value }); - }, - componentDidMount: function() { + } + handleUserInput(e) { + this.setState({editText: e.target.value}); + } + componentDidMount() { var self = this; - $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) { - self.setState({editText: "", title: "", channel_id: "", post_id: "", comments: 0, refocusId: "", error: ''}); + $(React.findDOMNode(this.refs.modal)).on('hidden.bs.modal', function onHidden() { + self.setState({editText: '', title: '', channel_id: '', post_id: '', comments: 0, refocusId: '', error: ''}); }); - $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { + $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function onShow(e) { var button = e.relatedTarget; - self.setState({ editText: $(button).attr('data-message'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), post_id: $(button).attr('data-postid'), comments: $(button).attr('data-comments'), refocusId: $(button).attr('data-refoucsid') }); + self.setState({editText: $(button).attr('data-message'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), post_id: $(button).attr('data-postid'), comments: $(button).attr('data-comments'), refocusId: $(button).attr('data-refoucsid')}); }); - $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function(e) { + $(React.findDOMNode(this.refs.modal)).on('shown.bs.modal', function onShown() { self.refs.editbox.resize(); }); - }, - getInitialState: function() { - return { editText: "", title: "", post_id: "", channel_id: "", comments: 0, refocusId: "" }; - }, - render: function() { - var error = this.state.error ? <div className='form-group has-error'><br /><label className='control-label'>{ this.state.error }</label></div> : <div className='form-group'><br /></div>; + } + render() { + var error = (<div className='form-group'><br /></div>); + if (this.state.error) { + error = (<div className='form-group has-error'><br /><label className='control-label'>{this.state.error}</label></div>); + } return ( - <div className="modal fade edit-modal" ref="modal" id="edit_post" role="dialog" tabIndex="-1" aria-hidden="true"> - <div className="modal-dialog modal-push-down"> - <div className="modal-content"> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close" onClick={this.handleEditClose}><span aria-hidden="true">×</span></button> - <h4 className="modal-title">Edit {this.state.title}</h4> - </div> - <div className="edit-modal-body modal-body"> - <Textbox - onUserInput={this.handleEditInput} - onKeyPress={this.handleEditKeyPress} - messageText={this.state.editText} - createMessage="Edit the post..." - id="edit_textbox" - ref="editbox" - /> - { error } - </div> - <div className="modal-footer"> - <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button> - <button type="button" className="btn btn-primary" onClick={this.handleEdit}>Save</button> - </div> + <div + className='modal fade edit-modal' + ref='modal' + id='edit_post' + role='dialog' + tabIndex='-1' + aria-hidden='true' > + <div className='modal-dialog modal-push-down'> + <div className='modal-content'> + <div className='modal-header'> + <button + type='button' + className='close' + data-dismiss='modal' + aria-label='Close' + onClick={this.handleEditClose}> + <span aria-hidden='true'>×</span> + </button> + <h4 className='modal-title'>Edit {this.state.title}</h4> + </div> + <div className='edit-modal-body modal-body'> + <Textbox + onUserInput={this.handleEditInput} + onKeyPress={this.handleEditKeyPress} + messageText={this.state.editText} + createMessage='Edit the post...' + id='edit_textbox' + ref='editbox' + /> + {error} + </div> + <div className='modal-footer'> + <button + type='button' + className='btn btn-default' + data-dismiss='modal' > + Cancel + </button> + <button + type='button' + className='btn btn-primary' + onClick={this.handleEdit}> + Save + </button> + </div> + </div> </div> - </div> </div> ); } -}); +} diff --git a/web/react/components/email_verify.jsx b/web/react/components/email_verify.jsx index 678eb9928..f2e91dd98 100644 --- a/web/react/components/email_verify.jsx +++ b/web/react/components/email_verify.jsx @@ -1,35 +1,58 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -module.exports = React.createClass({ - handleResend: function() { - window.location.href = window.location.href + "&resend=true" - }, - render: function() { - var title = ""; - var body = ""; - var resend = ""; - if (this.props.isVerified === "true") { - title = config.SiteName + " Email Verified"; - body = <p>Your email has been verified! Click <a href={this.props.teamURL + "?email=" + this.props.userEmail}>here</a> to log in.</p>; +export default class EmailVerify extends React.Component { + constructor(props) { + super(props); + + this.handleResend = this.handleResend.bind(this); + + this.state = {}; + } + handleResend() { + window.location.href = window.location.href + '&resend=true'; + } + render() { + var title = ''; + var body = ''; + var resend = ''; + if (this.props.isVerified === 'true') { + title = config.SiteName + ' Email Verified'; + body = <p>Your email has been verified! Click <a href={this.props.teamURL + '?email=' + this.props.userEmail}>here</a> to log in.</p>; } else { - title = config.SiteName + " Email Not Verified"; + title = config.SiteName + ' Email Not Verified'; body = <p>Please verify your email address. Check your inbox for an email.</p>; - resend = <button onClick={this.handleResend} className="btn btn-primary">Resend Email</button> + resend = (<button + onClick={this.handleResend} + className='btn btn-primary' + > + Resend Email + </button>); } return ( - <div className="col-sm-offset-4 col-sm-4"> - <div className="panel panel-default"> - <div className="panel-heading"> - <h3 className="panel-title">{ title }</h3> + <div className='col-sm-offset-4 col-sm-4'> + <div className='panel panel-default'> + <div className='panel-heading'> + <h3 className='panel-title'>{title}</h3> </div> - <div className="panel-body"> - { body } - { resend } + <div className='panel-body'> + {body} + {resend} </div> </div> </div> ); } -}); +} + +EmailVerify.defaultProps = { + isVerified: 'false', + teamURL: '', + userEmail: '' +}; +EmailVerify.propTypes = { + isVerified: React.PropTypes.string, + teamURL: React.PropTypes.string, + userEmail: React.PropTypes.string +}; diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx index f7514a009..95f3e572c 100644 --- a/web/react/components/error_bar.jsx +++ b/web/react/components/error_bar.jsx @@ -7,32 +7,40 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; -function getStateFromStores() { - var error = ErrorStore.getLastError(); - if (error && error.message !== "There appears to be a problem with your internet connection") { - return { message: error.message }; - } else { - return { message: null }; - } -} +export default class ErrorBar extends React.Component { + constructor() { + super(); -module.exports = React.createClass({ - displayName: 'ErrorBar', + this.onErrorChange = this.onErrorChange.bind(this); + this.handleClose = this.handleClose.bind(this); - componentDidMount: function() { - ErrorStore.addChangeListener(this._onChange); + this.state = this.getStateFromStores(); + if (this.state.message) { + setTimeout(this.handleClose, 10000); + } + } + getStateFromStores() { + var error = ErrorStore.getLastError(); + if (!error || error.message === 'There appears to be a problem with your internet connection') { + return {message: null}; + } + + return {message: error.message}; + } + componentDidMount() { + ErrorStore.addChangeListener(this.onErrorChange); $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight()); - $(window).resize(function() { + $(window).resize(function onResize() { if (this.state.message) { $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight()); } }.bind(this)); - }, - componentWillUnmount: function() { - ErrorStore.removeChangeListener(this._onChange); - }, - _onChange: function() { - var newState = getStateFromStores(); + } + componentWillUnmount() { + ErrorStore.removeChangeListener(this.onErrorChange); + } + onErrorChange() { + var newState = this.getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { if (newState.message) { setTimeout(this.handleClose, 10000); @@ -40,9 +48,11 @@ module.exports = React.createClass({ this.setState(newState); } - }, - handleClose: function(e) { - if (e) e.preventDefault(); + } + handleClose(e) { + if (e) { + e.preventDefault(); + } AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_ERROR, @@ -50,24 +60,22 @@ module.exports = React.createClass({ }); $('body').css('padding-top', '0'); - }, - getInitialState: function() { - var state = getStateFromStores(); - if (state.message) { - setTimeout(this.handleClose, 10000); - } - return state; - }, - render: function() { + } + render() { if (this.state.message) { return ( - <div className="error-bar"> + <div className='error-bar'> <span>{this.state.message}</span> - <a href="#" className="error-bar__close" onClick={this.handleClose}>×</a> + <a + href='#' + className='error-bar__close' + onClick={this.handleClose}> + × + </a> </div> ); - } else { - return <div/>; } + + return <div/>; } -});
\ No newline at end of file +} diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx index 45e6c5e28..d07afbc2b 100644 --- a/web/react/components/file_attachment.jsx +++ b/web/react/components/file_attachment.jsx @@ -5,31 +5,24 @@ var utils = require('../utils/utils.jsx'); var Client = require('../utils/client.jsx'); var Constants = require('../utils/constants.jsx'); -module.exports = React.createClass({ - displayName: "FileAttachment", - canSetState: false, - propTypes: { - // a list of file pathes displayed by the parent FileAttachmentList - filename: React.PropTypes.string.isRequired, - // the index of this attachment preview in the parent FileAttachmentList - index: React.PropTypes.number.isRequired, - // the identifier of the modal dialog used to preview files - modalId: React.PropTypes.string.isRequired, - // handler for when the thumbnail is clicked - handleImageClick: React.PropTypes.func - }, - getInitialState: function() { - return {fileSize: -1}; - }, - componentDidMount: function() { +export default class FileAttachment extends React.Component { + constructor(props) { + super(props); + + this.loadFiles = this.loadFiles.bind(this); + + this.canSetState = false; + this.state = {fileSize: -1}; + } + componentDidMount() { this.loadFiles(); - }, - componentDidUpdate: function(prevProps) { + } + componentDidUpdate(prevProps) { if (this.props.filename !== prevProps.filename) { this.loadFiles(); } - }, - loadFiles: function() { + } + loadFiles() { this.canSetState = true; var filename = this.props.filename; @@ -39,91 +32,92 @@ module.exports = React.createClass({ var type = utils.getFileType(fileInfo.ext); // This is a temporary patch to fix issue with old files using absolute paths - if (fileInfo.path.indexOf("/api/v1/files/get") != -1) { - fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1]; + if (fileInfo.path.indexOf('/api/v1/files/get') !== -1) { + fileInfo.path = fileInfo.path.split('/api/v1/files/get')[1]; } - fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path; - - if (type === "image") { - var self = this; - $('<img/>').attr('src', fileInfo.path+'_thumb.jpg').load(function(path, name){ return function() { - $(this).remove(); - if (name in self.refs) { - var imgDiv = self.refs[name].getDOMNode(); - - $(imgDiv).removeClass('post__load'); - $(imgDiv).addClass('post__image'); - - var width = this.width || $(this).width(); - var height = this.height || $(this).height(); - - if (width < Constants.THUMBNAIL_WIDTH - && height < Constants.THUMBNAIL_HEIGHT) { - $(imgDiv).addClass('small'); - } else { - $(imgDiv).addClass('normal'); + fileInfo.path = utils.getWindowLocationOrigin() + '/api/v1/files/get' + fileInfo.path; + + if (type === 'image') { + var self = this; // Need this reference since we use the given "this" + $('<img/>').attr('src', fileInfo.path + '_thumb.jpg').load(function loadWrapper(path, name) { + return function loader() { + $(this).remove(); + if (name in self.refs) { + var imgDiv = React.findDOMNode(self.refs[name]); + + $(imgDiv).removeClass('post__load'); + $(imgDiv).addClass('post__image'); + + var width = this.width || $(this).width(); + var height = this.height || $(this).height(); + + if (width < Constants.THUMBNAIL_WIDTH && + height < Constants.THUMBNAIL_HEIGHT) { + $(imgDiv).addClass('small'); + } else { + $(imgDiv).addClass('normal'); + } + + var re1 = new RegExp(' ', 'g'); + var re2 = new RegExp('\\(', 'g'); + var re3 = new RegExp('\\)', 'g'); + var url = path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29'); + $(imgDiv).css('background-image', 'url(' + url + '_thumb.jpg)'); } - - var re1 = new RegExp(' ', 'g'); - var re2 = new RegExp('\\(', 'g'); - var re3 = new RegExp('\\)', 'g'); - var url = path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29'); - $(imgDiv).css('background-image', 'url('+url+'_thumb.jpg)'); - } - }}(fileInfo.path, filename)); + }; }(fileInfo.path, filename)); } } - }, - componentWillUnmount: function() { + } + componentWillUnmount() { // keep track of when this component is mounted so that we can asynchronously change state without worrying about whether or not we're mounted this.canSetState = false; - }, - shouldComponentUpdate: function(nextProps, nextState) { + } + shouldComponentUpdate(nextProps, nextState) { if (!utils.areStatesEqual(nextProps, this.props)) { return true; } // the only time this object should update is when it receives an updated file size which we can usually handle without re-rendering - if (nextState.fileSize != this.state.fileSize) { + if (nextState.fileSize !== this.state.fileSize) { if (this.refs.fileSize) { // update the UI element to display the file size without re-rendering the whole component - this.refs.fileSize.getDOMNode().innerHTML = utils.fileSizeToString(nextState.fileSize); + React.findDOMNode(this.refs.fileSize).innerHTML = utils.fileSizeToString(nextState.fileSize); return false; - } else { - // we can't find the element that should hold the file size so we must not have rendered yet - return true; } - } else { + + // we can't find the element that should hold the file size so we must not have rendered yet return true; } - }, - render: function() { + + return true; + } + render() { var filename = this.props.filename; var fileInfo = utils.splitFileLocation(filename); var type = utils.getFileType(fileInfo.ext); var thumbnail; - if (type === "image") { - thumbnail = <div ref={filename} className="post__load" style={{backgroundImage: 'url(/static/images/load.gif)'}}/>; + if (type === 'image') { + thumbnail = (<div + ref={filename} + className='post__load' + style={{backgroundImage: 'url(/static/images/load.gif)'}} />); } else { - thumbnail = <div className={"file-icon "+utils.getIconClassName(type)}/>; + thumbnail = <div className={'file-icon ' + utils.getIconClassName(type)}/>; } - var fileSizeString = ""; + var fileSizeString = ''; if (this.state.fileSize < 0) { - var self = this; - Client.getFileInfo( filename, - function(data) { - if (self.canSetState) { - self.setState({fileSize: parseInt(data["size"], 10)}); + function success(data) { + if (this.canSetState) { + this.setState({fileSize: parseInt(data.size, 10)}); } - }, - function(err) { - } + }.bind(this), + function error() {} ); } else { fileSizeString = utils.fileSizeToString(this.state.fileSize); @@ -132,25 +126,51 @@ module.exports = React.createClass({ var filenameString = decodeURIComponent(utils.getFileName(filename)); var trimmedFilename; if (filenameString.length > 35) { - trimmedFilename = filenameString.substring(0, Math.min(35, filenameString.length)) + "..."; + trimmedFilename = filenameString.substring(0, Math.min(35, filenameString.length)) + '...'; } else { trimmedFilename = filenameString; } return ( - <div className="post-image__column" key={filename}> - <a className="post-image__thumbnail" href="#" onClick={this.props.handleImageClick} - data-img-id={this.props.index} data-toggle="modal" data-target={"#" + this.props.modalId }> + <div + className='post-image__column' + key={filename}> + <a className='post-image__thumbnail' + href='#' + onClick={this.props.handleImageClick} + data-img-id={this.props.index} + data-toggle='modal' + data-target={'#' + this.props.modalId} > {thumbnail} </a> - <div className="post-image__details"> - <div data-toggle="tooltip" title={filenameString} className="post-image__name">{trimmedFilename}</div> + <div className='post-image__details'> + <div + data-toggle='tooltip' + title={filenameString} + className='post-image__name' > + {trimmedFilename} + </div> <div> - <span className="post-image__type">{fileInfo.ext.toUpperCase()}</span> - <span className="post-image__size">{fileSizeString}</span> + <span className='post-image__type'>{fileInfo.ext.toUpperCase()}</span> + <span className='post-image__size'>{fileSizeString}</span> </div> </div> </div> ); } -}); +} + +FileAttachment.propTypes = { + + // a list of file pathes displayed by the parent FileAttachmentList + filename: React.PropTypes.string.isRequired, + + // the index of this attachment preview in the parent FileAttachmentList + index: React.PropTypes.number.isRequired, + + // the identifier of the modal dialog used to preview files + modalId: React.PropTypes.string.isRequired, + + // handler for when the thumbnail is clicked + handleImageClick: React.PropTypes.func +}; diff --git a/web/react/components/file_attachment_list.jsx b/web/react/components/file_attachment_list.jsx index df4424d03..33643de73 100644 --- a/web/react/components/file_attachment_list.jsx +++ b/web/react/components/file_attachment_list.jsx @@ -5,33 +5,30 @@ var ViewImageModal = require('./view_image.jsx'); var FileAttachment = require('./file_attachment.jsx'); var Constants = require('../utils/constants.jsx'); -module.exports = React.createClass({ - displayName: "FileAttachmentList", - propTypes: { - // a list of file pathes displayed by this - filenames: React.PropTypes.arrayOf(React.PropTypes.string).isRequired, - // the identifier of the modal dialog used to preview files - modalId: React.PropTypes.string.isRequired, - // the channel that this is part of - channelId: React.PropTypes.string, - // the user that owns the post that this is attached to - userId: React.PropTypes.string - }, - getInitialState: function() { - return {startImgId: 0}; - }, - render: function() { +export default class FileAttachmentList extends React.Component { + constructor(props) { + super(props); + this.state = {startImgId: 0}; + } + render() { var filenames = this.props.filenames; var modalId = this.props.modalId; var postFiles = []; for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) { - postFiles.push(<FileAttachment key={i} filename={filenames[i]} index={i} modalId={modalId} handleImageClick={this.handleImageClick} />); + postFiles.push( + <FileAttachment + key={i} + filename={filenames[i]} + index={i} + modalId={modalId} + handleImageClick={this.handleImageClick} /> + ); } return ( <div> - <div className="post-image__columns"> + <div className='post-image__columns'> {postFiles} </div> <ViewImageModal @@ -42,8 +39,23 @@ module.exports = React.createClass({ filenames={filenames} /> </div> ); - }, - handleImageClick: function(e) { - this.setState({startImgId: parseInt($(e.target.parentNode).attr('data-img-id'))}); } -}); + handleImageClick(e) { + this.setState({startImgId: parseInt($(e.target.parentNode).attr('data-img-id'), 10)}); + } +} + +FileAttachmentList.propTypes = { + + // a list of file pathes displayed by this + filenames: React.PropTypes.arrayOf(React.PropTypes.string).isRequired, + + // the identifier of the modal dialog used to preview files + modalId: React.PropTypes.string.isRequired, + + // the channel that this is part of + channelId: React.PropTypes.string, + + // the user that owns the post that this is attached to + userId: React.PropTypes.string +}; diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx index d1b2f734a..33382a439 100644 --- a/web/react/components/file_preview.jsx +++ b/web/react/components/file_preview.jsx @@ -1,14 +1,17 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var UserStore = require('../stores/user_store.jsx'); -var ChannelStore = require('../stores/channel_store.jsx'); -var client = require('../utils/client.jsx'); -var utils = require('../utils/utils.jsx'); -var Constants = require('../utils/constants.jsx'); +var Utils = require('../utils/utils.jsx'); -module.exports = React.createClass({ - handleRemove: function(e) { +export default class FilePreview extends React.Component { + constructor(props) { + super(props); + + this.handleRemove = this.handleRemove.bind(this); + + this.state = {}; + } + handleRemove(e) { var previewDiv = e.target.parentNode.parentNode; if (previewDiv.hasAttribute('data-filename')) { @@ -16,51 +19,96 @@ module.exports = React.createClass({ } else if (previewDiv.hasAttribute('data-client-id')) { this.props.onRemove(previewDiv.getAttribute('data-client-id')); } - }, - render: function() { + } + render() { var previews = []; - this.props.files.forEach(function(filename) { - + this.props.files.forEach(function setupPreview(fullFilename) { + var filename = fullFilename; var originalFilename = filename; var filenameSplit = filename.split('.'); - var ext = filenameSplit[filenameSplit.length-1]; - var type = utils.getFileType(ext); + var ext = filenameSplit[filenameSplit.length - 1]; + var type = Utils.getFileType(ext); + // This is a temporary patch to fix issue with old files using absolute paths - if (filename.indexOf("/api/v1/files/get") != -1) { - filename = filename.split("/api/v1/files/get")[1]; + + if (filename.indexOf('/api/v1/files/get') !== -1) { + filename = filename.split('/api/v1/files/get')[1]; } - filename = utils.getWindowLocationOrigin() + "/api/v1/files/get" + filename; + filename = Utils.getWindowLocationOrigin() + '/api/v1/files/get' + filename; - if (type === "image") { + if (type === 'image') { previews.push( - <div key={filename} className="preview-div" data-filename={originalFilename}> - <img className="preview-img" src={filename}/> - <a className="remove-preview" onClick={this.handleRemove}><i className="glyphicon glyphicon-remove"/></a> + <div + key={filename} + className='preview-div' + data-filename={originalFilename} + > + <img + className='preview-img' + src={filename} + /> + <a + className='remove-preview' + onClick={this.handleRemove} + > + <i className='glyphicon glyphicon-remove'/> + </a> </div> ); } else { previews.push( - <div key={filename} className="preview-div custom-file" data-filename={originalFilename}> - <div className={"file-icon "+utils.getIconClassName(type)}/> - <a className="remove-preview" onClick={this.handleRemove}><i className="glyphicon glyphicon-remove"/></a> + <div + key={filename} + className='preview-div custom-file' + data-filename={originalFilename} + > + <div className={'file-icon ' + Utils.getIconClassName(type)}/> + <a + className='remove-preview' + onClick={this.handleRemove} + > + <i className='glyphicon glyphicon-remove'/> + </a> </div> ); } }.bind(this)); - this.props.uploadsInProgress.forEach(function(clientId) { + this.props.uploadsInProgress.forEach(function addUploadsInProgress(clientId) { previews.push( - <div className="preview-div" data-client-id={clientId}> - <img className="spinner" src="/static/images/load.gif"/> - <a className="remove-preview" onClick={this.handleRemove}><i className="glyphicon glyphicon-remove"/></a> + <div + key={clientId} + className='preview-div' + data-client-id={clientId} + > + <img + className='spinner' + src='/static/images/load.gif' + /> + <a + className='remove-preview' + onClick={this.handleRemove} + > + <i className='glyphicon glyphicon-remove'/> + </a> </div> ); }.bind(this)); return ( - <div className="preview-container"> + <div className='preview-container'> {previews} </div> ); } -}); +} + +FilePreview.defaultProps = { + files: null, + uploadsInProgress: null +}; +FilePreview.propTypes = { + onRemove: React.PropTypes.func.isRequired, + files: React.PropTypes.array, + uploadsInProgress: React.PropTypes.array +}; diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx index f35556371..265924206 100644 --- a/web/react/components/file_upload_overlay.jsx +++ b/web/react/components/file_upload_overlay.jsx @@ -1,12 +1,8 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -module.exports = React.createClass({ - displayName: 'FileUploadOverlay', - propTypes: { - overlayType: React.PropTypes.string - }, - render: function() { +export default class FileUploadOverlay extends React.Component { + render() { var overlayClass = 'file-overlay hidden'; if (this.props.overlayType === 'right') { overlayClass += ' right-file-overlay'; @@ -23,4 +19,8 @@ module.exports = React.createClass({ </div> ); } -}); +} + +FileUploadOverlay.propTypes = { + overlayType: React.PropTypes.string +}; diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx index 28dd64c39..f87e77ff7 100644 --- a/web/react/components/login.jsx +++ b/web/react/components/login.jsx @@ -1,11 +1,11 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var utils = require('../utils/utils.jsx'); -var client = require('../utils/client.jsx'); -var UserStore = require('../stores/user_store.jsx'); -var BrowserStore = require('../stores/browser_store.jsx'); -var Constants = require('../utils/constants.jsx'); +const Utils = require('../utils/utils.jsx'); +const Client = require('../utils/client.jsx'); +const UserStore = require('../stores/user_store.jsx'); +const BrowserStore = require('../stores/browser_store.jsx'); +const Constants = require('../utils/constants.jsx'); export default class Login extends React.Component { constructor(props) { @@ -17,23 +17,23 @@ export default class Login extends React.Component { } handleSubmit(e) { e.preventDefault(); - var state = {}; + let state = {}; - var name = this.props.teamName; + const name = this.props.teamName; if (!name) { state.serverError = 'Bad team name'; this.setState(state); return; } - var email = this.refs.email.getDOMNode().value.trim(); + const email = React.findDOMNode(this.refs.email).value.trim(); if (!email) { state.serverError = 'An email is required'; this.setState(state); return; } - var password = this.refs.password.getDOMNode().value.trim(); + const password = React.findDOMNode(this.refs.password).value.trim(); if (!password) { state.serverError = 'A password is required'; this.setState(state); @@ -49,12 +49,12 @@ export default class Login extends React.Component { state.serverError = ''; this.setState(state); - client.loginByEmail(name, email, password, + Client.loginByEmail(name, email, password, function loggedIn(data) { UserStore.setCurrentUser(data); UserStore.setLastEmail(email); - var redirect = utils.getUrlParameter('redirect'); + const redirect = Utils.getUrlParameter('redirect'); if (redirect) { window.location.href = decodeURIComponent(redirect); } else { @@ -73,31 +73,31 @@ export default class Login extends React.Component { ); } render() { - var serverError; + let serverError; if (this.state.serverError) { serverError = <label className='control-label'>{this.state.serverError}</label>; } - var priorEmail = UserStore.getLastEmail(); + let priorEmail = UserStore.getLastEmail(); - var emailParam = utils.getUrlParameter('email'); + const emailParam = Utils.getUrlParameter('email'); if (emailParam) { priorEmail = decodeURIComponent(emailParam); } - var teamDisplayName = this.props.teamDisplayName; - var teamName = this.props.teamName; + const teamDisplayName = this.props.teamDisplayName; + const teamName = this.props.teamName; - var focusEmail = false; - var focusPassword = false; + let focusEmail = false; + let focusPassword = false; if (priorEmail !== '') { focusPassword = true; } else { focusEmail = true; } - var authServices = JSON.parse(this.props.authServices); + const authServices = JSON.parse(this.props.authServices); - var loginMessage = []; + let loginMessage = []; if (authServices.indexOf(Constants.GITLAB_SERVICE) !== -1) { loginMessage.push( <a @@ -110,12 +110,12 @@ export default class Login extends React.Component { ); } - var errorClass = ''; + let errorClass = ''; if (serverError) { errorClass = ' has-error'; } - var emailSignup; + let emailSignup; if (authServices.indexOf(Constants.EMAIL_SERVICE) !== -1) { emailSignup = ( <div> @@ -163,7 +163,7 @@ export default class Login extends React.Component { ); } - var forgotPassword; + let forgotPassword; if (emailSignup) { forgotPassword = ( <div className='form-group'> diff --git a/web/react/components/member_list_item.jsx b/web/react/components/member_list_item.jsx index a5279909b..d244939f5 100644 --- a/web/react/components/member_list_item.jsx +++ b/web/react/components/member_list_item.jsx @@ -1,64 +1,116 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var ChannelStore = require('../stores/channel_store.jsx'); var UserStore = require('../stores/user_store.jsx'); -module.exports = React.createClass({ - displayName: 'MemberListItem', - handleInvite: function(e) { +export default class MemberListItem extends React.Component { + constructor(props) { + super(props); + + this.handleInvite = this.handleInvite.bind(this); + this.handleRemove = this.handleRemove.bind(this); + this.handleMakeAdmin = this.handleMakeAdmin.bind(this); + } + handleInvite(e) { e.preventDefault(); this.props.handleInvite(this.props.member.id); - }, - handleRemove: function(e) { + } + handleRemove(e) { e.preventDefault(); this.props.handleRemove(this.props.member.id); - }, - handleMakeAdmin: function(e) { + } + handleMakeAdmin(e) { e.preventDefault(); this.props.handleMakeAdmin(this.props.member.id); - }, - render: function() { - + } + render() { var member = this.props.member; var isAdmin = this.props.isAdmin; - var isMemberAdmin = member.roles.indexOf("admin") > -1; + var isMemberAdmin = member.roles.indexOf('admin') > -1; var timestamp = UserStore.getCurrentUser().update_at; var invite; if (member.invited && this.props.handleInvite) { - invite = <span className="member-role">Added</span>; + invite = <span className='member-role'>Added</span>; } else if (this.props.handleInvite) { - invite = <a onClick={this.handleInvite} className="btn btn-sm btn-primary member-invite"><i className="glyphicon glyphicon-envelope"/> Add</a>; - } else if (isAdmin && !isMemberAdmin && (member.id != UserStore.getCurrentId())) { + invite = ( + <a + onClick={this.handleInvite} + className='btn btn-sm btn-primary member-invite'> + <i className='glyphicon glyphicon-envelope'/> Add + </a> + ); + } else if (isAdmin && !isMemberAdmin && (member.id !== UserStore.getCurrentId())) { var self = this; + + let makeAdminOption = null; + if (makeAdminOption) { + makeAdminOption = ( + <li role='presentation'> + <a + href='' + role='menuitem' + onClick={self.handleMakeAdmin}>Make Admin + </a> + </li>); + } + + let handleRemoveOption = null; + if (handleRemoveOption) { + handleRemoveOption = ( + <li role='presentation'> + <a + href='' + role='menuitem' + onClick={self.handleRemove}>Remove Member + </a> + </li>); + } + invite = ( - <div className="dropdown member-drop"> - <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true"> - <span className="text-capitalize">{member.roles || 'Member'} </span> - <span className="caret"></span> + <div className='dropdown member-drop'> + <a + href='#' + className='dropdown-toggle theme' + type='button' + id='channel_header_dropdown' + data-toggle='dropdown' + aria-expanded='true' > + <span className='text-capitalize'>{member.roles || 'Member'} </span> + <span className='caret'></span> </a> - <ul className="dropdown-menu member-menu" role="menu" aria-labelledby="channel_header_dropdown"> - { this.props.handleMakeAdmin ? - <li role="presentation"><a href="" role="menuitem" onClick={self.handleMakeAdmin}>Make Admin</a></li> - : null } - { this.props.handleRemove ? - <li role="presentation"><a href="" role="menuitem" onClick={self.handleRemove}>Remove Member</a></li> - : null } + <ul + className='dropdown-menu member-menu' + role='menu' + aria-labelledby='channel_header_dropdown'> + {makeAdminOption} + {handleRemoveOption} </ul> </div> ); } else { - invite = <div className="member-role text-capitalize">{member.roles || 'Member'}<span className="caret hidden"></span></div>; + invite = <div className='member-role text-capitalize'>{member.roles || 'Member'}<span className='caret hidden'></span></div>; } return ( - <div className="row member-div"> - <img className="post-profile-img pull-left" src={"/api/v1/users/" + member.id + "/image?time=" + timestamp} height="36" width="36" /> - <span className="member-name">{member.username}</span> - <span className="member-email">{member.email}</span> - { invite } + <div className='row member-div'> + <img + className='post-profile-img pull-left' + src={'/api/v1/users/' + member.id + '/image?time=' + timestamp} + height='36' + width='36' /> + <span className='member-name'>{member.username}</span> + <span className='member-email'>{member.email}</span> + {invite} </div> ); } -}); +} + +MemberListItem.propTypes = { + handleInvite: React.PropTypes.func, + handleRemove: React.PropTypes.func, + handleMakeAdmin: React.PropTypes.func, + member: React.PropTypes.object, + isAdmin: React.PropTypes.bool +}; diff --git a/web/react/components/member_list_team.jsx b/web/react/components/member_list_team.jsx index cb48e5cc5..064330c8d 100644 --- a/web/react/components/member_list_team.jsx +++ b/web/react/components/member_list_team.jsx @@ -1,122 +1,27 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var ChannelStore = require('../stores/channel_store.jsx'); -var UserStore = require('../stores/user_store.jsx'); -var Client = require('../utils/client.jsx'); -var AsyncClient = require('../utils/async_client.jsx'); -var utils = require('../utils/utils.jsx'); - -var MemberListTeamItem = React.createClass({ - handleMakeMember: function() { - var data = {}; - data["user_id"] = this.props.user.id; - data["new_roles"] = ""; - - Client.updateRoles(data, - function(data) { - AsyncClient.getProfiles(); - }.bind(this), - function(err) { - this.setState({ server_error: err.message }); - }.bind(this) - ); - }, - handleMakeActive: function() { - Client.updateActive(this.props.user.id, true, - function(data) { - AsyncClient.getProfiles(); - }.bind(this), - function(err) { - this.setState({ server_error: err.message }); - }.bind(this) - ); - }, - handleMakeNotActive: function() { - Client.updateActive(this.props.user.id, false, - function(data) { - AsyncClient.getProfiles(); - }.bind(this), - function(err) { - this.setState({ server_error: err.message }); - }.bind(this) - ); - }, - handleMakeAdmin: function() { - var data = {}; - data["user_id"] = this.props.user.id; - data["new_roles"] = "admin"; - - Client.updateRoles(data, - function(data) { - AsyncClient.getProfiles(); - }.bind(this), - function(err) { - this.setState({ server_error: err.message }); - }.bind(this) - ); - }, - getInitialState: function() { - return {}; - }, - render: function() { - var server_error = this.state.server_error ? <div className="has-error"><label className='has-error control-label'>{this.state.server_error}</label></div> : null; - var user = this.props.user; - var currentRoles = "Member"; - var timestamp = UserStore.getCurrentUser().update_at; - - if (user.roles.length > 0) { - currentRoles = user.roles.charAt(0).toUpperCase() + user.roles.slice(1); - } - - var email = user.email.length > 0 ? user.email : ""; - var showMakeMember = user.roles == "admin"; - var showMakeAdmin = user.roles == ""; - var showMakeActive = false; - var showMakeNotActive = true; - - if (user.delete_at > 0) { - currentRoles = "Inactive"; - showMakeMember = false; - showMakeAdmin = false; - showMakeActive = true; - showMakeNotActive = false; - } +const MemberListTeamItem = require('./member_list_team_item.jsx'); + +export default class MemberListTeam extends React.Component { + render() { + const memberList = this.props.users.map(function makeListItem(user) { + return ( + <MemberListTeamItem + key={user.id} + user={user} + /> + ); + }, this); return ( - <div className="row member-div"> - <img className="post-profile-img pull-left" src={"/api/v1/users/" + user.id + "/image?time=" + timestamp} height="36" width="36" /> - <span className="member-name">{utils.getDisplayName(user)}</span> - <span className="member-email">{email}</span> - <div className="dropdown member-drop"> - <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true"> - <span>{currentRoles} </span> - <span className="caret"></span> - </a> - <ul className="dropdown-menu member-menu" role="menu" aria-labelledby="channel_header_dropdown"> - { showMakeAdmin ? <li role="presentation"><a role="menuitem" href="#" onClick={this.handleMakeAdmin}>Make Admin</a></li> : "" } - { showMakeMember ? <li role="presentation"><a role="menuitem" href="#" onClick={this.handleMakeMember}>Make Member</a></li> : "" } - { showMakeActive ? <li role="presentation"><a role="menuitem" href="#" onClick={this.handleMakeActive}>Make Active</a></li> : "" } - { showMakeNotActive ? <li role="presentation"><a role="menuitem" href="#" onClick={this.handleMakeNotActive}>Make Inactive</a></li> : "" } - </ul> - </div> - { server_error } + <div className='member-list-holder'> + {memberList} </div> ); } -}); +} - -module.exports = React.createClass({ - render: function() { - return ( - <div className="member-list-holder"> - { - this.props.users.map(function(user) { - return <MemberListTeamItem key={user.id} user={user} />; - }, this) - } - </div> - ); - } -}); +MemberListTeam.propTypes = { + users: React.PropTypes.arrayOf(React.PropTypes.object).isRequired +}; diff --git a/web/react/components/member_list_team_item.jsx b/web/react/components/member_list_team_item.jsx new file mode 100644 index 000000000..b7e81f843 --- /dev/null +++ b/web/react/components/member_list_team_item.jsx @@ -0,0 +1,203 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +const UserStore = require('../stores/user_store.jsx'); +const Client = require('../utils/client.jsx'); +const AsyncClient = require('../utils/async_client.jsx'); +const Utils = require('../utils/utils.jsx'); + +export default class MemberListTeamItem extends React.Component { + constructor(props) { + super(props); + + this.handleMakeMember = this.handleMakeMember.bind(this); + this.handleMakeActive = this.handleMakeActive.bind(this); + this.handleMakeNotActive = this.handleMakeNotActive.bind(this); + this.handleMakeAdmin = this.handleMakeAdmin.bind(this); + + this.state = {}; + } + handleMakeMember() { + const data = { + user_id: this.props.user.id, + new_roles: '' + }; + + Client.updateRoles(data, + function handleMakeMemberSuccess() { + AsyncClient.getProfiles(); + }, + function handleMakeMemberError(err) { + this.setState({serverError: err.message}); + }.bind(this) + ); + } + handleMakeActive() { + Client.updateActive(this.props.user.id, true, + function handleMakeActiveSuccess() { + AsyncClient.getProfiles(); + }, + function handleMakeActiveError(err) { + this.setState({serverError: err.message}); + }.bind(this) + ); + } + handleMakeNotActive() { + Client.updateActive(this.props.user.id, false, + function handleMakeNotActiveSuccess() { + AsyncClient.getProfiles(); + }, + function handleMakeNotActiveError(err) { + this.setState({serverError: err.message}); + }.bind(this) + ); + } + handleMakeAdmin() { + const data = { + user_id: this.props.user.id, + new_roles: 'admin' + }; + + Client.updateRoles(data, + function handleMakeAdminSuccess() { + AsyncClient.getProfiles(); + }, + function handleMakeAdmitError(err) { + this.setState({serverError: err.message}); + }.bind(this) + ); + } + render() { + let serverError = null; + if (this.state.serverError) { + serverError = ( + <div className='has-error'> + <label className='has-error control-label'>{this.state.serverError}</label> + </div> + ); + } + + const user = this.props.user; + let currentRoles = 'Member'; + const timestamp = UserStore.getCurrentUser().update_at; + + if (user.roles.length > 0) { + currentRoles = user.roles.charAt(0).toUpperCase() + user.roles.slice(1); + } + + const email = user.email; + let showMakeMember = user.roles === 'admin'; + let showMakeAdmin = user.roles === ''; + let showMakeActive = false; + let showMakeNotActive = true; + + if (user.delete_at > 0) { + currentRoles = 'Inactive'; + showMakeMember = false; + showMakeAdmin = false; + showMakeActive = true; + showMakeNotActive = false; + } + + let makeAdmin = null; + if (showMakeAdmin) { + makeAdmin = ( + <li role='presentation'> + <a + role='menuitem' + href='#' + onClick={this.handleMakeAdmin} + > + Make Admin + </a> + </li> + ); + } + + let makeMember = null; + if (showMakeMember) { + makeMember = ( + <li role='presentation'> + <a + role='menuitem' + href='#' + onClick={this.handleMakeMember} + > + Make Member + </a> + </li> + ); + } + + let makeActive = null; + if (showMakeActive) { + makeActive = ( + <li role='presentation'> + <a + role='menuitem' + href='#' + onClick={this.handleMakeActive} + > + Make Active + </a> + </li> + ); + } + + let makeNotActive = null; + if (showMakeNotActive) { + makeNotActive = ( + <li role='presentation'> + <a + role='menuitem' + href='#' + onClick={this.handleMakeNotActive} + > + Make Inactive + </a> + </li> + ); + } + + return ( + <div className='row member-div'> + <img + className='post-profile-img pull-left' + src={`/api/v1/users/${user.id}/image?time=${timestamp}`} + height='36' + width='36' + /> + <span className='member-name'>{Utils.getDisplayName(user)}</span> + <span className='member-email'>{email}</span> + <div className='dropdown member-drop'> + <a + href='#' + className='dropdown-toggle theme' + type='button' + id='channel_header_dropdown' + data-toggle='dropdown' + aria-expanded='true' + > + <span>{currentRoles} </span> + <span className='caret'></span> + </a> + <ul + className='dropdown-menu member-menu' + role='menu' + aria-labelledby='channel_header_dropdown' + > + {makeAdmin} + {makeMember} + {makeActive} + {makeNotActive} + </ul> + </div> + {serverError} + </div> + ); + } +} + +MemberListTeamItem.propTypes = { + user: React.PropTypes.object.isRequired +}; diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index 114dc183f..72a2a6251 100644 --- a/web/react/components/mention.jsx +++ b/web/react/components/mention.jsx @@ -1,30 +1,57 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var UserStore = require("../stores/user_store.jsx"); +var UserStore = require('../stores/user_store.jsx'); -module.exports = React.createClass({ - handleClick: function() { +export default class Mention extends React.Component { + constructor(props) { + super(props); + + this.handleClick = this.handleClick.bind(this); + + this.state = null; + } + handleClick() { this.props.handleClick(this.props.username); - }, - getInitialState: function() { - return null; - }, - render: function() { - var self = this; + } + render() { var icon; var timestamp = UserStore.getCurrentUser().update_at; - if (this.props.id === "allmention" || this.props.id === "channelmention") { - icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>; + if (this.props.id === 'allmention' || this.props.id === 'channelmention') { + icon = <span><i className='mention-img fa fa-users fa-2x'></i></span>; } else if (this.props.id != null) { - icon = <span><img className="mention-img" src={"/api/v1/users/" + this.props.id + "/image?time=" + timestamp}/></span>; + icon = (<span><img + className='mention-img' + src={'/api/v1/users/' + this.props.id + '/image?time=' + timestamp} + /> + </span>); } else { - icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>; + icon = <span><i className='mention-img fa fa-users fa-2x'></i></span>; } return ( - <div className={"mentions-name " + this.props.isFocused} id={this.props.id + "_mentions"} onClick={this.handleClick} onMouseEnter={this.props.handleMouseEnter}> - <div className="pull-left">{icon}</div> - <div className="pull-left mention-align"><span>@{this.props.username}</span><span className="mention-fullname">{this.props.secondary_text}</span></div> + <div + className={'mentions-name ' + this.props.isFocused} + id={this.props.id + '_mentions'} + onClick={this.handleClick} + onMouseEnter={this.props.handleMouseEnter} + > + <div className='pull-left'>{icon}</div> + <div className='pull-left mention-align'><span>@{this.props.username}</span><span className='mention-fullname'>{this.props.secondary_text}</span></div> </div> ); } -}); +} + +Mention.defaultProps = { + username: '', + id: '', + isFocused: '', + secondary_text: '' +}; +Mention.propTypes = { + handleClick: React.PropTypes.func.isRequired, + handleMouseEnter: React.PropTypes.func.isRequired, + username: React.PropTypes.string, + id: React.PropTypes.string, + isFocused: React.PropTypes.string, + secondary_text: React.PropTypes.string +}; diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index f562cfb29..afea30161 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -14,54 +14,66 @@ var MAX_HEIGHT_LIST = 292; var MAX_ITEMS_IN_LIST = 25; var ITEM_HEIGHT = 36; -module.exports = React.createClass({ - displayName: 'MentionList', - componentDidMount: function() { +export default class MentionList extends React.Component { + constructor(props) { + super(props); + + this.onListenerChange = this.onListenerChange.bind(this); + this.handleClick = this.handleClick.bind(this); + this.handleMouseEnter = this.handleMouseEnter.bind(this); + this.getSelection = this.getSelection.bind(this); + this.addCurrentMention = this.addCurrentMention.bind(this); + this.addFirstMention = this.addFirstMention.bind(this); + this.isEmpty = this.isEmpty.bind(this); + this.scrollToMention = this.scrollToMention.bind(this); + + this.state = {excludeUsers: [], mentionText: '-1', selectedMention: 0, selectedUsername: ''}; + } + componentDidMount() { PostStore.addMentionDataChangeListener(this.onListenerChange); - var self = this; - $('.post-right__scroll').scroll(function(){ - if($('.mentions--top').length){ - $('#reply_mention_tab .mentions--top').css({ bottom: $(window).height() - $('.post-right__scroll #reply_textbox').offset().top }); + $('.post-right__scroll').scroll(function onScroll() { + if ($('.mentions--top').length) { + $('#reply_mention_tab .mentions--top').css({bottom: $(window).height() - $('.post-right__scroll #reply_textbox').offset().top}); } }); $('body').on('keydown.mentionlist', '#' + this.props.id, - function(e) { - if (!self.isEmpty() && self.state.mentionText !== '-1' && (e.which === 13 || e.which === 9)) { + function onMentionListKey(e) { + if (!this.isEmpty() && this.state.mentionText !== '-1' && (e.which === 13 || e.which === 9)) { e.stopPropagation(); e.preventDefault(); - self.addCurrentMention(); - } else if (!self.isEmpty() && self.state.mentionText !== '-1' && (e.which === 38 || e.which === 40)) { + this.addCurrentMention(); + } else if (!this.isEmpty() && this.state.mentionText !== '-1' && (e.which === 38 || e.which === 40)) { e.stopPropagation(); e.preventDefault(); if (e.which === 38) { - if (self.getSelection(self.state.selectedMention - 1)) { - self.setState({selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username}); + if (this.getSelection(this.state.selectedMention - 1)) { + this.setState({selectedMention: this.state.selectedMention - 1, selectedUsername: this.refs['mention' + (this.state.selectedMention - 1)].props.username}); } } else if (e.which === 40) { - if (self.getSelection(self.state.selectedMention + 1)) { - self.setState({selectedMention: self.state.selectedMention + 1, selectedUsername: self.refs['mention' + (self.state.selectedMention + 1)].props.username}); + if (this.getSelection(this.state.selectedMention + 1)) { + this.setState({selectedMention: this.state.selectedMention + 1, selectedUsername: this.refs['mention' + (this.state.selectedMention + 1)].props.username}); } } - self.scrollToMention(e.which); + this.scrollToMention(e.which); } - } + }.bind(this) ); - $(document).click(function(e) { - if (!($('#' + self.props.id).is(e.target) || $('#' + self.props.id).has(e.target).length || - ('mentionlist' in self.refs && $(self.refs.mentionlist.getDOMNode()).has(e.target).length))) { - self.setState({mentionText: '-1'}); + $(document).click(function onClick(e) { + if (!($('#' + this.props.id).is(e.target) || $('#' + this.props.id).has(e.target).length || + ('mentionlist' in this.refs && $(React.findDOMNode(this.refs.mentionlist)).has(e.target).length))) { + this.setState({mentionText: '-1'}); } - }); - }, - componentWillUnmount: function() { + }.bind(this)); + } + componentWillUnmount() { PostStore.removeMentionDataChangeListener(this.onListenerChange); $('body').off('keydown.mentionlist', '#' + this.props.id); - }, - componentDidUpdate: function() { + } + componentDidUpdate() { if (this.state.mentionText !== '-1') { if (this.state.selectedUsername !== '' && (!this.getSelection(this.state.selectedMention) || this.state.selectedUsername !== this.refs['mention' + this.state.selectedMention].props.username)) { var tempSelectedMention = -1; @@ -80,8 +92,8 @@ module.exports = React.createClass({ } else if (this.state.selectedMention !== 0) { this.setState({selectedMention: 0, selectedUsername: ''}); } - }, - onListenerChange: function(id, mentionText) { + } + onListenerChange(id, mentionText) { if (id !== this.props.id) { return; } @@ -92,8 +104,8 @@ module.exports = React.createClass({ } this.setState(newState); - }, - handleClick: function(name) { + } + handleClick(name) { AppDispatcher.handleViewAction({ type: ActionTypes.RECIEVED_ADD_MENTION, id: this.props.id, @@ -101,33 +113,33 @@ module.exports = React.createClass({ }); this.setState({mentionText: '-1'}); - }, - handleMouseEnter: function(listId) { + } + handleMouseEnter(listId) { this.setState({selectedMention: listId, selectedUsername: this.refs['mention' + listId].props.username}); - }, - getSelection: function(listId) { + } + getSelection(listId) { if (!this.refs['mention' + listId]) { return false; } return true; - }, - addCurrentMention: function() { + } + addCurrentMention() { if (!this.getSelection(this.state.selectedMention)) { this.addFirstMention(); } else { this.refs['mention' + this.state.selectedMention].handleClick(); } - }, - addFirstMention: function() { + } + addFirstMention() { if (!this.refs.mention0) { return; } this.refs.mention0.handleClick(); - }, - isEmpty: function() { + } + isEmpty() { return (!this.refs.mention0); - }, - scrollToMention: function(keyPressed) { + } + scrollToMention(keyPressed) { var direction; if (keyPressed === 38) { direction = 'up'; @@ -145,12 +157,8 @@ module.exports = React.createClass({ $('#mentionsbox').animate({ scrollTop: scrollAmount }, 75); - }, - getInitialState: function() { - return {excludeUsers: [], mentionText: '-1', selectedMention: 0, selectedUsername: ''}; - }, - render: function() { - var self = this; + } + render() { var mentionText = this.state.mentionText; if (mentionText === '-1') { return null; @@ -158,8 +166,10 @@ module.exports = React.createClass({ var profiles = UserStore.getActiveOnlyProfiles(); var users = []; - for (var id in profiles) { - users.push(profiles[id]); + for (let id in profiles) { + if (profiles[id]) { + users.push(profiles[id]); + } } var all = {}; @@ -176,7 +186,7 @@ module.exports = React.createClass({ channel.id = 'channelmention'; users.push(channel); - users.sort(function(a, b) { + users.sort(function sortByUsername(a, b) { if (a.username < b.username) { return -1; } @@ -185,29 +195,34 @@ module.exports = React.createClass({ } return 0; }); - var mentions = {}; + var mentions = []; var index = 0; for (var i = 0; i < users.length && index < MAX_ITEMS_IN_LIST; i++) { if ((users[i].first_name && users[i].first_name.lastIndexOf(mentionText, 0) === 0) || (users[i].last_name && users[i].last_name.lastIndexOf(mentionText, 0) === 0) || users[i].username.lastIndexOf(mentionText, 0) === 0) { + let isFocused = ''; + if (this.state.selectedMention === index) { + isFocused = 'mentions-focus'; + } mentions[index] = ( <Mention + key={'mention_key_' + index} ref={'mention' + index} username={users[i].username} secondary_text={Utils.getFullName(users[i])} id={users[i].id} listId={index} - isFocused={this.state.selectedMention === index ? 'mentions-focus' : ''} - handleMouseEnter={function(value) { return function() { self.handleMouseEnter(value); } }(index)} + isFocused={isFocused} + handleMouseEnter={this.handleMouseEnter.bind(this, index)} handleClick={this.handleClick} /> ); index++; } } - var numMentions = Object.keys(mentions).length; + var numMentions = mentions.length; if (numMentions < 1) { return null; @@ -223,11 +238,20 @@ module.exports = React.createClass({ }; return ( - <div className='mentions--top' style={style}> - <div ref='mentionlist' className='mentions-box' id='mentionsbox'> + <div + className='mentions--top' + style={style}> + <div + ref='mentionlist' + className='mentions-box' + id='mentionsbox'> {mentions} </div> </div> ); } -}); +} + +MentionList.propTypes = { + id: React.PropTypes.string +}; diff --git a/web/react/components/message_wrapper.jsx b/web/react/components/message_wrapper.jsx index 5fc88a61b..bce305853 100644 --- a/web/react/components/message_wrapper.jsx +++ b/web/react/components/message_wrapper.jsx @@ -1,17 +1,30 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var utils = require('../utils/utils.jsx'); +var Utils = require('../utils/utils.jsx'); -module.exports = React.createClass({ - render: function() { +export default class MessageWrapper extends React.Component { + constructor(props) { + super(props); + this.state = {}; + } + render() { if (this.props.message) { - var inner = utils.textToJsx(this.props.message, this.props.options); + var inner = Utils.textToJsx(this.props.message, this.props.options); return ( <div>{inner}</div> ); - } else { - return <div/> } + + return <div/>; } -}); +} + +MessageWrapper.defaultProps = { + message: null, + options: null +}; +MessageWrapper.propTypes = { + message: React.PropTypes.string, + options: React.PropTypes.object +}; diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx new file mode 100644 index 000000000..e818a5c92 --- /dev/null +++ b/web/react/components/navbar_dropdown.jsx @@ -0,0 +1,209 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Utils = require('../utils/utils.jsx'); +var client = require('../utils/client.jsx'); +var UserStore = require('../stores/user_store.jsx'); +var TeamStore = require('../stores/team_store.jsx'); + +var Constants = require('../utils/constants.jsx'); + +function getStateFromStores() { + return {teams: UserStore.getTeams(), currentTeam: TeamStore.getCurrent()}; +} + +export default class NavbarDropdown extends React.Component { + constructor(props) { + super(props); + this.blockToggle = false; + + this.handleLogoutClick = this.handleLogoutClick.bind(this); + this.onListenerChange = this.onListenerChange.bind(this); + + this.state = getStateFromStores(); + } + handleLogoutClick(e) { + e.preventDefault(); + client.logout(); + } + componentDidMount() { + UserStore.addTeamsChangeListener(this.onListenerChange); + TeamStore.addChangeListener(this.onListenerChange); + + $(React.findDOMNode(this.refs.dropdown)).on('hide.bs.dropdown', function resetDropdown() { + this.blockToggle = true; + setTimeout(function blockTimeout() { + this.blockToggle = false; + }.bind(this), 100); + }.bind(this)); + } + componentWillUnmount() { + UserStore.removeTeamsChangeListener(this.onListenerChange); + TeamStore.removeChangeListener(this.onListenerChange); + + $(React.findDOMNode(this.refs.dropdown)).off('hide.bs.dropdown'); + } + onListenerChange() { + var newState = getStateFromStores(); + if (!Utils.areStatesEqual(newState, this.state)) { + this.setState(newState); + } + } + render() { + var teamLink = ''; + var inviteLink = ''; + var manageLink = ''; + var currentUser = UserStore.getCurrentUser(); + var isAdmin = false; + var teamSettings = null; + + if (currentUser != null) { + isAdmin = currentUser.roles.indexOf('admin') > -1; + + inviteLink = (<li> + <a + href='#' + data-toggle='modal' + data-target='#invite_member' + > + Invite New Member + </a> + </li>); + + if (this.props.teamType === 'O') { + teamLink = ( + <li> + <a + href='#' + data-toggle='modal' + data-target='#get_link' + data-title='Team Invite' + data-value={Utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + currentUser.team_id} + > + Get Team Invite Link + </a> + </li> + ); + } + } + + if (isAdmin) { + manageLink = (<li> + <a + href='#' + data-toggle='modal' + data-target='#team_members' + > + Manage Team + </a> + </li>); + teamSettings = (<li> + <a + href='#' + data-toggle='modal' + data-target='#team_settings' + > + Team Settings + </a> + </li>); + } + + var teams = []; + + teams.push(<li + className='divider' + key='div' + > + </li>); + if (this.state.teams.length > 1 && this.state.currentTeam) { + var curTeamName = this.state.currentTeam.name; + this.state.teams.forEach(function listTeams(teamName) { + if (teamName !== curTeamName) { + teams.push(<li key={teamName}><a href={Utils.getWindowLocationOrigin() + '/' + teamName}>Switch to {teamName}</a></li>); + } + }); + } + teams.push(<li key='newTeam_li'> + <a + key='newTeam_a' + target='_blank' + href={Utils.getWindowLocationOrigin() + '/signup_team'} + > + Create a New Team + </a> + </li>); + + return ( + <ul className='nav navbar-nav navbar-right'> + <li + ref='dropdown' + className='dropdown' + > + <a + href='#' + className='dropdown-toggle' + data-toggle='dropdown' + role='button' + aria-expanded='false' + > + <span + className='dropdown__icon' + dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} + /> + </a> + <ul + className='dropdown-menu' + role='menu' + > + <li> + <a + href='#' + data-toggle='modal' + data-target='#user_settings' + > + Account Settings + </a> + </li> + {teamSettings} + {inviteLink} + {teamLink} + {manageLink} + <li> + <a + href='#' + onClick={this.handleLogoutClick} + > + Logout + </a> + </li> + {teams} + <li className='divider'></li> + <li> + <a + target='_blank' + href={config.HelpLink} + > + Help + </a> + </li> + <li> + <a + target='_blank' + href={config.ReportProblemLink} + > + Report a Problem + </a> + </li> + </ul> + </li> + </ul> + ); + } +} + +NavbarDropdown.defaultProps = { + teamType: '' +}; +NavbarDropdown.propTypes = { + teamType: React.PropTypes.string +}; diff --git a/web/react/components/new_channel.jsx b/web/react/components/new_channel.jsx index fc24a7cdc..a02a4c1c0 100644 --- a/web/react/components/new_channel.jsx +++ b/web/react/components/new_channel.jsx @@ -5,17 +5,24 @@ var utils = require('../utils/utils.jsx'); var client = require('../utils/client.jsx'); var asyncClient = require('../utils/async_client.jsx'); var UserStore = require('../stores/user_store.jsx'); -var TeamStore = require('../stores/team_store.jsx'); -module.exports = React.createClass({ - displayName: 'NewChannelModal', - handleSubmit: function(e) { +export default class NewChannelModal extends React.Component { + constructor() { + super(); + + this.handleSubmit = this.handleSubmit.bind(this); + this.displayNameKeyUp = this.displayNameKeyUp.bind(this); + this.handleClose = this.handleClose.bind(this); + + this.state = {channelType: ''}; + } + handleSubmit(e) { e.preventDefault(); var channel = {}; var state = {serverError: ''}; - channel.display_name = this.refs.display_name.getDOMNode().value.trim(); + channel.display_name = React.findDOMNode(this.refs.display_name).value.trim(); if (!channel.display_name) { state.displayNameError = 'This field is required'; state.inValid = true; @@ -26,7 +33,7 @@ module.exports = React.createClass({ state.displayNameError = ''; } - channel.name = this.refs.channel_name.getDOMNode().value.trim(); + channel.name = React.findDOMNode(this.refs.channel_name).value.trim(); if (!channel.name) { state.nameError = 'This field is required'; state.inValid = true; @@ -52,54 +59,51 @@ module.exports = React.createClass({ var cu = UserStore.getCurrentUser(); channel.team_id = cu.team_id; - channel.description = this.refs.channel_desc.getDOMNode().value.trim(); + channel.description = React.findDOMNode(this.refs.channel_desc).value.trim(); channel.type = this.state.channelType; client.createChannel(channel, - function(data) { - $(this.refs.modal.getDOMNode()).modal('hide'); + function success(data) { + $(React.findDOMNode(this.refs.modal)).modal('hide'); asyncClient.getChannel(data.id); utils.switchChannel(data); - this.refs.display_name.getDOMNode().value = ''; - this.refs.channel_name.getDOMNode().value = ''; - this.refs.channel_desc.getDOMNode().value = ''; + React.findDOMNode(this.refs.display_name).value = ''; + React.findDOMNode(this.refs.channel_name).value = ''; + React.findDOMNode(this.refs.channel_desc).value = ''; }.bind(this), - function(err) { + function error(err) { state.serverError = err.message; state.inValid = true; this.setState(state); }.bind(this) ); - }, - displayNameKeyUp: function() { - var displayName = this.refs.display_name.getDOMNode().value.trim(); + } + displayNameKeyUp() { + var displayName = React.findDOMNode(this.refs.display_name).value.trim(); var channelName = utils.cleanUpUrlable(displayName); - this.refs.channel_name.getDOMNode().value = channelName; - }, - componentDidMount: function() { + React.findDOMNode(this.refs.channel_name).value = channelName; + } + componentDidMount() { var self = this; - $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { + $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function onModalShow(e) { var button = e.relatedTarget; self.setState({channelType: $(button).attr('data-channeltype')}); }); - $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', this.handleClose); - }, - componentWillUnmount: function() { - $(this.refs.modal.getDOMNode()).off('hidden.bs.modal', this.handleClose); - }, - handleClose: function() { - $(this.getDOMNode()).find('.form-control').each(function clearForms() { + $(React.findDOMNode(this.refs.modal)).on('hidden.bs.modal', this.handleClose); + } + componentWillUnmount() { + $(React.findDOMNode(this.refs.modal)).off('hidden.bs.modal', this.handleClose); + } + handleClose() { + $(React.findDOMNode(this)).find('.form-control').each(function clearForms() { this.value = ''; }); this.setState({channelType: '', displayNameError: '', nameError: '', serverError: '', inValid: false}); - }, - getInitialState: function() { - return {channelType: ''}; - }, - render: function() { + } + render() { var displayNameError = null; var nameError = null; var serverError = null; @@ -124,11 +128,20 @@ module.exports = React.createClass({ } return ( - <div className='modal fade' id='new_channel' ref='modal' tabIndex='-1' role='dialog' aria-hidden='true'> + <div + className='modal fade' + id='new_channel' + ref='modal' + tabIndex='-1' + role='dialog' + aria-hidden='true'> <div className='modal-dialog'> <div className='modal-content'> <div className='modal-header'> - <button type='button' className='close' data-dismiss='modal'> + <button + type='button' + className='close' + data-dismiss='modal'> <span aria-hidden='true'>×</span> <span className='sr-only'>Cancel</span> </button> @@ -138,23 +151,49 @@ module.exports = React.createClass({ <div className='modal-body'> <div className={displayNameClass}> <label className='control-label'>Display Name</label> - <input onKeyUp={this.displayNameKeyUp} type='text' ref='display_name' className='form-control' placeholder='Enter display name' maxLength='22' /> + <input + onKeyUp={this.displayNameKeyUp} + type='text' + ref='display_name' + className='form-control' + placeholder='Enter display name' + maxLength='22' /> {displayNameError} </div> <div className={nameClass}> <label className='control-label'>Handle</label> - <input type='text' className='form-control' ref='channel_name' placeholder="lowercase alphanumeric's only" maxLength='22' /> + <input + type='text' + className='form-control' + ref='channel_name' + placeholder="lowercase alphanumeric's only" + maxLength='22' /> {nameError} </div> <div className='form-group'> <label className='control-label'>Description</label> - <textarea className='form-control no-resize' ref='channel_desc' rows='3' placeholder='Description' maxLength='1024'></textarea> + <textarea + className='form-control no-resize' + ref='channel_desc' + rows='3' + placeholder='Description' + maxLength='1024' /> </div> {serverError} </div> <div className='modal-footer'> - <button type='button' className='btn btn-default' data-dismiss='modal'>Cancel</button> - <button onClick={this.handleSubmit} type='submit' className='btn btn-primary'>Create New {channelTerm}</button> + <button + type='button' + className='btn btn-default' + data-dismiss='modal' > + Cancel + </button> + <button + onClick={this.handleSubmit} + type='submit' + className='btn btn-primary' > + Create New {channelTerm} + </button> </div> </form> </div> @@ -162,4 +201,4 @@ module.exports = React.createClass({ </div> ); } -}); +} diff --git a/web/react/components/notify_counts.jsx b/web/react/components/notify_counts.jsx index ebc49882b..0b7c41b62 100644 --- a/web/react/components/notify_counts.jsx +++ b/web/react/components/notify_counts.jsx @@ -23,27 +23,30 @@ function getCountsStateFromStores() { return {count: count}; } -module.exports = React.createClass({ - displayName: 'NotifyCounts', - componentDidMount: function() { +export default class NotifyCounts extends React.Component { + constructor(props) { + super(props); + + this.onListenerChange = this.onListenerChange.bind(this); + + this.state = getCountsStateFromStores(); + } + componentDidMount() { ChannelStore.addChangeListener(this.onListenerChange); - }, - componentWillUnmount: function() { + } + componentWillUnmount() { ChannelStore.removeChangeListener(this.onListenerChange); - }, - onListenerChange: function() { + } + onListenerChange() { var newState = getCountsStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { this.setState(newState); } - }, - getInitialState: function() { - return getCountsStateFromStores(); - }, - render: function() { + } + render() { if (this.state.count) { return <span className='badge badge-notify'>{this.state.count}</span>; } return null; } -}); +} diff --git a/web/react/components/password_reset.jsx b/web/react/components/password_reset.jsx index b2edea620..399d3b7b9 100644 --- a/web/react/components/password_reset.jsx +++ b/web/react/components/password_reset.jsx @@ -1,143 +1,47 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var utils = require('../utils/utils.jsx'); -var client = require('../utils/client.jsx'); -var UserStore = require('../stores/user_store.jsx'); +var PasswordResetSendLink = require('./password_reset_send_link.jsx'); +var PasswordResetForm = require('./password_reset_form.jsx'); -SendResetPasswordLink = React.createClass({ - handleSendLink: function(e) { - e.preventDefault(); - var state = {}; +export default class PasswordReset extends React.Component { + constructor(props) { + super(props); - var email = this.refs.email.getDOMNode().value.trim(); - if (!email) { - state.error = "Please enter a valid email address." - this.setState(state); - return; - } - - state.error = null; - this.setState(state); - - data = {}; - data['email'] = email; - data['name'] = this.props.teamName; - - client.sendPasswordReset(data, - function(data) { - this.setState({ error: null, update_text: <p>A password reset link has been sent to <b>{email}</b> for your <b>{this.props.teamDisplayName}</b> team on {window.location.hostname}.</p>, more_update_text: "Please check your inbox." }); - $(this.refs.reset_form.getDOMNode()).hide(); - }.bind(this), - function(err) { - this.setState({ error: err.message, update_text: null, more_update_text: null }); - }.bind(this) - ); - }, - getInitialState: function() { - return {}; - }, - render: function() { - var update_text = this.state.update_text ? <div className="reset-form alert alert-success">{this.state.update_text}{this.state.more_update_text}</div> : null; - var error = this.state.error ? <div className="form-group has-error"><label className="control-label">{this.state.error}</label></div> : null; - - return ( - <div className="col-sm-12"> - <div className="signup-team__container"> - <h3>Password Reset</h3> - { update_text } - <form onSubmit={this.handleSendLink} ref="reset_form"> - <p>{"To reset your password, enter the email address you used to sign up for " + this.props.teamDisplayName + "."}</p> - <div className={error ? 'form-group has-error' : 'form-group'}> - <input type="text" className="form-control" name="email" ref="email" placeholder="Email" /> - </div> - { error } - <button type="submit" className="btn btn-primary">Reset my password</button> - </form> - </div> - </div> - ); + this.state = {}; } -}); - -ResetPassword = React.createClass({ - handlePasswordReset: function(e) { - e.preventDefault(); - var state = {}; - - var password = this.refs.password.getDOMNode().value.trim(); - if (!password || password.length < 5) { - state.error = "Please enter at least 5 characters." - this.setState(state); - return; - } - - state.error = null; - this.setState(state); - - data = {}; - data['new_password'] = password; - data['hash'] = this.props.hash; - data['data'] = this.props.data; - data['name'] = this.props.teamName; - - client.resetPassword(data, - function(data) { - this.setState({ error: null, update_text: "Your password has been updated successfully." }); - }.bind(this), - function(err) { - this.setState({ error: err.message, update_text: null }); - }.bind(this) - ); - }, - getInitialState: function() { - return {}; - }, - render: function() { - var update_text = this.state.update_text ? <div className="form-group"><br/><label className="control-label reset-form">{this.state.update_text} Click <a href={"/" + this.props.teamName + "/login"}>here</a> to log in.</label></div> : null; - var error = this.state.error ? <div className="form-group has-error"><label className="control-label">{this.state.error}</label></div> : null; - - return ( - <div className="col-sm-12"> - <div className="signup-team__container"> - <h3>Password Reset</h3> - <form onSubmit={this.handlePasswordReset}> - <p>{"Enter a new password for your " + this.props.teamDisplayName + " " + config.SiteName + " account."}</p> - <div className={error ? 'form-group has-error' : 'form-group'}> - <input type="password" className="form-control" name="password" ref="password" placeholder="Password" /> - </div> - { error } - <button type="submit" className="btn btn-primary">Change my password</button> - { update_text } - </form> - </div> - </div> - ); - } -}); - -module.exports = React.createClass({ - getInitialState: function() { - return {}; - }, - render: function() { - - if (this.props.isReset === "false") { - return ( - <SendResetPasswordLink - teamDisplayName={this.props.teamDisplayName} - teamName={this.props.teamName} - /> - ); - } else { + render() { + if (this.props.isReset === 'false') { return ( - <ResetPassword + <PasswordResetSendLink teamDisplayName={this.props.teamDisplayName} teamName={this.props.teamName} - hash={this.props.hash} - data={this.props.data} /> ); } + + return ( + <PasswordResetForm + teamDisplayName={this.props.teamDisplayName} + teamName={this.props.teamName} + hash={this.props.hash} + data={this.props.data} + /> + ); } -}); +} + +PasswordReset.defaultProps = { + isReset: '', + teamName: '', + teamDisplayName: '', + hash: '', + data: '' +}; +PasswordReset.propTypes = { + isReset: React.PropTypes.string, + teamName: React.PropTypes.string, + teamDisplayName: React.PropTypes.string, + hash: React.PropTypes.string, + data: React.PropTypes.string +}; diff --git a/web/react/components/password_reset_form.jsx b/web/react/components/password_reset_form.jsx new file mode 100644 index 000000000..7acd2d1f7 --- /dev/null +++ b/web/react/components/password_reset_form.jsx @@ -0,0 +1,100 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var client = require('../utils/client.jsx'); + +export default class PasswordResetForm extends React.Component { + constructor(props) { + super(props); + + this.handlePasswordReset = this.handlePasswordReset.bind(this); + + this.state = {}; + } + handlePasswordReset(e) { + e.preventDefault(); + var state = {}; + + var password = React.findDOMNode(this.refs.password).value.trim(); + if (!password || password.length < 5) { + state.error = 'Please enter at least 5 characters.'; + this.setState(state); + return; + } + + state.error = null; + this.setState(state); + + var data = {}; + data.new_password = password; + data.hash = this.props.hash; + data.data = this.props.data; + data.name = this.props.teamName; + + client.resetPassword(data, + function resetSuccess() { + this.setState({error: null, updateText: 'Your password has been updated successfully.'}); + }.bind(this), + function resetFailure(err) { + this.setState({error: err.message, updateText: null}); + }.bind(this) + ); + } + render() { + var updateText = null; + if (this.state.updateText) { + updateText = <div className='form-group'><br/><label className='control-label reset-form'>{this.state.updateText} Click <a href={'/' + this.props.teamName + '/login'}>here</a> to log in.</label></div>; + } + + var error = null; + if (this.state.error) { + error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>; + } + + var formClass = 'form-group'; + if (error) { + formClass += ' has-error'; + } + + return ( + <div className='col-sm-12'> + <div className='signup-team__container'> + <h3>Password Reset</h3> + <form onSubmit={this.handlePasswordReset}> + <p>{'Enter a new password for your ' + this.props.teamDisplayName + ' ' + config.SiteName + ' account.'}</p> + <div className={formClass}> + <input + type='password' + className='form-control' + name='password' + ref='password' + placeholder='Password' + /> + </div> + {error} + <button + type='submit' + className='btn btn-primary' + > + Change my password + </button> + {updateText} + </form> + </div> + </div> + ); + } +} + +PasswordResetForm.defaultProps = { + teamName: '', + teamDisplayName: '', + hash: '', + data: '' +}; +PasswordResetForm.propTypes = { + teamName: React.PropTypes.string, + teamDisplayName: React.PropTypes.string, + hash: React.PropTypes.string, + data: React.PropTypes.string +}; diff --git a/web/react/components/password_reset_send_link.jsx b/web/react/components/password_reset_send_link.jsx new file mode 100644 index 000000000..1e6cc3607 --- /dev/null +++ b/web/react/components/password_reset_send_link.jsx @@ -0,0 +1,98 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var client = require('../utils/client.jsx'); + +export default class PasswordResetSendLink extends React.Component { + constructor(props) { + super(props); + + this.handleSendLink = this.handleSendLink.bind(this); + + this.state = {}; + } + handleSendLink(e) { + e.preventDefault(); + var state = {}; + + var email = React.findDOMNode(this.refs.email).value.trim(); + if (!email) { + state.error = 'Please enter a valid email address.'; + this.setState(state); + return; + } + + state.error = null; + this.setState(state); + + var data = {}; + data.email = email; + data.name = this.props.teamName; + + client.sendPasswordReset(data, + function passwordResetSent() { + this.setState({error: null, updateText: <p>A password reset link has been sent to <b>{email}</b> for your <b>{this.props.teamDisplayName}</b> team on {window.location.hostname}.</p>, moreUpdateText: 'Please check your inbox.'}); + $(React.findDOMNode(this.refs.reset_form)).hide(); + }.bind(this), + function passwordResetFailedToSend(err) { + this.setState({error: err.message, update_text: null, moreUpdateText: null}); + }.bind(this) + ); + } + render() { + var updateText = null; + if (this.state.updateText) { + updateText = <div className='reset-form alert alert-success'>{this.state.updateText}{this.state.moreUpdateText}</div>; + } + + var error = null; + if (this.state.error) { + error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>; + } + + var formClass = 'form-group'; + if (error) { + formClass += ' has-error'; + } + + return ( + <div className='col-sm-12'> + <div className='signup-team__container'> + <h3>Password Reset</h3> + {updateText} + <form + onSubmit={this.handleSendLink} + ref='reset_form' + > + <p>{'To reset your password, enter the email address you used to sign up for ' + this.props.teamDisplayName + '.'}</p> + <div className={formClass}> + <input + type='text' + className='form-control' + name='email' + ref='email' + placeholder='Email' + /> + </div> + {error} + <button + type='submit' + className='btn btn-primary' + > + Reset my password + </button> + </form> + </div> + </div> + ); + } +} + +PasswordResetSendLink.defaultProps = { + teamName: '', + teamDisplayName: '' +}; +PasswordResetSendLink.propTypes = { + teamName: React.PropTypes.string, + teamDisplayName: React.PropTypes.string +}; diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx new file mode 100644 index 000000000..fb9522afb --- /dev/null +++ b/web/react/components/popover_list_members.jsx @@ -0,0 +1,80 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +export default class PopoverListMembers extends React.Component { + componentDidMount() { + const originalLeave = $.fn.popover.Constructor.prototype.leave; + $.fn.popover.Constructor.prototype.leave = function onLeave(obj) { + let selfObj; + if (obj instanceof this.constructor) { + selfObj = obj; + } else { + selfObj = $(obj.currentTarget)[this.type](this.getDelegateOptions()).data(`bs.${this.type}`); + } + originalLeave.call(this, obj); + + if (obj.currentTarget && selfObj.$tip) { + selfObj.$tip.one('mouseenter', function onMouseEnter() { + clearTimeout(selfObj.timeout); + selfObj.$tip.one('mouseleave', function onMouseLeave() { + $.fn.popover.Constructor.prototype.leave.call(selfObj, selfObj); + }); + }); + } + }; + + $('#member_popover').popover({placement: 'bottom', trigger: 'click', html: true}); + $('body').on('click', function onClick(e) { + if ($(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) { + $('#member_popover').popover('hide'); + } + }); + } + render() { + let popoverHtml = ''; + const members = this.props.members; + let count; + if (members.length > 20) { + count = '20+'; + } else { + count = members.length || '-'; + } + + if (members) { + members.sort(function compareByLocal(a, b) { + return a.username.localeCompare(b.username); + }); + + members.forEach(function addMemberElement(m) { + popoverHtml += `<div class='text--nowrap'>${m.username}</div>`; + }); + } + + return ( + <div + id='member_popover' + data-toggle='popover' + data-content={popoverHtml} + data-original-title='Members' + > + <div + id='member_tooltip' + data-placement='left' + data-toggle='tooltip' + title='View Channel Members' + > + {count} + <span + className='glyphicon glyphicon-user' + aria-hidden='true' + /> + </div> + </div> + ); + } +} + +PopoverListMembers.propTypes = { + members: React.PropTypes.array.isRequired, + channelId: React.PropTypes.string.isRequired +}; diff --git a/web/react/components/post.jsx b/web/react/components/post.jsx index acc2b51d2..e284f4b6a 100644 --- a/web/react/components/post.jsx +++ b/web/react/components/post.jsx @@ -15,9 +15,17 @@ var utils = require('../utils/utils.jsx'); var PostInfo = require('./post_info.jsx'); -module.exports = React.createClass({ - displayName: 'Post', - handleCommentClick: function(e) { +export default class Post extends React.Component { + constructor(props) { + super(props); + + this.handleCommentClick = this.handleCommentClick.bind(this); + this.forceUpdateInfo = this.forceUpdateInfo.bind(this); + this.retryPost = this.retryPost.bind(this); + + this.state = {}; + } + handleCommentClick(e) { e.preventDefault(); var data = {}; @@ -33,31 +41,31 @@ module.exports = React.createClass({ type: ActionTypes.RECIEVED_SEARCH, results: null }); - }, - forceUpdateInfo: function() { + } + forceUpdateInfo() { this.refs.info.forceUpdate(); this.refs.header.forceUpdate(); - }, - retryPost: function(e) { + } + retryPost(e) { e.preventDefault(); var post = this.props.post; client.createPost(post, post.channel_id, - function(data) { + function success(data) { AsyncClient.getPosts(); var channel = ChannelStore.get(post.channel_id); var member = ChannelStore.getMember(post.channel_id); member.msg_count = channel.total_msg_count; - member.last_viewed_at = (new Date).getTime(); + member.last_viewed_at = utils.getTimestamp(); ChannelStore.setChannelMember(member); AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_POST, post: data }); - }.bind(this), - function(err) { + }, + function error() { post.state = Constants.POST_FAILED; PostStore.updatePendingPost(post); this.forceUpdate(); @@ -67,18 +75,15 @@ module.exports = React.createClass({ post.state = Constants.POST_LOADING; PostStore.updatePendingPost(post); this.forceUpdate(); - }, - shouldComponentUpdate: function(nextProps) { + } + shouldComponentUpdate(nextProps) { if (!utils.areStatesEqual(nextProps.post, this.props.post)) { return true; } return false; - }, - getInitialState: function() { - return { }; - }, - render: function() { + } + render() { var post = this.props.post; var parentPost = this.props.parentPost; var posts = this.props.posts; @@ -89,19 +94,27 @@ module.exports = React.createClass({ } var commentCount = 0; - var commentRootId = parentPost ? post.root_id : post.id; + var commentRootId; + if (parentPost) { + commentRootId = post.root_id; + } else { + commentRootId = post.id; + } for (var postId in posts) { - if (posts[postId].root_id == commentRootId) { + if (posts[postId].root_id === commentRootId) { commentCount += 1; } } - var error = this.state.error ? <div className='form-group has-error'><label className='control-label'>{ this.state.error }</label></div> : null; - - var rootUser = this.props.sameRoot ? 'same--root' : 'other--root'; + var rootUser; + if (this.props.sameRoot) { + rootUser = 'same--root'; + } else { + rootUser = 'other--root'; + } var postType = ''; - if (type != 'Post'){ + if (type !== 'Post') { postType = 'post--comment'; } @@ -122,21 +135,60 @@ module.exports = React.createClass({ sameUserClass = 'same--user'; } + var profilePic = null; + if (this.props.hideProfilePic) { + profilePic = ( + <div className='post-profile-img__container'> + <img + className='post-profile-img' + src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp} + height='36' + width='36' /> + </div> + ); + } + return ( <div> - <div id={post.id} className={'post ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss}> - { !this.props.hideProfilePic ? - <div className='post-profile-img__container'> - <img className='post-profile-img' src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp} height='36' width='36' /> - </div> - : null } + <div + id={post.id} + className={'post ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss} > + {profilePic} <div className='post__content'> - <PostHeader ref='header' post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} isLastComment={this.props.isLastComment} /> - <PostBody post={post} sameRoot={this.props.sameRoot} parentPost={parentPost} posts={posts} handleCommentClick={this.handleCommentClick} retryPost={this.retryPost} /> - <PostInfo ref='info' post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} allowReply='true' /> + <PostHeader + ref='header' + post={post} + sameRoot={this.props.sameRoot} + commentCount={commentCount} + handleCommentClick={this.handleCommentClick} + isLastComment={this.props.isLastComment} /> + <PostBody + post={post} + sameRoot={this.props.sameRoot} + parentPost={parentPost} + posts={posts} + handleCommentClick={this.handleCommentClick} + retryPost={this.retryPost} /> + <PostInfo + ref='info' + post={post} + sameRoot={this.props.sameRoot} + commentCount={commentCount} + handleCommentClick={this.handleCommentClick} + allowReply='true' /> </div> </div> </div> ); } -}); +} + +Post.propTypes = { + post: React.PropTypes.object, + posts: React.PropTypes.object, + parentPost: React.PropTypes.object, + sameUser: React.PropTypes.bool, + sameRoot: React.PropTypes.bool, + hideProfilePic: React.PropTypes.bool, + isLastComment: React.PropTypes.bool +}; diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index e5ab5b624..88fb9aec8 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -1,95 +1,140 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var FileAttachmentList = require('./file_attachment_list.jsx'); -var UserStore = require('../stores/user_store.jsx'); -var utils = require('../utils/utils.jsx'); -var Constants = require('../utils/constants.jsx'); +const FileAttachmentList = require('./file_attachment_list.jsx'); +const UserStore = require('../stores/user_store.jsx'); +const Utils = require('../utils/utils.jsx'); +const Constants = require('../utils/constants.jsx'); -module.exports = React.createClass({ - componentWillReceiveProps: function(nextProps) { - var linkData = utils.extractLinks(nextProps.post.message); +export default class PostBody extends React.Component { + constructor(props) { + super(props); + + const linkData = Utils.extractLinks(this.props.post.message); + this.state = {links: linkData.links, message: linkData.text}; + } + componentWillReceiveProps(nextProps) { + const linkData = Utils.extractLinks(nextProps.post.message); this.setState({links: linkData.links, message: linkData.text}); - }, - getInitialState: function() { - var linkData = utils.extractLinks(this.props.post.message); - return {links: linkData.links, message: linkData.text}; - }, - render: function() { - var post = this.props.post; - var filenames = this.props.post.filenames; - var parentPost = this.props.parentPost; - var inner = utils.textToJsx(this.state.message); + } + render() { + const post = this.props.post; + const filenames = this.props.post.filenames; + const parentPost = this.props.parentPost; + const inner = Utils.textToJsx(this.state.message); - var comment = ''; - var reply = ''; - var postClass = ''; + let comment = ''; + let postClass = ''; if (parentPost) { - var profile = UserStore.getProfile(parentPost.user_id); - var apostrophe = ''; - var name = '...'; + const profile = UserStore.getProfile(parentPost.user_id); + + let apostrophe = ''; + let name = '...'; if (profile != null) { if (profile.username.slice(-1) === 's') { apostrophe = '\''; } else { apostrophe = '\'s'; } - name = <a className='theme' onClick={function searchName() { utils.searchForTerm(profile.username); }}>{profile.username}</a>; + name = ( + <a + className='theme' + onClick={Utils.searchForTerm.bind(null, profile.username)} + > + {profile.username} + </a> + ); } - var message = ''; + let message = ''; if (parentPost.message) { - message = utils.replaceHtmlEntities(parentPost.message); + message = Utils.replaceHtmlEntities(parentPost.message); } else if (parentPost.filenames.length) { message = parentPost.filenames[0].split('/').pop(); if (parentPost.filenames.length === 2) { message += ' plus 1 other file'; } else if (parentPost.filenames.length > 2) { - message += ' plus ' + (parentPost.filenames.length - 1) + ' other files'; + message += ` plus ${parentPost.filenames.length - 1} other files`; } } comment = ( <p className='post-link'> - <span>Commented on {name}{apostrophe} message: <a className='theme' onClick={this.props.handleCommentClick}>{message}</a></span> + <span> + Commented on {name}{apostrophe} message: + <a + className='theme' + onClick={this.props.handleCommentClick} + > + {message} + </a> + </span> </p> ); postClass += ' post-comment'; } - var loading; + let loading; if (post.state === Constants.POST_FAILED) { postClass += ' post-fail'; - loading = <a className='theme post-retry pull-right' href='#' onClick={this.props.retryPost}>Retry</a>; + loading = ( + <a + className='theme post-retry pull-right' + href='#' + onClick={this.props.retryPost} + > + Retry + </a> + ); } else if (post.state === Constants.POST_LOADING) { postClass += ' post-waiting'; - loading = <img className='post-loading-gif pull-right' src='/static/images/load.gif'/>; + loading = ( + <img + className='post-loading-gif pull-right' + src='/static/images/load.gif' + /> + ); } - var embed; + let embed; if (filenames.length === 0 && this.state.links) { - embed = utils.getEmbed(this.state.links[0]); + embed = Utils.getEmbed(this.state.links[0]); } - var fileAttachmentHolder = ''; + let fileAttachmentHolder = ''; if (filenames && filenames.length > 0) { - fileAttachmentHolder = (<FileAttachmentList - filenames={filenames} - modalId={'view_image_modal_' + post.id} - channelId={post.channel_id} - userId={post.user_id} />); + fileAttachmentHolder = ( + <FileAttachmentList + filenames={filenames} + modalId={`view_image_modal_${post.id}`} + channelId={post.channel_id} + userId={post.user_id} + /> + ); } return ( <div className='post-body'> {comment} - <p key={post.id + '_message'} className={postClass}>{loading}<span>{inner}</span></p> + <p + key={`${post.id}_message`} + className={postClass} + > + {loading}<span>{inner}</span> + </p> {fileAttachmentHolder} {embed} </div> ); } -}); +} + +PostBody.propTypes = { + post: React.PropTypes.object.isRequired, + parentPost: React.PropTypes.object, + retryPost: React.PropTypes.func.isRequired, + handleCommentClick: React.PropTypes.func.isRequired +}; diff --git a/web/react/components/post_deleted_modal.jsx b/web/react/components/post_deleted_modal.jsx index 83b007bad..d284a9d1b 100644 --- a/web/react/components/post_deleted_modal.jsx +++ b/web/react/components/post_deleted_modal.jsx @@ -3,34 +3,61 @@ var UserStore = require('../stores/user_store.jsx'); -module.exports = React.createClass({ - getInitialState: function() { - return { }; - }, - render: function() { - var currentUser = UserStore.getCurrentUser() +export default class PostDeletedModal extends React.Component { + constructor(props) { + super(props); + + this.state = {}; + } + render() { + var currentUser = UserStore.getCurrentUser(); if (currentUser != null) { return ( - <div className="modal fade" ref="modal" id="post_deleted" tabIndex="-1" role="dialog" aria-hidden="true"> - <div className="modal-dialog"> - <div className="modal-content"> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title" id="myModalLabel">Comment could not be posted</h4> - </div> - <div className="modal-body"> - <p>Someone deleted the message on which you tried to post a comment.</p> + <div + className='modal fade' + ref='modal' + id='post_deleted' + tabIndex='-1' + role='dialog' + aria-hidden='true' + > + <div className='modal-dialog'> + <div className='modal-content'> + <div className='modal-header'> + <button + type='button' + className='close' + data-dismiss='modal' + aria-label='Close' + > + <span aria-hidden='true'>×</span> + </button> + <h4 + className='modal-title' + id='myModalLabel' + > + Comment could not be posted + </h4> + </div> + <div className='modal-body'> + <p>Someone deleted the message on which you tried to post a comment.</p> + </div> + <div className='modal-footer'> + <button + type='button' + className='btn btn-primary' + data-dismiss='modal' + > + Okay + </button> + </div> </div> - <div className="modal-footer"> - <button type="button" className="btn btn-primary" data-dismiss="modal">Okay</button> - </div> - </div> - </div> + </div> </div> ); - } else { - return <div/>; } + + return <div/>; } -}); +} diff --git a/web/react/components/rename_channel_modal.jsx b/web/react/components/rename_channel_modal.jsx index 2fe6dd96b..37958b649 100644 --- a/web/react/components/rename_channel_modal.jsx +++ b/web/react/components/rename_channel_modal.jsx @@ -1,147 +1,217 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. +const Utils = require('../utils/utils.jsx'); +const Client = require('../utils/client.jsx'); +const AsyncClient = require('../utils/async_client.jsx'); +const ChannelStore = require('../stores/channel_store.jsx'); -var utils = require('../utils/utils.jsx'); -var Client = require('../utils/client.jsx'); -var AsyncClient = require('../utils/async_client.jsx'); -var ChannelStore = require('../stores/channel_store.jsx'); -var TeamStore = require('../stores/team_store.jsx'); -var Constants = require('../utils/constants.jsx'); +export default class RenameChannelModal extends React.Component { + constructor(props) { + super(props); -module.exports = React.createClass({ - handleSubmit: function(e) { + this.handleSubmit = this.handleSubmit.bind(this); + this.onNameChange = this.onNameChange.bind(this); + this.onDisplayNameChange = this.onDisplayNameChange.bind(this); + this.displayNameKeyUp = this.displayNameKeyUp.bind(this); + this.handleClose = this.handleClose.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + + this.state = { + displayName: '', + channelName: '', + channelId: '', + serverError: '', + nameError: '', + displayNameError: '', + invalid: false + }; + } + handleSubmit(e) { e.preventDefault(); - if (this.state.channel_id.length !== 26) return; + if (this.state.channelId.length !== 26) { + return; + } - var channel = ChannelStore.get(this.state.channel_id); - var oldName = channel.name - var oldDisplayName = channel.display_name - var state = { server_error: "" }; + let channel = ChannelStore.get(this.state.channelId); + const oldName = channel.name; + const oldDisplayName = channel.displayName; + let state = {serverError: ''}; - channel.display_name = this.state.display_name.trim(); + channel.display_name = this.state.displayName.trim(); if (!channel.display_name) { - state.display_name_error = "This field is required"; - state.inValid = true; - } - else if (channel.display_name.length > 22) { - state.display_name_error = "This field must be less than 22 characters"; - state.inValid = true; - } - else { - state.display_name_error = ""; + state.displayNameError = 'This field is required'; + state.invalid = true; + } else if (channel.display_name.length > 22) { + state.displayNameError = 'This field must be less than 22 characters'; + state.invalid = true; + } else { + state.displayNameError = ''; } - channel.name = this.state.channel_name.trim(); + channel.name = this.state.channelName.trim(); if (!channel.name) { - state.name_error = "This field is required"; - state.inValid = true; - } - else if(channel.name.length > 22){ - state.name_error = "This field must be less than 22 characters"; - state.inValid = true; - } - else { - var cleaned_name = utils.cleanUpUrlable(channel.name); - if (cleaned_name != channel.name) { - state.name_error = "Must be lowercase alphanumeric characters"; - state.inValid = true; - } - else { - state.name_error = ""; + state.nameError = 'This field is required'; + state.invalid = true; + } else if (channel.name.length > 22) { + state.nameError = 'This field must be less than 22 characters'; + state.invalid = true; + } else { + let cleanedName = Utils.cleanUpUrlable(channel.name); + if (cleanedName !== channel.name) { + state.nameError = 'Must be lowercase alphanumeric characters'; + state.invalid = true; + } else { + state.nameError = ''; } } this.setState(state); - if (state.inValid) - return; - - if (oldName == channel.name && oldDisplayName == channel.display_name) + if (state.invalid || (oldName === channel.name && oldDisplayName === channel.display_name)) { return; + } Client.updateChannel(channel, - function(data, text, req) { - $(this.refs.modal.getDOMNode()).modal('hide'); + function handleUpdateSuccess() { + $(React.findDOMNode(this.refs.modal)).modal('hide'); AsyncClient.getChannel(channel.id); - utils.updateTabTitle(channel.display_name); - utils.updateAddressBar(channel.name); + Utils.updateTabTitle(channel.display_name); + Utils.updateAddressBar(channel.name); - this.refs.display_name.getDOMNode().value = ""; - this.refs.channel_name.getDOMNode().value = ""; + React.findDOMNode(this.refs.displayName).value = ''; + React.findDOMNode(this.refs.channelName).value = ''; }.bind(this), - function(err) { - state.server_error = err.message; - state.inValid = true; + function handleUpdateError(err) { + state.serverError = err.message; + state.invalid = true; this.setState(state); }.bind(this) ); - }, - onNameChange: function() { - this.setState({ channel_name: this.refs.channel_name.getDOMNode().value }) - }, - onDisplayNameChange: function() { - this.setState({ display_name: this.refs.display_name.getDOMNode().value }) - }, - displayNameKeyUp: function(e) { - var display_name = this.refs.display_name.getDOMNode().value.trim(); - var channel_name = utils.cleanUpUrlable(display_name); - this.refs.channel_name.getDOMNode().value = channel_name; - this.setState({ channel_name: channel_name }) - }, - handleClose: function() { - this.setState({display_name: "", channel_name: "", display_name_error: "", server_error: "", name_error: ""}); - }, - componentDidMount: function() { - var self = this; - $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { - var button = $(e.relatedTarget); - self.setState({ display_name: button.attr('data-display'), channel_name: button.attr('data-name'), channel_id: button.attr('data-channelid') }); - }); - $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', this.handleClose); - }, - componentWillUnmount: function() { - $(this.refs.modal.getDOMNode()).off('hidden.bs.modal', this.handleClose); - }, - getInitialState: function() { - return { display_name: "", channel_name: "", channel_id: "" }; - }, - render: function() { - - var display_name_error = this.state.display_name_error ? <label className='control-label'>{ this.state.display_name_error }</label> : null; - var name_error = this.state.name_error ? <label className='control-label'>{ this.state.name_error }</label> : null; - var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null; + } + onNameChange() { + this.setState({channelName: React.findDOMNode(this.refs.channelName).value}); + } + onDisplayNameChange() { + this.setState({displayName: React.findDOMNode(this.refs.displayName).value}); + } + displayNameKeyUp() { + const displayName = React.findDOMNode(this.refs.displayName).value.trim(); + const channelName = Utils.cleanUpUrlable(displayName); + React.findDOMNode(this.refs.channelName).value = channelName; + this.setState({channelName: channelName}); + } + handleClose() { + this.state = { + displayName: '', + channelName: '', + channelId: '', + serverError: '', + nameError: '', + displayNameError: '', + invalid: false + }; + } + componentDidMount() { + $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function handleShow(e) { + const button = $(e.relatedTarget); + this.setState({displayName: button.attr('data-display'), channelName: button.attr('data-name'), channelId: button.attr('data-channelid')}); + }.bind(this)); + $(React.findDOMNode(this.refs.modal)).on('hidden.bs.modal', this.handleClose); + } + componentWillUnmount() { + $(React.findDOMNode(this.refs.modal)).off('hidden.bs.modal', this.handleClose); + } + render() { + let displayNameError = null; + let displayNameClass = 'form-group'; + if (this.state.displayNameError) { + displayNameError = <label className='control-label'>{this.state.displayNameError}</label>; + displayNameClass += ' has-error'; + } + + let nameError = null; + let nameClass = 'form-group'; + if (this.state.nameError) { + nameError = <label className='control-label'>{this.state.nameError}</label>; + nameClass += ' has-error'; + } + + let serverError = null; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } return ( - <div className="modal fade" ref="modal" id="rename_channel" tabIndex="-1" role="dialog" aria-hidden="true"> - <div className="modal-dialog"> - <div className="modal-content"> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal"> - <span aria-hidden="true">×</span> - <span className="sr-only">Close</span> + <div + className='modal fade' + ref='modal' + id='rename_channel' + tabIndex='-1' + role='dialog' + aria-hidden='true' + > + <div className='modal-dialog'> + <div className='modal-content'> + <div className='modal-header'> + <button + type='button' + className='close' + data-dismiss='modal' + > + <span aria-hidden='true'>×</span> + <span className='sr-only'>Close</span> </button> - <h4 className="modal-title">Rename Channel</h4> + <h4 className='modal-title'>Rename Channel</h4> </div> - <form role="form"> - <div className="modal-body"> - <div className={ this.state.display_name_error ? "form-group has-error" : "form-group" }> + <form role='form'> + <div className='modal-body'> + <div className={displayNameClass}> <label className='control-label'>Display Name</label> - <input onKeyUp={this.displayNameKeyUp} onChange={this.onDisplayNameChange} type="text" ref="display_name" className="form-control" placeholder="Enter display name" value={this.state.display_name} maxLength="64" /> - { display_name_error } + <input + onKeyUp={this.displayNameKeyUp} + onChange={this.onDisplayNameChange} + type='text' + ref='displayName' + className='form-control' + placeholder='Enter display name' + value={this.state.displayName} + maxLength='64' + /> + {displayNameError} </div> - <div className={ this.state.name_error ? "form-group has-error" : "form-group" }> + <div className={nameClass}> <label className='control-label'>Handle</label> - <input onChange={this.onNameChange} type="text" className="form-control" ref="channel_name" placeholder="lowercase alphanumeric's only" value={this.state.channel_name} maxLength="64" /> - { name_error } + <input + onChange={this.onNameChange} + type='text' + className='form-control' + ref='channelName' + placeholder='lowercase alphanumeric's only' + value={this.state.channelName} + maxLength='64' + /> + {nameError} </div> - { server_error } + {serverError} </div> - <div className="modal-footer"> - <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button> - <button onClick={this.handleSubmit} type="submit" className="btn btn-primary">Save</button> + <div className='modal-footer'> + <button + type='button' + className='btn btn-default' + data-dismiss='modal' + > + Cancel + </button> + <button + onClick={this.handleSubmit} + type='submit' + className='btn btn-primary' + > + Save + </button> </div> </form> </div> @@ -149,4 +219,4 @@ module.exports = React.createClass({ </div> ); } -}); +} diff --git a/web/react/components/rhs_comment.jsx b/web/react/components/rhs_comment.jsx index 7df2fed9e..e74ab7f13 100644 --- a/web/react/components/rhs_comment.jsx +++ b/web/react/components/rhs_comment.jsx @@ -6,10 +6,10 @@ var ChannelStore = require('../stores/channel_store.jsx'); var UserProfile = require('./user_profile.jsx'); var UserStore = require('../stores/user_store.jsx'); var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); -var utils = require('../utils/utils.jsx'); +var Utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); var FileAttachmentList = require('./file_attachment_list.jsx'); -var client = require('../utils/client.jsx'); +var Client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var ActionTypes = Constants.ActionTypes; @@ -25,7 +25,7 @@ export default class RhsComment extends React.Component { e.preventDefault(); var post = this.props.post; - client.createPost(post, post.channel_id, + Client.createPost(post, post.channel_id, function success(data) { AsyncClient.getPosts(post.channel_id); @@ -52,7 +52,7 @@ export default class RhsComment extends React.Component { this.forceUpdate(); } shouldComponentUpdate(nextProps) { - if (!utils.areStatesEqual(nextProps.post, this.props.post)) { + if (!Utils.areStatesEqual(nextProps.post, this.props.post)) { return true; } @@ -73,7 +73,7 @@ export default class RhsComment extends React.Component { type = 'Comment'; } - var message = utils.textToJsx(post.message); + var message = Utils.textToJsx(post.message); var timestamp = UserStore.getCurrentUser().update_at; var loading; @@ -182,7 +182,7 @@ export default class RhsComment extends React.Component { </li> <li className='post-header-col'> <time className='post-right-comment-time'> - {utils.displayCommentDateTime(post.create_at)} + {Utils.displayCommentDateTime(post.create_at)} </time> </li> <li className='post-header-col post-header__reply'> diff --git a/web/react/components/rhs_header_post.jsx b/web/react/components/rhs_header_post.jsx index 4cf4231e9..5156ec4d7 100644 --- a/web/react/components/rhs_header_post.jsx +++ b/web/react/components/rhs_header_post.jsx @@ -1,9 +1,9 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); -var Constants = require('../utils/constants.jsx'); -var ActionTypes = Constants.ActionTypes; +const AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); +const Constants = require('../utils/constants.jsx'); +const ActionTypes = Constants.ActionTypes; export default class RhsHeaderPost extends React.Component { constructor(props) { @@ -43,7 +43,7 @@ export default class RhsHeaderPost extends React.Component { }); } render() { - var back; + let back; if (this.props.fromSearch) { back = ( <a diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx index b11b39e9e..8da8231a2 100644 --- a/web/react/components/search_bar.jsx +++ b/web/react/components/search_bar.jsx @@ -1,7 +1,6 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. - var client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var PostStore = require('../stores/post_store.jsx'); @@ -10,36 +9,47 @@ var utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; -function getSearchTermStateFromStores() { - var term = PostStore.getSearchTerm() || ''; - return { - search_term: term - }; -} +export default class SearchBar extends React.Component { + constructor() { + super(); + this.mounted = false; -module.exports = React.createClass({ - displayName: 'SearchBar', - componentDidMount: function() { - PostStore.addSearchTermChangeListener(this._onChange); - }, - componentWillUnmount: function() { - PostStore.removeSearchTermChangeListener(this._onChange); - }, - _onChange: function(doSearch, isMentionSearch) { - if (this.isMounted()) { - var newState = getSearchTermStateFromStores(); + this.onListenerChange = this.onListenerChange.bind(this); + this.handleUserInput = this.handleUserInput.bind(this); + this.performSearch = this.performSearch.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + + this.state = this.getSearchTermStateFromStores(); + } + getSearchTermStateFromStores() { + var term = PostStore.getSearchTerm() || ''; + return { + searchTerm: term + }; + } + componentDidMount() { + PostStore.addSearchTermChangeListener(this.onListenerChange); + this.mounted = true; + } + componentWillUnmount() { + PostStore.removeSearchTermChangeListener(this.onListenerChange); + this.mounted = false; + } + onListenerChange(doSearch, isMentionSearch) { + if (this.mounted) { + var newState = this.getSearchTermStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { this.setState(newState); } if (doSearch) { - this.performSearch(newState.search_term, isMentionSearch); + this.performSearch(newState.searchTerm, isMentionSearch); } } - }, - clearFocus: function(e) { + } + clearFocus() { $('.search-bar__container').removeClass('focused'); - }, - handleClose: function(e) { + } + handleClose(e) { e.preventDefault(); AppDispatcher.handleServerAction({ @@ -58,23 +68,23 @@ module.exports = React.createClass({ type: ActionTypes.RECIEVED_POST_SELECTED, results: null }); - }, - handleUserInput: function(e) { + } + handleUserInput(e) { var term = e.target.value; PostStore.storeSearchTerm(term); PostStore.emitSearchTermChange(false); - this.setState({ search_term: term }); - }, - handleUserFocus: function(e) { + this.setState({searchTerm: term}); + } + handleUserFocus(e) { e.target.select(); $('.search-bar__container').addClass('focused'); - }, - performSearch: function(terms, isMentionSearch) { + } + performSearch(terms, isMentionSearch) { if (terms.length) { this.setState({isSearching: true}); client.search( terms, - function(data) { + function success(data) { this.setState({isSearching: false}); if (utils.isMobile()) { React.findDOMNode(this.refs.search).value = ''; @@ -86,38 +96,50 @@ module.exports = React.createClass({ is_mention_search: isMentionSearch }); }.bind(this), - function(err) { + function error(err) { this.setState({isSearching: false}); - AsyncClient.dispatchError(err, "search"); + AsyncClient.dispatchError(err, 'search'); }.bind(this) ); } - }, - handleSubmit: function(e) { + } + handleSubmit(e) { e.preventDefault(); - this.performSearch(this.state.search_term.trim()); - }, - getInitialState: function() { - return getSearchTermStateFromStores(); - }, - render: function() { + this.performSearch(this.state.searchTerm.trim()); + } + render() { + var isSearching = null; + if (this.state.isSearching) { + isSearching = <span className={'glyphicon glyphicon-refresh glyphicon-refresh-animate'}></span>; + } return ( <div> - <div className="sidebar__collapse" onClick={this.handleClose}><span className="fa fa-angle-left"></span></div> - <span onClick={this.clearFocus} className="search__clear">Cancel</span> - <form role="form" className="search__form relative-div" onSubmit={this.handleSubmit}> - <span className="glyphicon glyphicon-search sidebar__search-icon"></span> + <div + className='sidebar__collapse' + onClick={this.handleClose} > + <span className='fa fa-angle-left'></span> + </div> + <span + className='search__clear' + onClick={this.clearFocus}> + Cancel + </span> + <form + role='form' + className='search__form relative-div' + onSubmit={this.handleSubmit}> + <span className='glyphicon glyphicon-search sidebar__search-icon'></span> <input - type="text" - ref="search" - className="form-control search-bar" - placeholder="Search" - value={this.state.search_term} + type='text' + ref='search' + className='form-control search-bar' + placeholder='Search' + value={this.state.searchTerm} onFocus={this.handleUserFocus} onChange={this.handleUserInput} /> - {this.state.isSearching ? <span className={"glyphicon glyphicon-refresh glyphicon-refresh-animate"}></span> : null} + {isSearching} </form> </div> ); } -}); +} diff --git a/web/react/components/setting_item_max.jsx b/web/react/components/setting_item_max.jsx index b978cdb0c..e67e458af 100644 --- a/web/react/components/setting_item_max.jsx +++ b/web/react/components/setting_item_max.jsx @@ -1,33 +1,68 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -module.exports = React.createClass({ - render: function() { - var clientError = this.props.client_error ? <div className='form-group'><label className='col-sm-12 has-error'>{ this.props.client_error }</label></div> : null; - var server_error = this.props.server_error ? <div className='form-group'><label className='col-sm-12 has-error'>{ this.props.server_error }</label></div> : null; - var extraInfo = this.props.extraInfo ? this.props.extraInfo : null; +export default class SettingItemMax extends React.Component { + render() { + var clientError = null; + if (this.props.client_error) { + clientError = (<div className='form-group'><label className='col-sm-12 has-error'>{this.props.client_error}</label></div>); + } + + var serverError = null; + if (this.props.server_error) { + serverError = (<div className='form-group'><label className='col-sm-12 has-error'>{this.props.server_error}</label></div>); + } + + var extraInfo = null; + if (this.props.extraInfo) { + extraInfo = this.props.extraInfo; + } + + var submit = ''; + if (this.props.submit) { + submit = (<a + className='btn btn-sm btn-primary' + href='#' + onClick={this.props.submit}> + Submit</a>); + } var inputs = this.props.inputs; return ( - <ul className="section-max form-horizontal"> - <li className="col-sm-12 section-title">{this.props.title}</li> - <li className="col-sm-9 col-sm-offset-3"> - <ul className="setting-list"> - <li className="setting-list-item"> + <ul className='section-max form-horizontal'> + <li className='col-sm-12 section-title'>{this.props.title}</li> + <li className='col-sm-9 col-sm-offset-3'> + <ul className='setting-list'> + <li className='setting-list-item'> {inputs} {extraInfo} </li> - <li className="setting-list-item"> + <li className='setting-list-item'> <hr /> - { server_error } - { clientError } - { this.props.submit ? <a className="btn btn-sm btn-primary" href="#" onClick={this.props.submit}>Submit</a> : "" } - <a className="btn btn-sm theme" href="#" onClick={this.props.updateSection}>Cancel</a> + {serverError} + {clientError} + {submit} + <a + className='btn btn-sm theme' + href='#' + onClick={this.props.updateSection} > + Cancel + </a> </li> </ul> </li> </ul> ); } -}); +} + +SettingItemMax.propTypes = { + inputs: React.PropTypes.array, + client_error: React.PropTypes.string, + server_error: React.PropTypes.string, + extraInfo: React.PropTypes.element, + updateSection: React.PropTypes.func, + submit: React.PropTypes.func, + title: React.PropTypes.string +}; diff --git a/web/react/components/setting_item_min.jsx b/web/react/components/setting_item_min.jsx index 3c87e416e..098729a4f 100644 --- a/web/react/components/setting_item_min.jsx +++ b/web/react/components/setting_item_min.jsx @@ -1,19 +1,23 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -module.exports = React.createClass({ - displayName: 'SettingsItemMin', - propTypes: { - title: React.PropTypes.string, - disableOpen: React.PropTypes.bool, - updateSection: React.PropTypes.func, - describe: React.PropTypes.string - }, - render: function() { - var editButton = ''; +export default class SettingItemMin extends React.Component { + render() { + let editButton = null; if (!this.props.disableOpen) { - editButton = <li className='col-sm-2 section-edit'><a className='section-edit theme' href='#' onClick={this.props.updateSection}>Edit</a></li>; + editButton = ( + <li className='col-sm-2 section-edit'> + <a + className='section-edit theme' + href='#' + onClick={this.props.updateSection} + > + Edit + </a> + </li> + ); } + return ( <ul className='section-min'> <li className='col-sm-10 section-title'>{this.props.title}</li> @@ -22,4 +26,11 @@ module.exports = React.createClass({ </ul> ); } -}); +} + +SettingItemMin.propTypes = { + title: React.PropTypes.string, + disableOpen: React.PropTypes.bool, + updateSection: React.PropTypes.func, + describe: React.PropTypes.string +}; diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx index d8091ec28..e5cbd6e92 100644 --- a/web/react/components/settings_sidebar.jsx +++ b/web/react/components/settings_sidebar.jsx @@ -1,24 +1,56 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var utils = require('../utils/utils.jsx'); +export default class SettingsSidebar extends React.Component { + constructor(props) { + super(props); -module.exports = React.createClass({ - displayName:'SettingsSidebar', - updateTab: function(tab) { - this.props.updateTab(tab); + this.handleClick = this.handleClick.bind(this); + } + handleClick(tab) { + this.props.updateTab(tab.name); $('.settings-modal').addClass('display--content'); - }, - render: function() { - var self = this; + } + render() { + let tabList = this.props.tabs.map(function makeTab(tab) { + let key = `${tab.name}_li`; + let className = ''; + if (this.props.activeTab === tab.name) { + className = 'active'; + } + + return ( + <li + key={key} + className={className} + > + <a + href='#' + onClick={this.handleClick.bind(null, tab)} + > + <i className={tab.icon} /> + {tab.uiName} + </a> + </li> + ); + }.bind(this)); + return ( - <div className=""> - <ul className="nav nav-pills nav-stacked"> - {this.props.tabs.map(function(tab) { - return <li key={tab.name+'_li'} className={self.props.activeTab == tab.name ? 'active' : ''}><a key={tab.name + '_a'} href="#" onClick={function(){self.updateTab(tab.name);}}><i key={tab.name+'_i'} className={tab.icon}></i>{tab.uiName}</a></li> - })} + <div> + <ul className='nav nav-pills nav-stacked'> + {tabList} </ul> </div> ); } -}); +} + +SettingsSidebar.propTypes = { + tabs: React.PropTypes.arrayOf(React.PropTypes.shape({ + name: React.PropTypes.string.isRequired, + uiName: React.PropTypes.string.isRequired, + icon: React.PropTypes.string.isRequired + })).isRequired, + activeTab: React.PropTypes.string, + updateTab: React.PropTypes.func.isRequired +}; diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index af65b7e1d..6e219cc6c 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -1,133 +1,25 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var utils = require('../utils/utils.jsx'); -var client = require('../utils/client.jsx'); +var NavbarDropdown = require('./navbar_dropdown.jsx'); var UserStore = require('../stores/user_store.jsx'); -var TeamStore = require('../stores/team_store.jsx'); -var Constants = require('../utils/constants.jsx'); +export default class SidebarHeader extends React.Component { + constructor(props) { + super(props); -function getStateFromStores() { - return {teams: UserStore.getTeams(), currentTeam: TeamStore.getCurrent()}; -} - -var NavbarDropdown = React.createClass({ - handleLogoutClick: function(e) { - e.preventDefault(); - client.logout(); - }, - blockToggle: false, - componentDidMount: function() { - UserStore.addTeamsChangeListener(this.onListenerChange); - TeamStore.addChangeListener(this.onListenerChange); - - var self = this; - $(this.refs.dropdown.getDOMNode()).on('hide.bs.dropdown', function() { - self.blockToggle = true; - setTimeout(function() { - self.blockToggle = false; - }, 100); - }); - }, - componentWillUnmount: function() { - UserStore.removeTeamsChangeListener(this.onListenerChange); - TeamStore.removeChangeListener(this.onListenerChange); - - $(this.refs.dropdown.getDOMNode()).off('hide.bs.dropdown'); - }, - onListenerChange: function() { - if (this.isMounted()) { - var newState = getStateFromStores(); - if (!utils.areStatesEqual(newState, this.state)) { - this.setState(newState); - } - } - }, - getInitialState: function() { - return getStateFromStores(); - }, - render: function() { - var teamLink = ''; - var inviteLink = ''; - var manageLink = ''; - var currentUser = UserStore.getCurrentUser(); - var isAdmin = false; - var teamSettings = null; - - if (currentUser != null) { - isAdmin = currentUser.roles.indexOf('admin') > -1; - - inviteLink = (<li> <a href='#' data-toggle='modal' data-target='#invite_member'>Invite New Member</a> </li>); - - if (this.props.teamType === 'O') { - teamLink = ( - <li> - <a href='#' data-toggle='modal' data-target='#get_link' data-title='Team Invite' data-value={utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + currentUser.team_id}>Get Team Invite Link</a> - </li> - ); - } - } - - if (isAdmin) { - manageLink = (<li> <a href='#' data-toggle='modal' data-target='#team_members'>Manage Team</a> </li>); - teamSettings = (<li> <a href='#' data-toggle='modal' data-target='#team_settings'>Team Settings</a> </li>); - } + this.toggleDropdown = this.toggleDropdown.bind(this); - var teams = []; - - teams.push(<li className='divider' key='div'></li>); - if (this.state.teams.length > 1 && this.state.currentTeam) { - var curTeamName = this.state.currentTeam.name; - this.state.teams.forEach(function(teamName) { - if (teamName !== curTeamName) { - teams.push(<li key={teamName}><a href={utils.getWindowLocationOrigin() + '/' + teamName}>Switch to {teamName}</a></li>); - } - }); - } - teams.push(<li key='newTeam_li'><a key='newTeam_a' target="_blank" href={utils.getWindowLocationOrigin() + '/signup_team' }>Create a New Team</a></li>); - - return ( - <ul className='nav navbar-nav navbar-right'> - <li ref='dropdown' className='dropdown'> - <a href='#' className='dropdown-toggle' data-toggle='dropdown' role='button' aria-expanded='false'> - <span className='dropdown__icon' dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} /> - </a> - <ul className='dropdown-menu' role='menu'> - <li><a href='#' data-toggle='modal' data-target='#user_settings'>Account Settings</a></li> - {teamSettings} - {inviteLink} - {teamLink} - {manageLink} - <li><a href='#' onClick={this.handleLogoutClick}>Logout</a></li> - {teams} - <li className='divider'></li> - <li><a target='_blank' href={config.HelpLink}>Help</a></li> - <li><a target='_blank' href={config.ReportProblemLink}>Report a Problem</a></li> - </ul> - </li> - </ul> - ); + this.state = {}; } -}); - -module.exports = React.createClass({ - displayName: 'SidebarHeader', - getDefaultProps: function() { - return { - teamDisplayName: config.SiteName - }; - }, - - toggleDropdown: function() { + toggleDropdown() { if (this.refs.dropdown.blockToggle) { this.refs.dropdown.blockToggle = false; return; } $('.team__header').find('.dropdown-toggle').dropdown('toggle'); - }, - - render: function() { + } + render() { var me = UserStore.getCurrentUser(); var profilePicture = null; @@ -136,20 +28,38 @@ module.exports = React.createClass({ } if (me.last_picture_update) { - profilePicture = (<img className='user__picture' src={'/api/v1/users/' + me.id + '/image?time=' + me.update_at} />); + profilePicture = (<img + className='user__picture' + src={'/api/v1/users/' + me.id + '/image?time=' + me.update_at} + />); } return ( <div className='team__header theme'> - <a href='#' onClick={this.toggleDropdown}> + <a + href='#' + onClick={this.toggleDropdown} + > {profilePicture} <div className='header__info'> <div className='user__name'>{'@' + me.username}</div> - <div className='team__name'>{this.props.teamDisplayName }</div> + <div className='team__name'>{this.props.teamDisplayName}</div> </div> </a> - <NavbarDropdown ref='dropdown' teamType={this.props.teamType} /> + <NavbarDropdown + ref='dropdown' + teamType={this.props.teamType} + /> </div> ); } -}); +} + +SidebarHeader.defaultProps = { + teamDisplayName: config.SiteName, + teamType: '' +}; +SidebarHeader.propTypes = { + teamDisplayName: React.PropTypes.string, + teamType: React.PropTypes.string +}; diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx index df75e3adf..9aeda6626 100644 --- a/web/react/components/sidebar_right.jsx +++ b/web/react/components/sidebar_right.jsx @@ -4,47 +4,49 @@ var SearchResults = require('./search_results.jsx'); var RhsThread = require('./rhs_thread.jsx'); var PostStore = require('../stores/post_store.jsx'); -var utils = require('../utils/utils.jsx'); +var Utils = require('../utils/utils.jsx'); -function getStateFromStores(from_search) { - return { search_visible: PostStore.getSearchResults() != null, post_right_visible: PostStore.getSelectedPost() != null, is_mention_search: PostStore.getIsMentionSearch() }; +function getStateFromStores() { + return {search_visible: PostStore.getSearchResults() != null, post_right_visible: PostStore.getSelectedPost() != null, is_mention_search: PostStore.getIsMentionSearch()}; } -module.exports = React.createClass({ - componentDidMount: function() { - PostStore.addSearchChangeListener(this._onSearchChange); - PostStore.addSelectedPostChangeListener(this._onSelectedChange); - }, - componentWillUnmount: function() { - PostStore.removeSearchChangeListener(this._onSearchChange); - PostStore.removeSelectedPostChangeListener(this._onSelectedChange); - }, - _onSelectedChange: function(from_search) { - if (this.isMounted()) { - var newState = getStateFromStores(from_search); - newState.from_search = from_search; - if (!utils.areStatesEqual(newState, this.state)) { - this.setState(newState); - } +export default class SidebarRight extends React.Component { + constructor(props) { + super(props); + + this.onSelectedChange = this.onSelectedChange.bind(this); + this.onSearchChange = this.onSearchChange.bind(this); + this.resize = this.resize.bind(this); + + this.state = getStateFromStores(); + } + componentDidMount() { + PostStore.addSearchChangeListener(this.onSearchChange); + PostStore.addSelectedPostChangeListener(this.onSelectedChange); + } + componentWillUnmount() { + PostStore.removeSearchChangeListener(this.onSearchChange); + PostStore.removeSelectedPostChangeListener(this.onSelectedChange); + } + onSelectedChange(fromSearch) { + var newState = getStateFromStores(fromSearch); + newState.from_search = fromSearch; + if (!Utils.areStatesEqual(newState, this.state)) { + this.setState(newState); } - }, - _onSearchChange: function() { - if (this.isMounted()) { - var newState = getStateFromStores(); - if (!utils.areStatesEqual(newState, this.state)) { - this.setState(newState); - } + } + onSearchChange() { + var newState = getStateFromStores(); + if (!Utils.areStatesEqual(newState, this.state)) { + this.setState(newState); } - }, - resize: function() { + } + resize() { var postHolder = $('.post-list-holder-by-time'); postHolder[0].scrollTop = postHolder[0].scrollHeight - 224; - }, - getInitialState: function() { - return getStateFromStores(); - }, - render: function() { - if (! (this.state.search_visible || this.state.post_right_visible)) { + } + render() { + if (!(this.state.search_visible || this.state.post_right_visible)) { $('.inner__wrap').removeClass('move--left').removeClass('move--right'); $('.sidebar--right').removeClass('move--left'); this.resize(); @@ -58,25 +60,27 @@ module.exports = React.createClass({ $('.sidebar--right').addClass('move--left'); $('.sidebar--right').prepend('<div class="sidebar__overlay"></div>'); this.resize(); - setTimeout(function(){ - $('.sidebar__overlay').fadeOut("200", function(){ + setTimeout(function overlayTimer() { + $('.sidebar__overlay').fadeOut('200', function fadeOverlay() { $(this).remove(); }); - },500) + }, 500); - var content = ""; + var content = ''; if (this.state.search_visible) { content = <SearchResults isMentionSearch={this.state.is_mention_search} />; - } - else if (this.state.post_right_visible) { - content = <RhsThread fromSearch={this.state.from_search} isMentionSearch={this.state.is_mention_search} />; + } else if (this.state.post_right_visible) { + content = (<RhsThread + fromSearch={this.state.from_search} + isMentionSearch={this.state.is_mention_search} + />); } return ( - <div className="sidebar-right-container"> - { content } + <div className='sidebar-right-container'> + {content} </div> ); } -}); +} diff --git a/web/react/components/signup_team.jsx b/web/react/components/signup_team.jsx index 13640b1e5..bf08e6508 100644 --- a/web/react/components/signup_team.jsx +++ b/web/react/components/signup_team.jsx @@ -1,10 +1,10 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var ChoosePage = require('./team_signup_choose_auth.jsx'); -var EmailSignUpPage = require('./team_signup_with_email.jsx'); -var SSOSignupPage = require('./team_signup_with_sso.jsx'); -var Constants = require('../utils/constants.jsx'); +const ChoosePage = require('./team_signup_choose_auth.jsx'); +const EmailSignUpPage = require('./team_signup_with_email.jsx'); +const SSOSignupPage = require('./team_signup_with_sso.jsx'); +const Constants = require('../utils/constants.jsx'); export default class TeamSignUp extends React.Component { constructor(props) { @@ -30,14 +30,14 @@ export default class TeamSignUp extends React.Component { return <EmailSignUpPage />; } else if (this.state.page === 'service' && this.state.service !== '') { return <SSOSignupPage service={this.state.service} />; - } else { - return ( - <ChoosePage - services={this.props.services} - updatePage={this.updatePage} - /> - ); } + + return ( + <ChoosePage + services={this.props.services} + updatePage={this.updatePage} + /> + ); } } diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx index 756aae638..1d45548da 100644 --- a/web/react/components/signup_team_complete.jsx +++ b/web/react/components/signup_team_complete.jsx @@ -10,69 +10,99 @@ var UsernamePage = require('./team_signup_username_page.jsx'); var PasswordPage = require('./team_signup_password_page.jsx'); var BrowserStore = require('../stores/browser_store.jsx'); -module.exports = React.createClass({ - displayName: 'SignupTeamComplete', - propTypes: { - hash: React.PropTypes.string, - email: React.PropTypes.string, - data: React.PropTypes.string - }, - updateParent: function(state, skipSet) { +export default class SignupTeamComplete extends React.Component { + constructor(props) { + super(props); + + this.updateParent = this.updateParent.bind(this); + + var initialState = BrowserStore.getGlobalItem(props.hash); + + if (!initialState) { + initialState = {}; + initialState.wizard = 'welcome'; + initialState.team = {}; + initialState.team.email = this.props.email; + initialState.team.allowed_domains = ''; + initialState.invites = []; + initialState.invites.push(''); + initialState.invites.push(''); + initialState.invites.push(''); + initialState.user = {}; + initialState.hash = this.props.hash; + initialState.data = this.props.data; + } + + this.state = initialState; + } + updateParent(state, skipSet) { BrowserStore.setGlobalItem(this.props.hash, state); if (!skipSet) { this.setState(state); } - }, - getInitialState: function() { - var props = BrowserStore.getGlobalItem(this.props.hash); - - if (!props) { - props = {}; - props.wizard = 'welcome'; - props.team = {}; - props.team.email = this.props.email; - props.team.allowed_domains = ''; - props.invites = []; - props.invites.push(''); - props.invites.push(''); - props.invites.push(''); - props.user = {}; - props.hash = this.props.hash; - props.data = this.props.data; - } - - return props; - }, - render: function() { + } + render() { if (this.state.wizard === 'welcome') { - return <WelcomePage state={this.state} updateParent={this.updateParent} />; + return (<WelcomePage + state={this.state} + updateParent={this.updateParent} + />); } if (this.state.wizard === 'team_display_name') { - return <TeamDisplayNamePage state={this.state} updateParent={this.updateParent} />; + return (<TeamDisplayNamePage + state={this.state} + updateParent={this.updateParent} + />); } if (this.state.wizard === 'team_url') { - return <TeamURLPage state={this.state} updateParent={this.updateParent} />; + return (<TeamURLPage + state={this.state} + updateParent={this.updateParent} + />); } if (this.state.wizard === 'allowed_domains') { - return <AllowedDomainsPage state={this.state} updateParent={this.updateParent} />; + return (<AllowedDomainsPage + state={this.state} + updateParent={this.updateParent} + />); } if (this.state.wizard === 'send_invites') { - return <SendInivtesPage state={this.state} updateParent={this.updateParent} />; + return (<SendInivtesPage + state={this.state} + updateParent={this.updateParent} + />); } if (this.state.wizard === 'username') { - return <UsernamePage state={this.state} updateParent={this.updateParent} />; + return (<UsernamePage + state={this.state} + updateParent={this.updateParent} + />); } if (this.state.wizard === 'password') { - return <PasswordPage state={this.state} updateParent={this.updateParent} />; + return (<PasswordPage + state={this.state} + updateParent={this.updateParent} + />); } return (<div>You've already completed the signup process for this invitation or this invitation has expired.</div>); } -}); +} + +SignupTeamComplete.defaultProps = { + hash: '', + email: '', + data: '' +}; +SignupTeamComplete.propTypes = { + hash: React.PropTypes.string, + email: React.PropTypes.string, + data: React.PropTypes.string +}; diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx index 2080cc191..67e85d4de 100644 --- a/web/react/components/signup_user_complete.jsx +++ b/web/react/components/signup_user_complete.jsx @@ -7,11 +7,31 @@ var UserStore = require('../stores/user_store.jsx'); var BrowserStore = require('../stores/browser_store.jsx'); var Constants = require('../utils/constants.jsx'); -module.exports = React.createClass({ - handleSubmit: function(e) { +export default class SignupUserComplete extends React.Component { + constructor(props) { + super(props); + + this.handleSubmit = this.handleSubmit.bind(this); + + var initialState = BrowserStore.getGlobalItem(this.props.hash); + + if (!initialState) { + initialState = {}; + initialState.wizard = 'welcome'; + initialState.user = {}; + initialState.user.team_id = this.props.teamId; + initialState.user.email = this.props.email; + initialState.hash = this.props.hash; + initialState.data = this.props.data; + initialState.original_email = this.props.email; + } + + this.state = initialState; + } + handleSubmit(e) { e.preventDefault(); - this.state.user.username = this.refs.name.getDOMNode().value.trim(); + this.state.user.username = React.findDOMNode(this.refs.name).value.trim(); if (!this.state.user.username) { this.setState({nameError: 'This field is required', emailError: '', passwordError: '', serverError: ''}); return; @@ -31,14 +51,14 @@ module.exports = React.createClass({ return; } - this.state.user.email = this.refs.email.getDOMNode().value.trim(); + this.state.user.email = React.findDOMNode(this.refs.email).value.trim(); if (!this.state.user.email) { this.setState({nameError: '', emailError: 'This field is required', passwordError: ''}); return; } - this.state.user.password = this.refs.password.getDOMNode().value.trim(); - if (!this.state.user.password || this.state.user.password .length < 5) { + this.state.user.password = React.findDOMNode(this.refs.password).value.trim(); + if (!this.state.user.password || this.state.user.password .length < 5) { this.setState({nameError: '', emailError: '', passwordError: 'Please enter at least 5 characters', serverError: ''}); return; } @@ -48,11 +68,11 @@ module.exports = React.createClass({ this.state.user.allow_marketing = true; client.createUser(this.state.user, this.state.data, this.state.hash, - function(data) { + function createUserSuccess() { client.track('signup', 'signup_user_02_complete'); client.loginByEmail(this.props.teamName, this.state.user.email, this.state.user.password, - function(data) { + function emailLoginSuccess(data) { UserStore.setLastEmail(this.state.user.email); UserStore.setCurrentUser(data); if (this.props.hash > 0) { @@ -60,7 +80,7 @@ module.exports = React.createClass({ } window.location.href = '/'; }.bind(this), - function(err) { + function emailLoginFailure(err) { if (err.message === 'Login failed because email address has not been verified') { window.location.href = '/verify_email?email=' + encodeURIComponent(this.state.user.email) + '&teamname=' + encodeURIComponent(this.props.teamName); } else { @@ -69,28 +89,12 @@ module.exports = React.createClass({ }.bind(this) ); }.bind(this), - function(err) { + function createUserFailure(err) { this.setState({serverError: err.message}); }.bind(this) ); - }, - getInitialState: function() { - var state = BrowserStore.getGlobalItem(this.props.hash); - - if (!state) { - state = {}; - state.wizard = 'welcome'; - state.user = {}; - state.user.team_id = this.props.teamId; - state.user.email = this.props.email; - state.hash = this.props.hash; - state.data = this.props.data; - state.original_email = this.props.email; - } - - return state; - }, - render: function() { + } + render() { client.track('signup', 'signup_user_01_welcome'); if (this.state.wizard === 'finished') { @@ -134,16 +138,24 @@ module.exports = React.createClass({ yourEmailIs = <span>Your email address is {this.state.user.email}. You'll use this address to sign in to {config.SiteName}.</span>; } - var emailContainerStyle = "margin--extra"; + var emailContainerStyle = 'margin--extra'; if (this.state.original_email) { - emailContainerStyle = "hidden"; + emailContainerStyle = 'hidden'; } var email = ( <div className={emailContainerStyle}> <h5><strong>What's your email address?</strong></h5> <div className={emailDivStyle}> - <input type='email' ref='email' className='form-control' defaultValue={this.state.user.email} placeholder='' maxLength='128' autoFocus={true} /> + <input + type='email' + ref='email' + className='form-control' + defaultValue={this.state.user.email} + placeholder='' + maxLength='128' + autoFocus={true} + /> {emailError} </div> </div> @@ -155,7 +167,10 @@ module.exports = React.createClass({ var signupMessage = []; if (authServices.indexOf(Constants.GITLAB_SERVICE) >= 0) { signupMessage.push( - <a className='btn btn-custom-login gitlab' href={'/' + this.props.teamName + '/signup/gitlab' + window.location.search}> + <a + className='btn btn-custom-login gitlab' + href={'/' + this.props.teamName + '/signup/gitlab' + window.location.search} + > <span className='icon' /> <span>with GitLab</span> </a> @@ -172,7 +187,13 @@ module.exports = React.createClass({ <div className='margin--extra'> <h5><strong>Choose your username</strong></h5> <div className={nameDivStyle}> - <input type='text' ref='name' className='form-control' placeholder='' maxLength='128' /> + <input + type='text' + ref='name' + className='form-control' + placeholder='' + maxLength='128' + /> {nameError} <p className='form__hint'>Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'</p> </div> @@ -180,12 +201,26 @@ module.exports = React.createClass({ <div className='margin--extra'> <h5><strong>Choose your password</strong></h5> <div className={passwordDivStyle}> - <input type='password' ref='password' className='form-control' placeholder='' maxLength='128' /> + <input + type='password' + ref='password' + className='form-control' + placeholder='' + maxLength='128' + /> {passwordError} </div> </div> </div> - <p className='margin--extra'><button type='submit' onClick={this.handleSubmit} className='btn-primary btn'>Create Account</button></p> + <p className='margin--extra'> + <button + type='submit' + onClick={this.handleSubmit} + className='btn-primary btn' + > + Create Account + </button> + </p> </div> ); } @@ -209,7 +244,10 @@ module.exports = React.createClass({ return ( <div> <form> - <img className='signup-team-logo' src='/static/images/logo.png' /> + <img + className='signup-team-logo' + src='/static/images/logo.png' + /> <h5 className='margin--less'>Welcome to:</h5> <h2 className='signup-team__name'>{this.props.teamDisplayName}</h2> <h2 className='signup-team__subdomain'>on {config.SiteName}</h2> @@ -222,6 +260,23 @@ module.exports = React.createClass({ </div> ); } -}); - +} +SignupUserComplete.defaultProps = { + teamName: '', + hash: '', + teamId: '', + email: '', + data: null, + authServices: '', + teamDisplayName: '' +}; +SignupUserComplete.propTypes = { + teamName: React.PropTypes.string, + hash: React.PropTypes.string, + teamId: React.PropTypes.string, + email: React.PropTypes.string, + data: React.PropTypes.string, + authServices: React.PropTypes.string, + teamDisplayName: React.PropTypes.string +}; diff --git a/web/react/components/team_general_tab.jsx b/web/react/components/team_general_tab.jsx index fd2a22731..2966a8a9a 100644 --- a/web/react/components/team_general_tab.jsx +++ b/web/react/components/team_general_tab.jsx @@ -1,11 +1,11 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var SettingItemMin = require('./setting_item_min.jsx'); -var SettingItemMax = require('./setting_item_max.jsx'); +const SettingItemMin = require('./setting_item_min.jsx'); +const SettingItemMax = require('./setting_item_max.jsx'); -var client = require('../utils/client.jsx'); -var utils = require('../utils/utils.jsx'); +const Client = require('../utils/client.jsx'); +const Utils = require('../utils/utils.jsx'); export default class GeneralTab extends React.Component { constructor(props) { @@ -21,10 +21,10 @@ export default class GeneralTab extends React.Component { handleNameSubmit(e) { e.preventDefault(); - var state = {serverError: '', clientError: ''}; - var valid = true; + let state = {serverError: '', clientError: ''}; + let valid = true; - var name = this.state.name.trim(); + const name = this.state.name.trim(); if (!name) { state.clientError = 'This field is required'; valid = false; @@ -41,10 +41,10 @@ export default class GeneralTab extends React.Component { return; } - var data = {}; + let data = {}; data.new_name = name; - client.updateTeamDisplayName(data, + Client.updateTeamDisplayName(data, function nameChangeSuccess() { this.props.updateSection(''); $('#team_settings').modal('hide'); @@ -84,8 +84,8 @@ export default class GeneralTab extends React.Component { this.setState({name: e.target.value}); } render() { - var clientError = null; - var serverError = null; + let clientError = null; + let serverError = null; if (this.state.clientError) { clientError = this.state.clientError; } @@ -93,18 +93,21 @@ export default class GeneralTab extends React.Component { serverError = this.state.serverError; } - var nameSection; + let nameSection; if (this.props.activeSection === 'name') { let inputs = []; - let teamNameLabel = utils.toTitleCase(strings.Team) + ' Name'; - if (utils.isMobile()) { + let teamNameLabel = Utils.toTitleCase(strings.Team) + ' Name'; + if (Utils.isMobile()) { teamNameLabel = ''; } inputs.push( - <div key='teamNameSetting' className='form-group'> + <div + key='teamNameSetting' + className='form-group' + > <label className='col-sm-5 control-label'>{teamNameLabel}</label> <div className='col-sm-7'> <input @@ -119,7 +122,7 @@ export default class GeneralTab extends React.Component { nameSection = ( <SettingItemMax - title={utils.toTitleCase(strings.Team) + ' Name'} + title={`${Utils.toTitleCase(strings.Team)} Name`} inputs={inputs} submit={this.handleNameSubmit} server_error={serverError} @@ -132,7 +135,7 @@ export default class GeneralTab extends React.Component { nameSection = ( <SettingItemMin - title={utils.toTitleCase(strings.Team) + ' Name'} + title={`${Utils.toTitleCase(strings.Team)} Name`} describe={describe} updateSection={this.onUpdateSection} /> diff --git a/web/react/components/team_settings_modal.jsx b/web/react/components/team_settings_modal.jsx index 7e65e8cab..668bf76cf 100644 --- a/web/react/components/team_settings_modal.jsx +++ b/web/react/components/team_settings_modal.jsx @@ -1,70 +1,96 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var SettingsSidebar = require('./settings_sidebar.jsx'); -var TeamSettings = require('./team_settings.jsx'); +const SettingsSidebar = require('./settings_sidebar.jsx'); +const TeamSettings = require('./team_settings.jsx'); -module.exports = React.createClass({ - displayName: 'Team Settings Modal', - propTypes: { - teamDisplayName: React.PropTypes.string.isRequired - }, - componentDidMount: function() { - $('body').on('click', '.modal-back', function onClick() { +export default class TeamSettingsModal extends React.Component { + constructor(props) { + super(props); + + this.updateTab = this.updateTab.bind(this); + this.updateSection = this.updateSection.bind(this); + + this.state = { + activeTab: 'general', + activeSection: '' + }; + } + componentDidMount() { + $('body').on('click', '.modal-back', function handleBackClick() { $(this).closest('.modal-dialog').removeClass('display--content'); }); - $('body').on('click', '.modal-header .close', function onClick() { + $('body').on('click', '.modal-header .close', function handleCloseClick() { setTimeout(function removeContent() { $('.modal-dialog.display--content').removeClass('display--content'); }, 500); }); - }, - updateTab: function(tab) { + } + updateTab(tab) { this.setState({activeTab: tab, activeSection: ''}); - }, - updateSection: function(section) { + } + updateSection(section) { this.setState({activeSection: section}); - }, - getInitialState: function() { - return {activeTab: 'general', activeSection: ''}; - }, - render: function() { - var tabs = []; + } + render() { + let tabs = []; tabs.push({name: 'general', uiName: 'General', icon: 'glyphicon glyphicon-cog'}); tabs.push({name: 'import', uiName: 'Import', icon: 'glyphicon glyphicon-upload'}); tabs.push({name: 'feature', uiName: 'Advanced', icon: 'glyphicon glyphicon-wrench'}); return ( - <div className='modal fade' ref='modal' id='team_settings' role='dialog' tabIndex='-1' aria-hidden='true'> - <div className='modal-dialog settings-modal'> - <div className='modal-content'> - <div className='modal-header'> - <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button> - <h4 className='modal-title' ref='title'>Team Settings</h4> - </div> - <div className='modal-body'> - <div className='settings-table'> - <div className='settings-links'> - <SettingsSidebar - tabs={tabs} - activeTab={this.state.activeTab} - updateTab={this.updateTab} - /> + <div + className='modal fade' + ref='modal' + id='team_settings' + role='dialog' + tabIndex='-1' + aria-hidden='true' + > + <div className='modal-dialog settings-modal'> + <div className='modal-content'> + <div className='modal-header'> + <button + type='button' + className='close' + data-dismiss='modal' + aria-label='Close' + > + <span aria-hidden='true'>×</span> + </button> + <h4 + className='modal-title' + ref='title' + > + Team Settings + </h4> </div> - <div className='settings-content minimize-settings'> - <TeamSettings - activeTab={this.state.activeTab} - activeSection={this.state.activeSection} - updateSection={this.updateSection} - teamDisplayName={this.props.teamDisplayName} - /> + <div className='modal-body'> + <div className='settings-table'> + <div className='settings-links'> + <SettingsSidebar + tabs={tabs} + activeTab={this.state.activeTab} + updateTab={this.updateTab} + /> + </div> + <div className='settings-content minimize-settings'> + <TeamSettings + activeTab={this.state.activeTab} + activeSection={this.state.activeSection} + updateSection={this.updateSection} + teamDisplayName={this.props.teamDisplayName} + /> + </div> + </div> </div> </div> - </div> </div> - </div> </div> ); } -}); +} +TeamSettingsModal.propTypes = { + teamDisplayName: React.PropTypes.string.isRequired +}; diff --git a/web/react/components/team_signup_display_name_page.jsx b/web/react/components/team_signup_display_name_page.jsx index b5e93de1b..de756f4d5 100644 --- a/web/react/components/team_signup_display_name_page.jsx +++ b/web/react/components/team_signup_display_name_page.jsx @@ -4,21 +4,24 @@ var utils = require('../utils/utils.jsx'); var client = require('../utils/client.jsx'); -module.exports = React.createClass({ - displayName: 'TeamSignupDisplayNamePage', - propTypes: { - state: React.PropTypes.object, - updateParent: React.PropTypes.func - }, - submitBack: function(e) { +export default class TeamSignupDisplayNamePage extends React.Component { + constructor(props) { + super(props); + + this.submitBack = this.submitBack.bind(this); + this.submitNext = this.submitNext.bind(this); + + this.state = {}; + } + submitBack(e) { e.preventDefault(); this.props.state.wizard = 'welcome'; this.props.updateParent(this.props.state); - }, - submitNext: function(e) { + } + submitNext(e) { e.preventDefault(); - var displayName = this.refs.name.getDOMNode().value.trim(); + var displayName = React.findDOMNode(this.refs.name).value.trim(); if (!displayName) { this.setState({nameError: 'This field is required'}); return; @@ -28,15 +31,12 @@ module.exports = React.createClass({ this.props.state.team.display_name = displayName; this.props.state.team.name = utils.cleanUpUrlable(displayName); this.props.updateParent(this.props.state); - }, - getInitialState: function() { - return {}; - }, - handleFocus: function(e) { + } + handleFocus(e) { e.preventDefault(); e.currentTarget.select(); - }, - render: function() { + } + render() { client.track('signup', 'signup_team_02_name'); var nameError = null; @@ -49,24 +49,48 @@ module.exports = React.createClass({ return ( <div> <form> - <img className='signup-team-logo' src='/static/images/logo.png' /> + <img + className='signup-team-logo' + src='/static/images/logo.png' /> <h2>{utils.toTitleCase(strings.Team) + ' Name'}</h2> <div className={nameDivClass}> <div className='row'> <div className='col-sm-9'> - <input type='text' ref='name' className='form-control' placeholder='' maxLength='128' defaultValue={this.props.state.team.display_name} autoFocus={true} onFocus={this.handleFocus} /> + <input + type='text' + ref='name' + className='form-control' + placeholder='' + maxLength='128' + defaultValue={this.props.state.team.display_name} + autoFocus={true} + onFocus={this.handleFocus} /> </div> </div> {nameError} </div> <div>{'Name your ' + strings.Team + ' in any language. Your ' + strings.Team + ' name shows in menus and headings.'}</div> - <button type='submit' className='btn btn-primary margin--extra' onClick={this.submitNext}>Next<i className='glyphicon glyphicon-chevron-right'></i></button> + <button + type='submit' + className='btn btn-primary margin--extra' + onClick={this.submitNext} > + Next<i className='glyphicon glyphicon-chevron-right'></i> + </button> <div className='margin--extra'> - <a href='#' onClick={this.submitBack}>Back to previous step</a> + <a + href='#' + onClick={this.submitBack}> + Back to previous step + </a> </div> </form> </div> ); } -}); +} + +TeamSignupDisplayNamePage.propTypes = { + state: React.PropTypes.object, + updateParent: React.PropTypes.func +}; diff --git a/web/react/components/team_signup_email_item.jsx b/web/react/components/team_signup_email_item.jsx index 11cd17e74..10bb2d69e 100644 --- a/web/react/components/team_signup_email_item.jsx +++ b/web/react/components/team_signup_email_item.jsx @@ -1,28 +1,28 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var utils = require('../utils/utils.jsx'); - -module.exports = React.createClass({ - displayName: 'TeamSignupEmailItem', - propTypes: { - focus: React.PropTypes.bool, - email: React.PropTypes.string - }, - getInitialState: function() { - return {}; - }, - getValue: function() { - return this.refs.email.getDOMNode().value.trim(); - }, - validate: function(teamEmail) { - var email = this.refs.email.getDOMNode().value.trim().toLowerCase(); +const Utils = require('../utils/utils.jsx'); + +export default class TeamSignupEmailItem extends React.Component { + constructor(props) { + super(props); + + this.getValue = this.getValue.bind(this); + this.validate = this.validate.bind(this); + + this.state = {}; + } + getValue() { + return React.findDOMNode(this.refs.email).value.trim(); + } + validate(teamEmail) { + const email = React.findDOMNode(this.refs.email).value.trim().toLowerCase(); if (!email) { return true; } - if (!utils.isEmail(email)) { + if (!Utils.isEmail(email)) { this.state.emailError = 'Please enter a valid email address'; this.setState(this.state); return false; @@ -31,13 +31,14 @@ module.exports = React.createClass({ this.setState(this.state); return false; } + this.state.emailError = ''; this.setState(this.state); return true; - }, - render: function() { - var emailError = null; - var emailDivClass = 'form-group'; + } + render() { + let emailError = null; + let emailDivClass = 'form-group'; if (this.state.emailError) { emailError = <label className='control-label'>{this.state.emailError}</label>; emailDivClass += ' has-error'; @@ -45,9 +46,22 @@ module.exports = React.createClass({ return ( <div className={emailDivClass}> - <input autoFocus={this.props.focus} type='email' ref='email' className='form-control' placeholder='Email Address' defaultValue={this.props.email} maxLength='128' /> + <input + autoFocus={this.props.focus} + type='email' + ref='email' + className='form-control' + placeholder='Email Address' + defaultValue={this.props.email} + maxLength='128' + /> {emailError} </div> ); } -}); +} + +TeamSignupEmailItem.propTypes = { + focus: React.PropTypes.bool, + email: React.PropTypes.string +}; diff --git a/web/react/components/team_signup_password_page.jsx b/web/react/components/team_signup_password_page.jsx index c26be7e93..f36ec1119 100644 --- a/web/react/components/team_signup_password_page.jsx +++ b/web/react/components/team_signup_password_page.jsx @@ -44,7 +44,7 @@ export default class TeamSignupPasswordPage extends React.Component { Client.loginByEmail(teamSignup.team.name, teamSignup.team.email, teamSignup.user.password, function loginSuccess() { UserStore.setLastEmail(teamSignup.team.email); - UserStore.setCurrentUser(teamSignup.user); + UserStore.setCurrentUser(data); if (this.props.hash > 0) { BrowserStore.setGlobalItem(this.props.hash, JSON.stringify({wizard: 'finished'})); } diff --git a/web/react/components/team_signup_send_invites_page.jsx b/web/react/components/team_signup_send_invites_page.jsx index 646a742ba..6d9b0ec03 100644 --- a/web/react/components/team_signup_send_invites_page.jsx +++ b/web/react/components/team_signup_send_invites_page.jsx @@ -2,9 +2,9 @@ // See License.txt for license information. var EmailItem = require('./team_signup_email_item.jsx'); -var utils = require('../utils/utils.jsx'); +var Utils = require('../utils/utils.jsx'); var ConfigStore = require('../stores/config_store.jsx'); -var client = require('../utils/client.jsx'); +var Client = require('../utils/client.jsx'); export default class TeamSignupSendInvitesPage extends React.Component { constructor(props) { @@ -71,7 +71,7 @@ export default class TeamSignupSendInvitesPage extends React.Component { } keySubmit(e) { if (e && e.keyCode === 13) { - this.submitNext(e) + this.submitNext(e); } } componentWillMount() { @@ -92,7 +92,7 @@ export default class TeamSignupSendInvitesPage extends React.Component { } } render() { - client.track('signup', 'signup_team_05_send_invites'); + Client.track('signup', 'signup_team_05_send_invites'); var content = null; var bottomContent = null; @@ -165,7 +165,7 @@ export default class TeamSignupSendInvitesPage extends React.Component { className='signup-team-logo' src='/static/images/logo.png' /> - <h2>{'Invite ' + utils.toTitleCase(strings.Team) + ' Members'}</h2> + <h2>{'Invite ' + Utils.toTitleCase(strings.Team) + ' Members'}</h2> {content} <div className='form-group'> <button @@ -190,6 +190,7 @@ export default class TeamSignupSendInvitesPage extends React.Component { ); } } + TeamSignupSendInvitesPage.propTypes = { state: React.PropTypes.object.isRequired, updateParent: React.PropTypes.func.isRequired diff --git a/web/react/components/team_signup_url_page.jsx b/web/react/components/team_signup_url_page.jsx index beef725e2..2ea6c3680 100644 --- a/web/react/components/team_signup_url_page.jsx +++ b/web/react/components/team_signup_url_page.jsx @@ -1,33 +1,37 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var utils = require('../utils/utils.jsx'); -var client = require('../utils/client.jsx'); -var constants = require('../utils/constants.jsx'); - -module.exports = React.createClass({ - displayName: 'TeamSignupURLPage', - propTypes: { - state: React.PropTypes.object, - updateParent: React.PropTypes.func - }, - submitBack: function(e) { +const Utils = require('../utils/utils.jsx'); +const Client = require('../utils/client.jsx'); +const Constants = require('../utils/constants.jsx'); + +export default class TeamSignupUrlPage extends React.Component { + constructor(props) { + super(props); + + this.submitBack = this.submitBack.bind(this); + this.submitNext = this.submitNext.bind(this); + this.handleFocus = this.handleFocus.bind(this); + + this.state = {nameError: ''}; + } + submitBack(e) { e.preventDefault(); this.props.state.wizard = 'team_display_name'; this.props.updateParent(this.props.state); - }, - submitNext: function(e) { + } + submitNext(e) { e.preventDefault(); - var name = this.refs.name.getDOMNode().value.trim(); + const name = React.findDOMNode(this.refs.name).value.trim(); if (!name) { this.setState({nameError: 'This field is required'}); return; } - var cleanedName = utils.cleanUpUrlable(name); + const cleanedName = Utils.cleanUpUrlable(name); - var urlRegex = /^[a-z]+([a-z\-0-9]+|(__)?)[a-z0-9]+$/g; + const urlRegex = /^[a-z]+([a-z\-0-9]+|(__)?)[a-z0-9]+$/g; if (cleanedName !== name || !urlRegex.test(name)) { this.setState({nameError: "Use only lower case letters, numbers and dashes. Must start with a letter and can't end in a dash."}); return; @@ -36,14 +40,14 @@ module.exports = React.createClass({ return; } - for (var index = 0; index < constants.RESERVED_TEAM_NAMES.length; index++) { - if (cleanedName.indexOf(constants.RESERVED_TEAM_NAMES[index]) === 0) { + for (let index = 0; index < Constants.RESERVED_TEAM_NAMES.length; index++) { + if (cleanedName.indexOf(Constants.RESERVED_TEAM_NAMES[index]) === 0) { this.setState({nameError: 'This team name is unavailable'}); return; } } - client.findTeamByName(name, + Client.findTeamByName(name, function success(data) { if (!data) { if (config.AllowSignupDomainsWizard) { @@ -65,55 +69,88 @@ module.exports = React.createClass({ this.setState(this.state); }.bind(this) ); - }, - getInitialState: function() { - return {}; - }, - handleFocus: function(e) { + } + handleFocus(e) { e.preventDefault(); e.currentTarget.select(); - }, - render: function() { + } + render() { $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'}); - client.track('signup', 'signup_team_03_url'); + Client.track('signup', 'signup_team_03_url'); - var nameError = null; - var nameDivClass = 'form-group'; + let nameError = null; + let nameDivClass = 'form-group'; if (this.state.nameError) { nameError = <label className='control-label'>{this.state.nameError}</label>; nameDivClass += ' has-error'; } + const title = `${Utils.getWindowLocationOrigin()}/`; + return ( <div> <form> - <img className='signup-team-logo' src='/static/images/logo.png' /> - <h2>{utils.toTitleCase(strings.Team) + ' URL'}</h2> + <img + className='signup-team-logo' + src='/static/images/logo.png' + /> + <h2>{`${Utils.toTitleCase(strings.Team)} URL`}</h2> <div className={nameDivClass}> <div className='row'> <div className='col-sm-11'> <div className='input-group input-group--limit'> - <span data-toggle='tooltip' title={utils.getWindowLocationOrigin() + '/'} className='input-group-addon'>{utils.getWindowLocationOrigin() + '/'}</span> - <input type='text' ref='name' className='form-control' placeholder='' maxLength='128' defaultValue={this.props.state.team.name} autoFocus={true} onFocus={this.handleFocus}/> + <span + data-toggle='tooltip' + title={title} + className='input-group-addon' + > + {title} + </span> + <input + type='text' + ref='name' + className='form-control' + placeholder='' + maxLength='128' + defaultValue={this.props.state.team.name} + autoFocus={true} + onFocus={this.handleFocus} + /> </div> </div> </div> {nameError} </div> - <p>{'Choose the web address of your new ' + strings.Team + ':'}</p> + <p>{`Choose the web address of your new ${strings.Team}:`}</p> <ul className='color--light'> <li>Short and memorable is best</li> <li>Use lowercase letters, numbers and dashes</li> <li>Must start with a letter and can't end in a dash</li> </ul> - <button type='submit' className='btn btn-primary margin--extra' onClick={this.submitNext}>Next<i className='glyphicon glyphicon-chevron-right'></i></button> + <button + type='submit' + className='btn btn-primary margin--extra' + onClick={this.submitNext} + > + Next<i className='glyphicon glyphicon-chevron-right'></i> + </button> <div className='margin--extra'> - <a href='#' onClick={this.submitBack}>Back to previous step</a> + <a + href='#' + onClick={this.submitBack} + > + Back to previous step + </a> </div> </form> </div> ); } -}); +} + +TeamSignupUrlPage.propTypes = { + state: React.PropTypes.object, + updateParent: React.PropTypes.func +}; diff --git a/web/react/components/team_signup_username_page.jsx b/web/react/components/team_signup_username_page.jsx index 56882e6a1..8efcd87e1 100644 --- a/web/react/components/team_signup_username_page.jsx +++ b/web/react/components/team_signup_username_page.jsx @@ -1,26 +1,29 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var utils = require('../utils/utils.jsx'); -var client = require('../utils/client.jsx'); +var Utils = require('../utils/utils.jsx'); +var Client = require('../utils/client.jsx'); -module.exports = React.createClass({ - displayName: 'TeamSignupUsernamePage', - propTypes: { - state: React.PropTypes.object, - updateParent: React.PropTypes.func - }, - submitBack: function(e) { +export default class TeamSignupUsernamePage extends React.Component { + constructor(props) { + super(props); + + this.submitBack = this.submitBack.bind(this); + this.submitNext = this.submitNext.bind(this); + + this.state = {}; + } + submitBack(e) { e.preventDefault(); this.props.state.wizard = 'send_invites'; this.props.updateParent(this.props.state); - }, - submitNext: function(e) { + } + submitNext(e) { e.preventDefault(); - var name = this.refs.name.getDOMNode().value.trim(); + var name = React.findDOMNode(this.refs.name).value.trim(); - var usernameError = utils.isValidUsername(name); + var usernameError = Utils.isValidUsername(name); if (usernameError === 'Cannot use a reserved word as a username.') { this.setState({nameError: 'This username is reserved, please choose a new one.'}); return; @@ -32,12 +35,9 @@ module.exports = React.createClass({ this.props.state.wizard = 'password'; this.props.state.user.username = name; this.props.updateParent(this.props.state); - }, - getInitialState: function() { - return {}; - }, - render: function() { - client.track('signup', 'signup_team_06_username'); + } + render() { + Client.track('signup', 'signup_team_06_username'); var nameError = null; var nameDivClass = 'form-group'; @@ -49,7 +49,10 @@ module.exports = React.createClass({ return ( <div> <form> - <img className='signup-team-logo' src='/static/images/logo.png' /> + <img + className='signup-team-logo' + src='/static/images/logo.png' + /> <h2 className='margin--less'>Your username</h2> <h5 className='color--light'>{'Select a memorable username that makes it easy for ' + strings.Team + 'mates to identify you:'}</h5> <div className='inner__content margin--extra'> @@ -57,19 +60,47 @@ module.exports = React.createClass({ <div className='row'> <div className='col-sm-11'> <h5><strong>Choose your username</strong></h5> - <input autoFocus={true} type='text' ref='name' className='form-control' placeholder='' defaultValue={this.props.state.user.username} maxLength='128' /> + <input + autoFocus={true} + type='text' + ref='name' + className='form-control' + placeholder='' + defaultValue={this.props.state.user.username} + maxLength='128' + /> <div className='color--light form__hint'>Usernames must begin with a letter and contain 3 to 15 characters made up of lowercase letters, numbers, and the symbols '.', '-' and '_'</div> </div> </div> {nameError} </div> </div> - <button type='submit' className='btn btn-primary margin--extra' onClick={this.submitNext}>Next<i className='glyphicon glyphicon-chevron-right'></i></button> + <button + type='submit' + className='btn btn-primary margin--extra' + onClick={this.submitNext} + > + Next + <i className='glyphicon glyphicon-chevron-right'></i> + </button> <div className='margin--extra'> - <a href='#' onClick={this.submitBack}>Back to previous step</a> + <a + href='#' + onClick={this.submitBack} + > + Back to previous step + </a> </div> </form> </div> ); } -}); +} + +TeamSignupUsernamePage.defaultProps = { + state: null +}; +TeamSignupUsernamePage.propTypes = { + state: React.PropTypes.object, + updateParent: React.PropTypes.func +}; diff --git a/web/react/components/team_signup_welcome_page.jsx b/web/react/components/team_signup_welcome_page.jsx index f0c680bd8..e742cba2f 100644 --- a/web/react/components/team_signup_welcome_page.jsx +++ b/web/react/components/team_signup_welcome_page.jsx @@ -1,17 +1,22 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var utils = require('../utils/utils.jsx'); -var client = require('../utils/client.jsx'); +var Utils = require('../utils/utils.jsx'); +var Client = require('../utils/client.jsx'); var BrowserStore = require('../stores/browser_store.jsx'); -module.exports = React.createClass({ - displayName: 'TeamSignupWelcomePage', - propTypes: { - state: React.PropTypes.object, - updateParent: React.PropTypes.func - }, - submitNext: function(e) { +export default class TeamSignupWelcomePage extends React.Component { + constructor(props) { + super(props); + + this.submitNext = this.submitNext.bind(this); + this.handleDiffEmail = this.handleDiffEmail.bind(this); + this.handleDiffSubmit = this.handleDiffSubmit.bind(this); + this.handleKeyPress = this.handleKeyPress.bind(this); + + this.state = {useDiff: false}; + } + submitNext(e) { if (!BrowserStore.isLocalStorageSupported()) { this.setState({storageError: 'This service requires local storage to be enabled. Please enable it or exit private browsing.'}); return; @@ -19,18 +24,18 @@ module.exports = React.createClass({ e.preventDefault(); this.props.state.wizard = 'team_display_name'; this.props.updateParent(this.props.state); - }, - handleDiffEmail: function(e) { + } + handleDiffEmail(e) { e.preventDefault(); this.setState({useDiff: true}); - }, - handleDiffSubmit: function(e) { + } + handleDiffSubmit(e) { e.preventDefault(); var state = {useDiff: true, serverError: ''}; - var email = this.refs.email.getDOMNode().value.trim().toLowerCase(); - if (!email || !utils.isEmail(email)) { + var email = React.findDOMNode(this.refs.email).value.trim().toLowerCase(); + if (!email || !Utils.isEmail(email)) { state.emailError = 'Please enter a valid email address'; this.setState(state); return; @@ -41,7 +46,7 @@ module.exports = React.createClass({ } state.emailError = ''; - client.signupTeam(email, + Client.signupTeam(email, function success(data) { if (data.follow_link) { window.location.href = data.follow_link; @@ -56,23 +61,20 @@ module.exports = React.createClass({ this.setState(this.state); }.bind(this) ); - }, - getInitialState: function() { - return {useDiff: false}; - }, - handleKeyPress: function(event) { + } + handleKeyPress(event) { if (event.keyCode === 13) { this.submitNext(event); } - }, - componentWillMount: function() { + } + componentWillMount() { document.addEventListener('keyup', this.handleKeyPress, false); - }, - componentWillUnmount: function() { + } + componentWillUnmount() { document.removeEventListener('keyup', this.handleKeyPress, false); - }, - render: function() { - client.track('signup', 'signup_team_01_welcome'); + } + render() { + Client.track('signup', 'signup_team_01_welcome'); var storageError = null; if (this.state.storageError) { @@ -105,7 +107,10 @@ module.exports = React.createClass({ return ( <div> <p> - <img className='signup-team-logo' src='/static/images/logo.png' /> + <img + className='signup-team-logo' + src='/static/images/logo.png' + /> <h3 className='sub-heading'>Welcome to:</h3> <h1 className='margin--top-none'>{config.SiteName}</h1> </p> @@ -121,7 +126,14 @@ module.exports = React.createClass({ You can add other administrators later. </p> <div className='form-group'> - <button className='btn-primary btn form-group' type='submit' onClick={this.submitNext}><i className='glyphicon glyphicon-ok'></i>Yes, this address is correct</button> + <button + className='btn-primary btn form-group' + type='submit' + onClick={this.submitNext} + > + <i className='glyphicon glyphicon-ok'></i> + Yes, this address is correct + </button> {storageError} </div> <hr /> @@ -129,16 +141,42 @@ module.exports = React.createClass({ <div className={emailDivClass}> <div className='row'> <div className='col-sm-9'> - <input type='email' ref='email' className='form-control' placeholder='Email Address' maxLength='128' /> + <input + type='email' + ref='email' + className='form-control' + placeholder='Email Address' + maxLength='128' + /> </div> </div> {emailError} </div> {serverError} - <button className='btn btn-md btn-primary' type='button' onClick={this.handleDiffSubmit}>Use this instead</button> + <button + className='btn btn-md btn-primary' + type='button' + onClick={this.handleDiffSubmit} + > + Use this instead + </button> </div> - <a href='#' onClick={this.handleDiffEmail} className={differentEmailLinkClass}>Use a different email</a> + <a + href='#' + onClick={this.handleDiffEmail} + className={differentEmailLinkClass} + > + Use a different email + </a> </div> ); } -}); +} + +TeamSignupWelcomePage.defaultProps = { + state: {} +}; +TeamSignupWelcomePage.propTypes = { + updateParent: React.PropTypes.func.isRequired, + state: React.PropTypes.object +}; diff --git a/web/react/components/team_signup_with_email.jsx b/web/react/components/team_signup_with_email.jsx index c7204880f..c0bbb7da9 100644 --- a/web/react/components/team_signup_with_email.jsx +++ b/web/react/components/team_signup_with_email.jsx @@ -1,8 +1,8 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var utils = require('../utils/utils.jsx'); -var client = require('../utils/client.jsx'); +const Utils = require('../utils/utils.jsx'); +const Client = require('../utils/client.jsx'); export default class EmailSignUpPage extends React.Component { constructor() { @@ -14,11 +14,11 @@ export default class EmailSignUpPage extends React.Component { } handleSubmit(e) { e.preventDefault(); - var team = {}; - var state = {serverError: ''}; + let team = {}; + let state = {serverError: ''}; - team.email = this.refs.email.getDOMNode().value.trim().toLowerCase(); - if (!team.email || !utils.isEmail(team.email)) { + team.email = React.findDOMNode(this.refs.email).value.trim().toLowerCase(); + if (!team.email || !Utils.isEmail(team.email)) { state.emailError = 'Please enter a valid email address'; state.inValid = true; } else { @@ -30,12 +30,12 @@ export default class EmailSignUpPage extends React.Component { return; } - client.signupTeam(team.email, + Client.signupTeam(team.email, function success(data) { if (data.follow_link) { window.location.href = data.follow_link; } else { - window.location.href = '/signup_team_confirm/?email=' + encodeURIComponent(team.email); + window.location.href = `/signup_team_confirm/?email=${encodeURIComponent(team.email)}`; } }, function fail(err) { @@ -69,7 +69,7 @@ export default class EmailSignUpPage extends React.Component { </button> </div> <div className='form-group margin--extra-2x'> - <span><a href='/find_team'>{'Find my ' + strings.Team}</a></span> + <span><a href='/find_team'>{`Find my ${strings.Team}`}</a></span> </div> </form> ); diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index efd2dd810..0408a262d 100644 --- a/web/react/components/textbox.jsx +++ b/web/react/components/textbox.jsx @@ -1,66 +1,93 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); -var PostStore = require('../stores/post_store.jsx'); -var CommandList = require('./command_list.jsx'); -var ErrorStore = require('../stores/error_store.jsx'); -var AsyncClient = require('../utils/async_client.jsx'); - -var utils = require('../utils/utils.jsx'); -var Constants = require('../utils/constants.jsx'); -var ActionTypes = Constants.ActionTypes; +const AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); +const PostStore = require('../stores/post_store.jsx'); +const CommandList = require('./command_list.jsx'); +const ErrorStore = require('../stores/error_store.jsx'); +const AsyncClient = require('../utils/async_client.jsx'); + +const Utils = require('../utils/utils.jsx'); +const Constants = require('../utils/constants.jsx'); +const ActionTypes = Constants.ActionTypes; + +export default class Textbox extends React.Component { + constructor(props) { + super(props); + + this.getStateFromStores = this.getStateFromStores.bind(this); + this.onListenerChange = this.onListenerChange.bind(this); + this.onRecievedError = this.onRecievedError.bind(this); + this.onTimerInterrupt = this.onTimerInterrupt.bind(this); + this.updateMentionTab = this.updateMentionTab.bind(this); + this.handleChange = this.handleChange.bind(this); + this.handleKeyPress = this.handleKeyPress.bind(this); + this.handleKeyDown = this.handleKeyDown.bind(this); + this.handleBackspace = this.handleBackspace.bind(this); + this.checkForNewMention = this.checkForNewMention.bind(this); + this.addMention = this.addMention.bind(this); + this.addCommand = this.addCommand.bind(this); + this.resize = this.resize.bind(this); + this.handleFocus = this.handleFocus.bind(this); + this.handleBlur = this.handleBlur.bind(this); + this.handlePaste = this.handlePaste.bind(this); + + this.state = { + mentionText: '-1', + mentions: [], + connection: '', + timerInterrupt: null + }; + + this.caret = -1; + this.addedMention = false; + this.doProcessMentions = false; + this.mentions = []; + } + getStateFromStores() { + const error = ErrorStore.getLastError(); -function getStateFromStores() { - var error = ErrorStore.getLastError(); + if (error) { + return {message: error.message}; + } - if (error) { - return {message: error.message}; + return {message: null}; } - return {message: null}; -} - -module.exports = React.createClass({ - displayName: 'Textbox', - caret: -1, - addedMention: false, - doProcessMentions: false, - mentions: [], - componentDidMount: function() { + componentDidMount() { PostStore.addAddMentionListener(this.onListenerChange); ErrorStore.addChangeListener(this.onRecievedError); this.resize(); this.updateMentionTab(null); - }, - componentWillUnmount: function() { + } + componentWillUnmount() { PostStore.removeAddMentionListener(this.onListenerChange); ErrorStore.removeChangeListener(this.onRecievedError); - }, - onListenerChange: function(id, username) { + } + onListenerChange(id, username) { if (id === this.props.id) { this.addMention(username); } - }, - onRecievedError: function() { - var errorState = getStateFromStores(); + } + onRecievedError() { + const errorState = this.getStateFromStores(); - if (this.state.timerInterrupt != null) { + if (this.state.timerInterrupt !== null) { window.clearInterval(this.state.timerInterrupt); this.setState({timerInterrupt: null}); } if (errorState.message === 'There appears to be a problem with your internet connection') { this.setState({connection: 'bad-connection'}); - var timerInterrupt = window.setInterval(this.onTimerInterrupt, 5000); + const timerInterrupt = window.setInterval(this.onTimerInterrupt, 5000); this.setState({timerInterrupt: timerInterrupt}); } else { this.setState({connection: ''}); } - }, - onTimerInterrupt: function() { - //Since these should only happen when you have no connection and slightly briefly after any - //performance hit should not matter + } + onTimerInterrupt() { + // Since these should only happen when you have no connection and slightly briefly after any + // performance hit should not matter if (this.state.connection === 'bad-connection') { AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_ERROR, @@ -72,10 +99,10 @@ module.exports = React.createClass({ window.clearInterval(this.state.timerInterrupt); this.setState({timerInterrupt: null}); - }, - componentDidUpdate: function() { + } + componentDidUpdate() { if (this.caret >= 0) { - utils.setCaretPosition(this.refs.message.getDOMNode(), this.caret); + Utils.setCaretPosition(React.findDOMNode(this.refs.message), this.caret); this.caret = -1; } if (this.doProcessMentions) { @@ -83,40 +110,35 @@ module.exports = React.createClass({ this.doProcessMentions = false; } this.resize(); - }, - componentWillReceiveProps: function(nextProps) { + } + componentWillReceiveProps(nextProps) { if (!this.addedMention) { this.checkForNewMention(nextProps.messageText); } - var text = this.refs.message.getDOMNode().value; + const text = React.findDOMNode(this.refs.message).value; if (nextProps.channelId !== this.props.channelId || nextProps.messageText !== text) { this.doProcessMentions = true; } this.addedMention = false; this.refs.commands.getSuggestedCommands(nextProps.messageText); this.resize(); - }, - getInitialState: function() { - return {mentionText: '-1', mentions: [], connection: '', timerInterrupt: null}; - }, - updateMentionTab: function(mentionText) { - var self = this; - + } + updateMentionTab(mentionText) { // using setTimeout so dispatch isn't called during an in progress dispatch - setTimeout(function() { + setTimeout(function updateMentionTabAfterTimeout() { AppDispatcher.handleViewAction({ type: ActionTypes.RECIEVED_MENTION_DATA, - id: self.props.id, + id: this.props.id, mention_text: mentionText }); - }, 1); - }, - handleChange: function() { - this.props.onUserInput(this.refs.message.getDOMNode().value); + }.bind(this), 1); + } + handleChange() { + this.props.onUserInput(React.findDOMNode(this.refs.message).value); this.resize(); - }, - handleKeyPress: function(e) { - var text = this.refs.message.getDOMNode().value; + } + handleKeyPress(e) { + const text = React.findDOMNode(this.refs.message).value; if (!this.refs.commands.isEmpty() && text.indexOf('/') === 0 && e.which === 13) { this.refs.commands.addFirstCommand(); @@ -125,10 +147,10 @@ module.exports = React.createClass({ } if (!this.doProcessMentions) { - var caret = utils.getCaretPosition(this.refs.message.getDOMNode()); - var preText = text.substring(0, caret); - var lastSpace = preText.lastIndexOf(' '); - var lastAt = preText.lastIndexOf('@'); + const caret = Utils.getCaretPosition(React.findDOMNode(this.refs.message)); + const preText = text.substring(0, caret); + const lastSpace = preText.lastIndexOf(' '); + const lastAt = preText.lastIndexOf('@'); if (caret > lastAt && lastSpace < lastAt) { this.doProcessMentions = true; @@ -136,18 +158,18 @@ module.exports = React.createClass({ } this.props.onKeyPress(e); - }, - handleKeyDown: function(e) { - if (utils.getSelectedText(this.refs.message.getDOMNode()) !== '') { + } + handleKeyDown(e) { + if (Utils.getSelectedText(React.findDOMNode(this.refs.message)) !== '') { this.doProcessMentions = true; } if (e.keyCode === 8) { this.handleBackspace(e); } - }, - handleBackspace: function() { - var text = this.refs.message.getDOMNode().value; + } + handleBackspace() { + const text = React.findDOMNode(this.refs.message).value; if (text.indexOf('/') === 0) { this.refs.commands.getSuggestedCommands(text.substring(0, text.length - 1)); } @@ -156,21 +178,21 @@ module.exports = React.createClass({ return; } - var caret = utils.getCaretPosition(this.refs.message.getDOMNode()); - var preText = text.substring(0, caret); - var lastSpace = preText.lastIndexOf(' '); - var lastAt = preText.lastIndexOf('@'); + const caret = Utils.getCaretPosition(React.findDOMNode(this.refs.message)); + const preText = text.substring(0, caret); + const lastSpace = preText.lastIndexOf(' '); + const lastAt = preText.lastIndexOf('@'); if (caret > lastAt && (lastSpace > lastAt || lastSpace === -1)) { this.doProcessMentions = true; } - }, - checkForNewMention: function(text) { - var caret = utils.getCaretPosition(this.refs.message.getDOMNode()); + } + checkForNewMention(text) { + const caret = Utils.getCaretPosition(React.findDOMNode(this.refs.message)); - var preText = text.substring(0, caret); + const preText = text.substring(0, caret); - var atIndex = preText.lastIndexOf('@'); + const atIndex = preText.lastIndexOf('@'); // The @ character not typed, so nothing to do. if (atIndex === -1) { @@ -178,8 +200,8 @@ module.exports = React.createClass({ return; } - var lastCharSpace = preText.lastIndexOf(String.fromCharCode(160)); - var lastSpace = preText.lastIndexOf(' '); + const lastCharSpace = preText.lastIndexOf(String.fromCharCode(160)); + const lastSpace = preText.lastIndexOf(' '); // If there is a space after the last @, nothing to do. if (lastSpace > atIndex || lastCharSpace > atIndex) { @@ -188,43 +210,43 @@ module.exports = React.createClass({ } // Get the name typed so far. - var name = preText.substring(atIndex + 1, preText.length).toLowerCase(); + const name = preText.substring(atIndex + 1, preText.length).toLowerCase(); this.updateMentionTab(name); - }, - addMention: function(name) { - var caret = utils.getCaretPosition(this.refs.message.getDOMNode()); + } + addMention(name) { + const caret = Utils.getCaretPosition(React.findDOMNode(this.refs.message)); - var text = this.props.messageText; + const text = this.props.messageText; - var preText = text.substring(0, caret); + const preText = text.substring(0, caret); - var atIndex = preText.lastIndexOf('@'); + const atIndex = preText.lastIndexOf('@'); // The @ character not typed, so nothing to do. if (atIndex === -1) { return; } - var prefix = text.substring(0, atIndex); - var suffix = text.substring(caret, text.length); + const prefix = text.substring(0, atIndex); + const suffix = text.substring(caret, text.length); this.caret = prefix.length + name.length + 2; this.addedMention = true; this.doProcessMentions = true; - this.props.onUserInput(prefix + '@' + name + ' ' + suffix); - }, - addCommand: function(cmd) { - var elm = this.refs.message.getDOMNode(); + this.props.onUserInput(`${prefix}@${name} ${suffix}`); + } + addCommand(cmd) { + const elm = React.findDOMNode(this.refs.message); elm.value = cmd; this.handleChange(); - }, - resize: function() { - var e = this.refs.message.getDOMNode(); - var w = this.refs.wrapper.getDOMNode(); + } + resize() { + const e = React.findDOMNode(this.refs.message); + const w = React.findDOMNode(this.refs.wrapper); - var lht = parseInt($(e).css('lineHeight'), 10); - var lines = e.scrollHeight / lht; - var mod = 15; + const lht = parseInt($(e).css('lineHeight'), 10); + const lines = e.scrollHeight / lht; + let mod = 15; if (lines < 2.5 || this.props.messageText === '') { mod = 30; @@ -237,28 +259,62 @@ module.exports = React.createClass({ $(e).css({height: 'auto', 'overflow-y': 'scroll'}).height(167); $(w).css({height: 'auto'}).height(167); } - }, - handleFocus: function() { - var elm = this.refs.message.getDOMNode(); + } + handleFocus() { + const elm = React.findDOMNode(this.refs.message); if (elm.title === elm.value) { elm.value = ''; } - }, - handleBlur: function() { - var elm = this.refs.message.getDOMNode(); + } + handleBlur() { + const elm = React.findDOMNode(this.refs.message); if (elm.value === '') { elm.value = elm.title; } - }, - handlePaste: function() { + } + handlePaste() { this.doProcessMentions = true; - }, - render: function() { + } + render() { return ( - <div ref='wrapper' className='textarea-wrapper'> - <CommandList ref='commands' addCommand={this.addCommand} channelId={this.props.channelId} /> - <textarea id={this.props.id} ref='message' className={'form-control custom-textarea ' + this.state.connection} spellCheck='true' autoComplete='off' autoCorrect='off' rows='1' maxLength={Constants.MAX_POST_LEN} placeholder={this.props.createMessage} value={this.props.messageText} onInput={this.handleChange} onChange={this.handleChange} onKeyPress={this.handleKeyPress} onKeyDown={this.handleKeyDown} onFocus={this.handleFocus} onBlur={this.handleBlur} onPaste={this.handlePaste} /> + <div + ref='wrapper' + className='textarea-wrapper' + > + <CommandList + ref='commands' + addCommand={this.addCommand} + channelId={this.props.channelId} + /> + <textarea + id={this.props.id} + ref='message' + className={`form-control custom-textarea ${this.state.connection}`} + spellCheck='true' + autoComplete='off' + autoCorrect='off' + rows='1' + maxLength={Constants.MAX_POST_LEN} + placeholder={this.props.createMessage} + value={this.props.messageText} + onInput={this.handleChange} + onChange={this.handleChange} + onKeyPress={this.handleKeyPress} + onKeyDown={this.handleKeyDown} + onFocus={this.handleFocus} + onBlur={this.handleBlur} + onPaste={this.handlePaste} + /> </div> ); } -}); +} + +Textbox.propTypes = { + id: React.PropTypes.string.isRequired, + channelId: React.PropTypes.string, + messageText: React.PropTypes.string.isRequired, + onUserInput: React.PropTypes.func.isRequired, + onKeyPress: React.PropTypes.func.isRequired, + createMessage: React.PropTypes.string.isRequired +}; diff --git a/web/react/components/user_settings_general.jsx b/web/react/components/user_settings_general.jsx index ddd2fb607..ead7ac1d5 100644 --- a/web/react/components/user_settings_general.jsx +++ b/web/react/components/user_settings_general.jsx @@ -194,7 +194,7 @@ export default class UserSettingsGeneralTab extends React.Component { this.props.updateSection(section); } handleClose() { - $(this.getDOMNode()).find('.form-control').each(function clearForms() { + $(React.findDOMNode(this)).find('.form-control').each(function clearForms() { this.value = ''; }); @@ -230,7 +230,6 @@ export default class UserSettingsGeneralTab extends React.Component { } var nameSection; - var self = this; var inputs = []; if (this.props.activeSection === 'name') { @@ -276,9 +275,9 @@ export default class UserSettingsGeneralTab extends React.Component { server_error={serverError} client_error={clientError} updateSection={function clearSection(e) { - self.updateSection(''); + this.updateSection(''); e.preventDefault(); - }} + }.bind(this)} /> ); } else { @@ -297,8 +296,8 @@ export default class UserSettingsGeneralTab extends React.Component { title='Full Name' describe={fullName} updateSection={function updateNameSection() { - self.updateSection('name'); - }} + this.updateSection('name'); + }.bind(this)} /> ); } @@ -335,9 +334,9 @@ export default class UserSettingsGeneralTab extends React.Component { server_error={serverError} client_error={clientError} updateSection={function clearSection(e) { - self.updateSection(''); + this.updateSection(''); e.preventDefault(); - }} + }.bind(this)} /> ); } else { @@ -346,8 +345,8 @@ export default class UserSettingsGeneralTab extends React.Component { title='Nickname' describe={UserStore.getCurrentUser().nickname} updateSection={function updateNicknameSection() { - self.updateSection('nickname'); - }} + this.updateSection('nickname'); + }.bind(this)} /> ); } @@ -384,9 +383,9 @@ export default class UserSettingsGeneralTab extends React.Component { server_error={serverError} client_error={clientError} updateSection={function clearSection(e) { - self.updateSection(''); + this.updateSection(''); e.preventDefault(); - }} + }.bind(this)} /> ); } else { @@ -395,8 +394,8 @@ export default class UserSettingsGeneralTab extends React.Component { title='Username' describe={UserStore.getCurrentUser().username} updateSection={function updateUsernameSection() { - self.updateSection('username'); - }} + this.updateSection('username'); + }.bind(this)} /> ); } @@ -433,9 +432,9 @@ export default class UserSettingsGeneralTab extends React.Component { server_error={serverError} client_error={emailError} updateSection={function clearSection(e) { - self.updateSection(''); + this.updateSection(''); e.preventDefault(); - }} + }.bind(this)} /> ); } else { @@ -444,8 +443,8 @@ export default class UserSettingsGeneralTab extends React.Component { title='Email' describe={UserStore.getCurrentUser().email} updateSection={function updateEmailSection() { - self.updateSection('email'); - }} + this.updateSection('email'); + }.bind(this)} /> ); } @@ -460,9 +459,9 @@ export default class UserSettingsGeneralTab extends React.Component { server_error={serverError} client_error={clientError} updateSection={function clearSection(e) { - self.updateSection(''); + this.updateSection(''); e.preventDefault(); - }} + }.bind(this)} picture={this.state.picture} pictureChange={this.updatePicture} submitActive={this.submitActive} @@ -479,8 +478,8 @@ export default class UserSettingsGeneralTab extends React.Component { title='Profile Picture' describe={minMessage} updateSection={function updatePictureSection() { - self.updateSection('picture'); - }} + this.updateSection('picture'); + }.bind(this)} /> ); } diff --git a/web/react/components/user_settings_modal.jsx b/web/react/components/user_settings_modal.jsx index f5a555951..7ec75e000 100644 --- a/web/react/components/user_settings_modal.jsx +++ b/web/react/components/user_settings_modal.jsx @@ -4,51 +4,75 @@ var SettingsSidebar = require('./settings_sidebar.jsx'); var UserSettings = require('./user_settings.jsx'); -module.exports = React.createClass({ - componentDidMount: function() { - $('body').on('click', '.modal-back', function(){ +export default class UserSettingsModal extends React.Component { + constructor(props) { + super(props); + + this.updateTab = this.updateTab.bind(this); + this.updateSection = this.updateSection.bind(this); + + this.state = {active_tab: 'general', active_section: ''}; + } + componentDidMount() { + $('body').on('click', '.modal-back', function changeDisplay() { $(this).closest('.modal-dialog').removeClass('display--content'); }); - $('body').on('click', '.modal-header .close', function(){ - setTimeout(function() { + $('body').on('click', '.modal-header .close', function closeModal() { + setTimeout(function finishClose() { $('.modal-dialog.display--content').removeClass('display--content'); }, 500); }); - }, - updateTab: function(tab) { - this.setState({ active_tab: tab }); - }, - updateSection: function(section) { - this.setState({ active_section: section }); - }, - getInitialState: function() { - return { active_tab: "general", active_section: "" }; - }, - render: function() { + } + updateTab(tab) { + this.setState({active_tab: tab}); + } + updateSection(section) { + this.setState({active_section: section}); + } + render() { var tabs = []; - tabs.push({name: "general", uiName: "General", icon: "glyphicon glyphicon-cog"}); - tabs.push({name: "security", uiName: "Security", icon: "glyphicon glyphicon-lock"}); - tabs.push({name: "notifications", uiName: "Notifications", icon: "glyphicon glyphicon-exclamation-sign"}); - tabs.push({name: "appearance", uiName: "Appearance", icon: "glyphicon glyphicon-wrench"}); + tabs.push({name: 'general', uiName: 'General', icon: 'glyphicon glyphicon-cog'}); + tabs.push({name: 'security', uiName: 'Security', icon: 'glyphicon glyphicon-lock'}); + tabs.push({name: 'notifications', uiName: 'Notifications', icon: 'glyphicon glyphicon-exclamation-sign'}); + tabs.push({name: 'appearance', uiName: 'Appearance', icon: 'glyphicon glyphicon-wrench'}); return ( - <div className="modal fade" ref="modal" id="user_settings" role="dialog" tabIndex="-1" aria-hidden="true"> - <div className="modal-dialog settings-modal"> - <div className="modal-content"> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title" ref="title">Account Settings</h4> + <div + className='modal fade' + ref='modal' + id='user_settings' + role='dialog' + tabIndex='-1' + aria-hidden='true' + > + <div className='modal-dialog settings-modal'> + <div className='modal-content'> + <div className='modal-header'> + <button + type='button' + className='close' + data-dismiss='modal' + aria-label='Close' + > + <span aria-hidden='true'>×</span> + </button> + <h4 + className='modal-title' + ref='title' + > + Account Settings + </h4> </div> - <div className="modal-body"> - <div className="settings-table"> - <div className="settings-links"> + <div className='modal-body'> + <div className='settings-table'> + <div className='settings-links'> <SettingsSidebar tabs={tabs} activeTab={this.state.active_tab} updateTab={this.updateTab} /> </div> - <div className="settings-content minimize-settings"> + <div className='settings-content minimize-settings'> <UserSettings activeTab={this.state.active_tab} activeSection={this.state.active_section} @@ -63,4 +87,4 @@ module.exports = React.createClass({ </div> ); } -}); +} diff --git a/web/react/components/user_settings_notifications.jsx b/web/react/components/user_settings_notifications.jsx index ba0bda78e..b97f29e29 100644 --- a/web/react/components/user_settings_notifications.jsx +++ b/web/react/components/user_settings_notifications.jsx @@ -163,15 +163,15 @@ export default class NotificationsTab extends React.Component { } handleNotifyRadio(notifyLevel) { this.setState({notifyLevel: notifyLevel}); - this.refs.wrapper.getDOMNode().focus(); + React.findDOMNode(this.refs.wrapper).focus(); } handleEmailRadio(enableEmail) { this.setState({enableEmail: enableEmail}); - this.refs.wrapper.getDOMNode().focus(); + React.findDOMNode(this.refs.wrapper).focus(); } handleSoundRadio(enableSound) { this.setState({enableSound: enableSound}); - this.refs.wrapper.getDOMNode().focus(); + React.findDOMNode(this.refs.wrapper).focus(); } updateUsernameKey(val) { this.setState({usernameKey: val}); @@ -189,10 +189,10 @@ export default class NotificationsTab extends React.Component { this.setState({channelKey: val}); } updateCustomMentionKeys() { - var checked = this.refs.customcheck.getDOMNode().checked; + var checked = React.findDOMNode(this.refs.customcheck).checked; if (checked) { - var text = this.refs.custommentions.getDOMNode().value; + var text = React.findDOMNode(this.refs.custommentions).value; // remove all spaces and split string into individual keys this.setState({customKeys: text.replace(/ /g, ''), customKeysChecked: true}); @@ -201,7 +201,7 @@ export default class NotificationsTab extends React.Component { } } onCustomChange() { - this.refs.customcheck.getDOMNode().checked = true; + React.findDOMNode(this.refs.customcheck).checked = true; this.updateCustomMentionKeys(); } render() { @@ -210,8 +210,6 @@ export default class NotificationsTab extends React.Component { serverError = this.state.serverError; } - var self = this; - var user = this.props.user; var desktopSection; @@ -229,12 +227,12 @@ export default class NotificationsTab extends React.Component { let inputs = []; inputs.push( - <div> + <div key='userNotificationLevelOption'> <div className='radio'> <label> <input type='radio' checked={notifyActive[0]} - onChange={self.handleNotifyRadio.bind(this, 'all')} + onChange={this.handleNotifyRadio.bind(this, 'all')} > For all activity </input> @@ -246,7 +244,7 @@ export default class NotificationsTab extends React.Component { <input type='radio' checked={notifyActive[1]} - onChange={self.handleNotifyRadio.bind(this, 'mention')} + onChange={this.handleNotifyRadio.bind(this, 'mention')} > Only for mentions and private messages </input> @@ -258,7 +256,7 @@ export default class NotificationsTab extends React.Component { <input type='radio' checked={notifyActive[2]} - onChange={self.handleNotifyRadio.bind(this, 'none')} + onChange={this.handleNotifyRadio.bind(this, 'none')} > Never </input> @@ -268,15 +266,15 @@ export default class NotificationsTab extends React.Component { ); handleUpdateDesktopSection = function updateDesktopSection(e) { - self.props.updateSection(''); + this.props.updateSection(''); e.preventDefault(); - }; + }.bind(this); let extraInfo = ( <div className='setting-list__hint'> These settings will override the global notification settings for the <b>{this.state.curChannel}</b> channel </div> - ) + ); desktopSection = ( <SettingItemMax @@ -299,8 +297,8 @@ export default class NotificationsTab extends React.Component { } handleUpdateDesktopSection = function updateDesktopSection() { - self.props.updateSection('desktop'); - }; + this.props.updateSection('desktop'); + }.bind(this); desktopSection = ( <SettingItemMin @@ -324,13 +322,13 @@ export default class NotificationsTab extends React.Component { let inputs = []; inputs.push( - <div> + <div key='userNotificationSoundOptions'> <div className='radio'> <label> <input type='radio' checked={soundActive[0]} - onChange={self.handleSoundRadio.bind(this, 'true')} + onChange={this.handleSoundRadio.bind(this, 'true')} > On </input> @@ -342,7 +340,7 @@ export default class NotificationsTab extends React.Component { <input type='radio' checked={soundActive[1]} - onChange={self.handleSoundRadio.bind(this, 'false')} + onChange={this.handleSoundRadio.bind(this, 'false')} > Off </input> @@ -353,9 +351,9 @@ export default class NotificationsTab extends React.Component { ); handleUpdateSoundSection = function updateSoundSection(e) { - self.props.updateSection(''); + this.props.updateSection(''); e.preventDefault(); - }; + }.bind(this); soundSection = ( <SettingItemMax @@ -377,8 +375,8 @@ export default class NotificationsTab extends React.Component { } handleUpdateSoundSection = function updateSoundSection() { - self.props.updateSection('sound'); - }; + this.props.updateSection('sound'); + }.bind(this); soundSection = ( <SettingItemMin @@ -403,13 +401,13 @@ export default class NotificationsTab extends React.Component { let inputs = []; inputs.push( - <div> + <div key='userNotificationEmailOptions'> <div className='radio'> <label> <input type='radio' checked={emailActive[0]} - onChange={self.handleEmailRadio.bind(this, 'true')} + onChange={this.handleEmailRadio.bind(this, 'true')} > On </input> @@ -421,7 +419,7 @@ export default class NotificationsTab extends React.Component { <input type='radio' checked={emailActive[1]} - onChange={self.handleEmailRadio.bind(this, 'false')} + onChange={this.handleEmailRadio.bind(this, 'false')} > Off </input> @@ -433,9 +431,9 @@ export default class NotificationsTab extends React.Component { ); handleUpdateEmailSection = function updateEmailSection(e) { - self.props.updateSection(''); + this.props.updateSection(''); e.preventDefault(); - }; + }.bind(this); emailSection = ( <SettingItemMax @@ -455,8 +453,8 @@ export default class NotificationsTab extends React.Component { } handleUpdateEmailSection = function updateEmailSection() { - self.props.updateSection('email'); - }; + this.props.updateSection('email'); + }.bind(this); emailSection = ( <SettingItemMin @@ -480,10 +478,10 @@ export default class NotificationsTab extends React.Component { if (user.first_name) { handleUpdateFirstNameKey = function handleFirstNameKeyChange(e) { - self.updateFirstNameKey(e.target.checked); - }; + this.updateFirstNameKey(e.target.checked); + }.bind(this); inputs.push( - <div> + <div key='userNotificationFirstNameOption'> <div className='checkbox'> <label> <input @@ -500,10 +498,10 @@ export default class NotificationsTab extends React.Component { } handleUpdateUsernameKey = function handleUsernameKeyChange(e) { - self.updateUsernameKey(e.target.checked); - }; + this.updateUsernameKey(e.target.checked); + }.bind(this); inputs.push( - <div> + <div key='userNotificationUsernameOption'> <div className='checkbox'> <label> <input @@ -519,10 +517,10 @@ export default class NotificationsTab extends React.Component { ); handleUpdateMentionKey = function handleMentionKeyChange(e) { - self.updateMentionKey(e.target.checked); - }; + this.updateMentionKey(e.target.checked); + }.bind(this); inputs.push( - <div> + <div key='userNotificationMentionOption'> <div className='checkbox'> <label> <input @@ -538,10 +536,10 @@ export default class NotificationsTab extends React.Component { ); handleUpdateAllKey = function handleAllKeyChange(e) { - self.updateAllKey(e.target.checked); - }; + this.updateAllKey(e.target.checked); + }.bind(this); inputs.push( - <div> + <div key='userNotificationAllOption'> <div className='checkbox'> <label> <input @@ -557,10 +555,10 @@ export default class NotificationsTab extends React.Component { ); handleUpdateChannelKey = function handleChannelKeyChange(e) { - self.updateChannelKey(e.target.checked); - }; + this.updateChannelKey(e.target.checked); + }.bind(this); inputs.push( - <div> + <div key='userNotificationChannelOption'> <div className='checkbox'> <label> <input @@ -576,7 +574,7 @@ export default class NotificationsTab extends React.Component { ); inputs.push( - <div> + <div key='userNotificationCustomOption'> <div className='checkbox'> <label> <input @@ -600,9 +598,9 @@ export default class NotificationsTab extends React.Component { ); handleUpdateKeysSection = function updateKeysSection(e) { - self.props.updateSection(''); + this.props.updateSection(''); e.preventDefault(); - }; + }.bind(this); keysSection = ( <SettingItemMax title='Words that trigger mentions' @@ -645,8 +643,8 @@ export default class NotificationsTab extends React.Component { } handleUpdateKeysSection = function updateKeysSection() { - self.props.updateSection('keys'); - }; + this.props.updateSection('keys'); + }.bind(this); keysSection = ( <SettingItemMin |