Better scrolling, history handling and feedback on connect

thedjpetersen · Apr 18, 2014 · d26b8bf · d26b8bf
1 parent 36fa7ec
commit d26b8bf
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 11 deletions.
diff --git a/lib/connection.js b/lib/connection.js
@@ -203,9 +203,17 @@ var connection = function(io, app) {
 
     socket.on("connect", function(data) {
       var backbone_models = require("../src/js/models/models");
+
       var client = new irc.Client(data.server, data.nick, {
-        channels: ["#test_metro"],
-        debug: true
+        channels: [],
+        debug: true,
+        retryCount: 1,
+        autoRejoin: false
+      });
+
+      client.on("abort", function() {
+        delete client;
+        socket.emit("connection_error", data);
       });
 
       socket.clients[data.server] = client;
@@ -333,6 +341,7 @@ var connection = function(io, app) {
         case "kick":
         case "topic":
           args = includeChannel(args);
+          console.log(args);
           client.send.apply(client, args);
           break;
 

diff --git a/lib/plugins.js b/lib/plugins.js
@@ -36,7 +36,7 @@ var self = {
           request(base_url + "plugin.css", cb)
                  .pipe(fs.createWriteStream(output_directory + '/plugin.css'));
         },
-      ], callback)
+      ], callback);
 
     });
   },
@@ -54,7 +54,7 @@ var self = {
         // or more than a week old we want to fetch it
         if (stat === undefined || stat.mtime.getTime() < one_week_ago) {
           // Grab plugin index
-          request("https://raw.github.com/thedjpetersen/subway-plugins/master/plugins.json")
+          result = request("https://raw.github.com/thedjpetersen/subway-plugins/master/plugins.json")
                  .pipe(fs.createWriteStream(plugin_directory + '/plugins.json'));
         }
       });

diff --git a/src/components/app/messages.jsx b/src/components/app/messages.jsx
@@ -139,10 +139,10 @@ app.components.messages = function() {
 
       if (this.shouldScrollBottom && same_window) {
         var node = this.getDOMNode();
-        $(node).animate({scrollTop: node.scrollHeight}, 750);
+        $(node).stop().animate({scrollTop: node.scrollHeight}, 750);
       }
 
-      if (same_window && this.model_length > this.children_length) {
+      if (same_window && this.model_length > this.children_length + 1) {
         // This craziness maintains the scroll position as we load more models
         // when history is fetched
         this.getDOMNode().scrollTop = this.getDOMNode().children[this.model_length-this.children_length-1].offsetTop;

diff --git a/src/components/menu.jsx b/src/components/menu.jsx
@@ -79,16 +79,44 @@ app.components.startMenu = function() {
     }
   });
 
-  var Connect = React.createClass({
+  var Connect = React.createBackboneClass({
     connect: function() {
+      var _this = this;
       var form_data = _.parseForm(this.refs);
+      $(this.getDOMNode()).find("input").prop("disabled", true);
       app.io.emit("connect", form_data);
+
+      app.io.on("connection_error", function(data) {
+        _this.props.errorMessage = "Error connecting";
+        _this.forceUpdate();
+        _this.props.errorMessage = undefined;
+      });
+    },
+
+    componentDidUpdate: function() {
+      $(this.getDOMNode()).find("input").prop("disabled", false).val("");
+    },
+
+    componentWillUnmount: function() {
+      app.io.removeAllListeners("connection_error");
     },
 
     render: function() {
       return (
         <div>
           <h1>Connect</h1>
+          {function(cxt) {
+            if(cxt.props.errorMessage) {
+              return (
+                <div className="alert error">
+                  <p>
+                    <i className="fa fa-exclamation-circle spacing-right"></i>
+                    {cxt.props.errorMessage}
+                  </p>
+                </div>
+              )
+            }
+          }(this)}
           <form>
             <div>
               <input className="fullWidth" placeholder="Server" ref="server" />
@@ -98,7 +126,7 @@ app.components.startMenu = function() {
             </div>
             <a className="button pointer" onClick={this.connect}>Connect</a>
           </form>
-          <ListConnections model={app.irc.get("connections")}/>
+          <ListConnections model={this.getModel()}/>
         </div>
       )
     }
@@ -261,7 +289,7 @@ app.components.startMenu = function() {
           <div className="menuArea">
             { function(cxt) {switch(cxt.state.activeItem) {
               case "connect":
-                return <Connect />
+                return <Connect model={app.irc.get("connections")} />
               case "settings":
                 return <Settings />
               case "user":

diff --git a/src/styl/base.styl b/src/styl/base.styl
@@ -46,7 +46,7 @@ main
 .spacing-right
   margin-right: 5px
 
-.error
+textarea.error
   border: 1px solid #FFC5C5
 
 .badge
@@ -61,3 +61,19 @@ main
 
 .left
   float: left
+
+input.error
+  background-color: #F3D7D7
+  border: 1px solid #E2CBCB
+
+input[disabled]
+  background: #DDD
+
+.alert
+  padding: 1px 20px
+  margin: 10px 0
+  border-radius: 5px 
+
+.alert.error
+  background: #B97676
+  color: white
diff --git a/subway.js b/subway.js
@@ -44,7 +44,8 @@ async.waterfall([
     // TODO
     // resolve Fatal error: getaddrinfo ENOTFOUND
     // when we don't have active internet connection
-    init_plugins(callback);
+    //init_plugins(callback);
+    callback(null);
   },
   function(callback) {
     // We download all of our third party dependencies or upgrade any if