Merge pull request #175 from ralder/fix-dispatchError

[webui] fix incorrect call for AsyncClient.dispatchError

web/react/components/channel_header.jsx

@@ -1,6 +1,7 @@
 // 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');
@@ -16,7 +17,7 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
 
-var ExtraMembers = React.createClass({
+var PopoverListMembers = React.createClass({
     componentDidMount: function() {
         var originalLeave = $.fn.popover.Constructor.prototype.leave;
         $.fn.popover.Constructor.prototype.leave = function(obj) {
@@ -39,26 +40,25 @@ var ExtraMembers = React.createClass({
                 $("#member_popover").popover('hide');
             }
         });
-
     },
+
     render: function() {
-        var count = this.props.members.length == 0 ? "-" : this.props.members.length;
+        var popoverHtml = '';
-        count = this.props.members.length > 19 ? "20+" : count;
+        var members = this.props.members;
-        var data_content = "";
+        var count = (members.length > 20) ? "20+" : (members.length || '-');
-        var sortedMembers = this.props.members;
 
-        if(sortedMembers) {
+        if (members) {
-            sortedMembers.sort(function(a,b) {
+            members.sort(function(a,b) {
                 return a.username.localeCompare(b.username);
-            })
+            });
 
-            sortedMembers.forEach(function(m) {
+            members.forEach(function(m) {
-                data_content += "<div style='white-space: nowrap'>" + m.username + "</div>";
+                popoverHtml += "<div style='white-space: nowrap'>" + m.username + "</div>";
             });
         }
 
         return (
-            <div style={{"cursor" : "pointer"}} id="member_popover" data-toggle="popover" data-content={data_content} data-original-title="Members" >
+            <div style={{cursor : "pointer"}} id="member_popover" data-toggle="popover" data-content={popoverHtml} data-original-title="Members" >
                 <div id="member_tooltip" data-toggle="tooltip" title="View Channel Members">
                     {count} <span className="glyphicon glyphicon-user" aria-hidden="true"></span>
                 </div>
@@ -78,6 +78,7 @@ function getStateFromStores() {
 }
 
 module.exports = React.createClass({
+    displayName: 'ChannelHeader',
     componentDidMount: function() {
         ChannelStore.addChangeListener(this._onChange);
         ChannelStore.addExtraInfoChangeListener(this._onChange);
@@ -107,15 +108,14 @@ module.exports = React.createClass({
         return getStateFromStores();
     },
     handleLeave: function(e) {
-        var self = this;
         Client.leaveChannel(this.state.channel.id,
             function(data) {
                 var townsquare = ChannelStore.getByName('town-square');
                 utils.switchChannel(townsquare);
-            }.bind(this),
+            },
             function(err) {
                 AsyncClient.dispatchError(err, "handleLeave");
-            }.bind(this)
+            }
         );
     },
     searchMentions: function(e) {
@@ -131,52 +131,29 @@ module.exports = React.createClass({
         AppDispatcher.handleServerAction({
             type: ActionTypes.RECIEVED_SEARCH_TERM,
             term: terms,
-            do_search: false
+            do_search: true,
-        });
-
-        Client.search(
-            terms,
-            function(data) {
-                AppDispatcher.handleServerAction({
-                    type: ActionTypes.RECIEVED_SEARCH,
-                    results: data,
             is_mention_search: true
         });
     },
-            function(err) {
+
-                dispatchError(err, "search");
-            }
-        );
-    },
     render: function() {
 
         if (this.state.channel == null) {
-            return (
+            return null;
-                <div></div>
-            );
         }
 
         var description = utils.textToJsx(this.state.channel.description, {"singleline": true, "noMentionHighlight": true});
         var popoverContent = React.renderToString(<MessageWrapper message={this.state.channel.description}/>);
-        var channelTitle = "";
+        var channelTitle = this.state.channel.display_name;
         var channelName = this.state.channel.name;
         var currentId = UserStore.getCurrentId();
         var isAdmin = this.state.memberChannel.roles.indexOf("admin") > -1 || this.state.memberTeam.roles.indexOf("admin") > -1;
-        var searchForm = <th className="search-bar__container"><NavbarSearchBox /></th>;
+        var isDirect = (this.state.channel.type === 'D');
-        var isDirect = false;
 
-        if (this.state.channel.type === 'O') {
+        if (isDirect) {
-            channelTitle = this.state.channel.display_name;
-        } else if (this.state.channel.type === 'P') {
-            channelTitle = this.state.channel.display_name;
-        } else if (this.state.channel.type === 'D') {
-            isDirect = true;
             if (this.state.users.length > 1) {
-                if (this.state.users[0].id === UserStore.getCurrentId()) {
+                var contact = this.state.users[((this.state.users[0].id === currentId) ? 1 : 0)];
-                    channelTitle = <UserProfile userId={this.state.users[1].id} overwriteName={this.state.users[1].full_name ? this.state.users[1].full_name : this.state.users[1].username} />;
+                channelTitle = <UserProfile userId={contact.id} overwriteName={contact.full_name || contact.username} />;
-                } else {
-                    channelTitle = <UserProfile userId={this.state.users[0].id} overwriteName={this.state.users[0].full_name ? this.state.users[0].full_name : this.state.users[0].username} />;
-                }
             }
         }
 
@@ -196,21 +173,21 @@ module.exports = React.createClass({
                                     <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Add Members</a></li>
                                     { isAdmin ?
                                         <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={this.state.channel.description} data-title={this.state.channel.display_name} data-channelid={this.state.channel.id}>Set Channel Description...</a></li>
+                                    <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#edit_channel" data-desc={this.state.channel.description} data-title={channelTitle} data-channelid={this.state.channel.id}>Set Channel Description...</a></li>
-                                    <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#channel_notifications" data-title={this.state.channel.display_name} data-channelid={this.state.channel.id}>Notification Preferences</a></li>
+                                    <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#channel_notifications" data-title={channelTitle} data-channelid={this.state.channel.id}>Notification Preferences</a></li>
                                     { isAdmin && channelName != Constants.DEFAULT_CHANNEL ?
-                                        <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#rename_channel" data-display={this.state.channel.display_name} data-name={this.state.channel.name} data-channelid={this.state.channel.id}>Rename Channel...</a></li>
+                                        <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#rename_channel" data-display={channelTitle} data-name={this.state.channel.name} data-channelid={this.state.channel.id}>Rename Channel...</a></li>
-                                        : ""
+                                        : null
                                     }
                                     { isAdmin && channelName != Constants.DEFAULT_CHANNEL ?
-                                        <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#delete_channel" data-title={this.state.channel.display_name} data-channelid={this.state.channel.id}>Delete Channel...</a></li>
+                                        <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#delete_channel" data-title={channelTitle} data-channelid={this.state.channel.id}>Delete Channel...</a></li>
-                                        : ""
+                                        : null
                                     }
                                     { channelName != Constants.DEFAULT_CHANNEL ?
                                         <li role="presentation"><a role="menuitem" href="#" onClick={this.handleLeave}>Leave Channel</a></li>
-                                        : ""
+                                        : null
                                     }
                                 </ul>
                             </div>
@@ -220,14 +197,14 @@ module.exports = React.createClass({
                         <a href="#"><strong className="heading">{channelTitle}</strong></a>
                     }
                     </th>
-                    <th><ExtraMembers members={this.state.users} channelId={this.state.channel.id} /></th>
+                    <th><PopoverListMembers members={this.state.users} channelId={this.state.channel.id} /></th>
-                    { searchForm }
+                    <th className="search-bar__container"><NavbarSearchBox /></th>
                     <th>
-                        <div className="dropdown" style={{"marginLeft":"5px", "marginRight":"10px"}}>
+                        <div className="dropdown" style={{marginLeft:5, marginRight:10}}>
                             <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_right_dropdown" data-toggle="dropdown" aria-expanded="true">
                                 <i className="fa fa-caret-down"></i>
                             </a>
-                            <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_right_dropdown" style={{"left": "-150px"}}>
+                            <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_right_dropdown" style={{left: "-150px"}}>
                                 <li role="presentation"><a role="menuitem" href="#" onClick={this.searchMentions}>Recent Mentions</a></li>
                             </ul>
                         </div>
@@ -237,5 +214,3 @@ module.exports = React.createClass({
         );
     }
 });
-
-

web/react/components/post_list.jsx

@@ -265,7 +265,7 @@ module.exports = React.createClass({
                 },
                 function(err) {
                     $(self.refs.loadmore.getDOMNode()).text("Load more messages");
-                    dispatchError(err, "getPosts");
+                    AsyncClient.dispatchError(err, "getPosts");
                 }
             );
     },

web/react/components/search_bar.jsx

@@ -3,6 +3,7 @@
 
 
 var client = require('../utils/client.jsx');
+var AsyncClient = require('../utils/async_client.jsx');
 var PostStore = require('../stores/post_store.jsx');
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var utils = require('../utils/utils.jsx');
@@ -10,14 +11,14 @@ var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
 
 function getSearchTermStateFromStores() {
-    term = PostStore.getSearchTerm();
+    var term = PostStore.getSearchTerm() || '';
-    if (!term) term = "";
     return {
         search_term: term
     };
 }
 
 module.exports = React.createClass({
+    displayName: 'SearchBar',
     componentDidMount: function() {
         PostStore.addSearchTermChangeListener(this._onChange);
     },
@@ -58,14 +59,14 @@ module.exports = React.createClass({
         e.target.select();
     },
     performSearch: function(terms, isMentionSearch) {
-        if (terms.length > 0) {
+        if (terms.length) {
-            $("#search-spinner").removeClass("hidden");
+            this.setState({isSearching: true});
             client.search(
                 terms,
                 function(data) {
-                    $("#search-spinner").addClass("hidden");
+                    this.setState({isSearching: false});
                     if (utils.isMobile()) {
-                        $('#search')[0].value = "";
+                        React.findDOMNode(this.refs.search).value = '';
                     }
 
                     AppDispatcher.handleServerAction({
@@ -73,18 +74,17 @@ module.exports = React.createClass({
                         results: data,
                         is_mention_search: isMentionSearch
                     });
-                },
+                }.bind(this),
                 function(err) {
-                    $("#search-spinner").addClass("hidden");
+                    this.setState({isSearching: false});
-                    dispatchError(err, "search");
+                    AsyncClient.dispatchError(err, "search");
-                }
+                }.bind(this)
             );
         }
     },
     handleSubmit: function(e) {
         e.preventDefault();
-        terms = this.state.search_term.trim();
+        this.performSearch(this.state.search_term.trim());
-        this.performSearch(terms);
     },
     getInitialState: function() {
         return getSearchTermStateFromStores();
@@ -95,8 +95,15 @@ module.exports = React.createClass({
                 <div className="sidebar__collapse" onClick={this.handleClose}></div>
                 <span className="glyphicon glyphicon-search sidebar__search-icon"></span>
                 <form role="form" className="search__form relative-div" onSubmit={this.handleSubmit}>
-                    <input type="text" className="form-control search-bar-box" ref="search" id="search" placeholder="Search" value={this.state.search_term} onFocus={this.handleUserFocus} onChange={this.handleUserInput} />
+                    <input
-                    <span id="search-spinner" className="glyphicon glyphicon-refresh glyphicon-refresh-animate hidden"></span>
+                        type="text"
+                        ref="search"
+                        className="form-control search-bar-box"
+                        placeholder="Search"
+                        value={this.state.search_term}
+                        onFocus={this.handleUserFocus}
+                        onChange={this.handleUserInput} />
+                    {this.state.isSearching ? <span className={"glyphicon glyphicon-refresh glyphicon-refresh-animate"}></span> : null}
                 </form>
             </div>
         );

web/react/components/search_results.jsx

@@ -9,11 +9,12 @@ var UserProfile = require( './user_profile.jsx' );
 var SearchBox =require('./search_bar.jsx');
 var utils = require('../utils/utils.jsx');
 var client = require('../utils/client.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;
 
-RhsHeaderSearch = React.createClass({
+var RhsHeaderSearch = React.createClass({
     handleClose: function(e) {
         e.preventDefault();
 
@@ -32,13 +33,13 @@ RhsHeaderSearch = React.createClass({
         return (
             <div className="sidebar--right__header">
                 <span className="sidebar--right__title">{title}</span>
-                <button type="button" className="sidebar--right__close" aria-label="Close" onClick={this.handleClose}></button>
+                <button type="button" className="sidebar--right__close" aria-label="Close" title="Close" onClick={this.handleClose}></button>
             </div>
         );
     }
 });
 
-SearchItem = React.createClass({
+var SearchItem = React.createClass({
     handleClick: function(e) {
         e.preventDefault();
 
@@ -62,7 +63,7 @@ SearchItem = React.createClass({
                 });
             },
             function(err) {
-                dispatchError(err, "getPost");
+                AsyncClient.dispatchError(err, "getPost");
             }
         );
 
@@ -71,6 +72,7 @@ SearchItem = React.createClass({
 
         utils.switchChannel(postChannel, teammate);
     },
+
     render: function() {
 
         var message = utils.textToJsx(this.props.post.message, {searchTerm: this.props.term, noMentionHighlight: !this.props.isMentionSearch});
@@ -79,11 +81,7 @@ SearchItem = React.createClass({
         var timestamp = UserStore.getCurrentUser().update_at;
 
         if (channel) {
-            if (channel.type === 'D') {
+            channelName = (channel.type === 'D') ? "Private Message" : channel.display_name;
-                channelName = "Private Message";
-            } else {
-                channelName = channel.display_name;
-            }
         }
 
         return (
@@ -95,7 +93,11 @@ SearchItem = React.createClass({
                 <div className="post__content">
                     <ul className="post-header">
                         <li className="post-header-col"><strong><UserProfile userId={this.props.post.user_id} /></strong></li>
-                        <li className="post-header-col"><time className="search-item-time">{ utils.displayDate(this.props.post.create_at)+' '+utils.displayTime(this.props.post.create_at) }</time></li>
+                        <li className="post-header-col">
+                            <time className="search-item-time">
+                                { utils.displayDate(this.props.post.create_at) + ' ' + utils.displayTime(this.props.post.create_at) }
+                            </time>
+                        </li>
                     </ul>
                     <div className="search-item-snippet"><span>{message}</span></div>
                 </div>
@@ -104,11 +106,13 @@ SearchItem = React.createClass({
     }
 });
 
+
 function getStateFromStores() {
   return { results: PostStore.getSearchResults() };
 }
 
 module.exports = React.createClass({
+    displayName: 'SearchResults',
     componentDidMount: function() {
         PostStore.addSearchChangeListener(this._onChange);
         this.resize();
@@ -144,41 +148,24 @@ module.exports = React.createClass({
 
         var results = this.state.results;
         var currentId = UserStore.getCurrentId();
-        var searchForm = currentId == null ? null : <SearchBox />;
+        var searchForm = currentId ? <SearchBox /> : null;
+        var noResults = (!results || !results.order || !results.order.length);
+        var searchTerm = PostStore.getSearchTerm();
 
-        if (results == null) {
-            return (
-                <div className="sidebar--right__header">
-                    <div className="sidebar__heading">Search Results</div>
-                </div>
-            );
-        }
-
-        if (!results.order || results.order.length == 0) {
-            return (
-                <div className="sidebar--right__content">
-                    <div className="search-bar__container">{searchForm}</div>
-                    <div className="sidebar-right__body">
-                        <RhsHeaderSearch />
-                        <div id="search-items-container" className="search-items-container">
-                            <div className="sidebar--right__subheader">No results</div>
-                        </div>
-                    </div>
-                </div>
-            );
-        }
-
-        var self = this;
         return (
             <div className="sidebar--right__content">
                 <div className="search-bar__container sidebar--right__search-header">{searchForm}</div>
                 <div className="sidebar-right__body">
                     <RhsHeaderSearch isMentionSearch={this.props.isMentionSearch} />
                     <div id="search-items-container" className="search-items-container">
-                    {results.order.map(function(id) {
+
+                        { noResults ? <div className="sidebar--right__subheader">No results</div>
+                                    : results.order.map(function(id) {
                                           var post = results.posts[id];
-                        return <SearchItem key={post.id} post={post} term={PostStore.getSearchTerm()} isMentionSearch={self.props.isMentionSearch} />
+                                          return <SearchItem key={post.id} post={post} term={searchTerm} isMentionSearch={this.props.isMentionSearch} />
-                    })}
+                                    }, this)
+                        }
+
                     </div>
                 </div>
             </div>

web/sass-files/sass/partials/_base.scss

@@ -126,6 +126,10 @@ div.theme {
   to { transform: scale(1) rotate(360deg);}
 }
 
+.glyphicon-refresh-animate {
+    @include animation(spin .7s infinite linear);
+}
+
 .black-bg {
   background-color: black !important;
 }

web/sass-files/sass/partials/_responsive.scss

@@ -436,10 +436,9 @@
             .form-control {
                 background: none;
                 color: #fff;
-                border-bottom: 1px solid #fff;
                 border-bottom: 1px solid rgba(#fff, 0.7);
                 border-radius: 0;
-                padding: 0 0 0 23px;
+                padding: 0 10px 0 23px;
             }
             ::-webkit-input-placeholder {
                 color: #fff;
@@ -534,6 +533,11 @@
         .sidebar--right__close {
             display: none;
         }
+        .search__form {
+            .glyphicon {
+                color: #fff;
+            }
+        }
     }
     .inner__wrap {
         &.move--right {

web/sass-files/sass/partials/_variables.scss

@@ -8,9 +8,3 @@ $primary-color--hover: darken(#2389D7, 5%);
 $body-bg: #e9e9e9;
 $header-bg: #f9f9f9;
 $border-gray: 1px solid #ddd;
-
-// Animation
-.glyphicon-refresh-animate {
-	-animation: spin .7s infinite linear;
-	-webkit-animation: spin2 .7s infinite linear;
-}