Better session handling and history loading

thedjpetersen · Apr 8, 2014 · 0384e94 · 0384e94
1 parent 85e2074
commit 0384e94
Show file tree

Hide file tree

Showing 11 changed files with 117 additions and 39 deletions.
diff --git a/lib/connection.js b/lib/connection.js
@@ -114,23 +114,27 @@ var restore_connection = function(user, io, req) {
 }
 
 var connection = function(io, app) {
-  app.post('/is_logged_in/', function(req, resp) {
+  app.get("/", function(req, res) {
+    if (req.signedCookies.sessionid) {
+      User.findOne({where: {session_id: req.signedCookies.sessionid}}, function(err, user) {
+        res.render("index.ejs", {user: user});
+      });
+    } else {
+      res.render("index.ejs", {user: false});
+    }
+  });
+
+  app.post('/restore_connection/', function(req, resp) {
     var socket = _.find(io.sockets.clients(), function(client) {
       return client.id === req.body.socketid;
     });
 
-    var result = {logged_in: false};
-
     if (req.signedCookies.sessionid) {
       User.findOne({where: {session_id: req.signedCookies.sessionid}}, function(err, user) {
         if (user) {
           restore_connection(user, io, req);
-          resp.send({logged_in: true, client_length: _.keys(socket.clients).length, username: user.username }); } else {
-          resp.send(result);
         }
       });
-    } else {
-      resp.send(result);
     }
   });
 
@@ -171,10 +175,34 @@ var connection = function(io, app) {
     });
   });
 
+  app.post('/logout/', function(req, resp) {
+    var result = {success: true};
+    if (req.signedCookies.sessionid) {
+      User.findOne({where: {session_id: req.signedCookies.sessionid}}, function(err, user) {
+        if(user) {
+          user.session_id = null;
+          user.save()
+        }
+      });
+    }
+    resp.clearCookie("sessionid");
+    resp.send(result);
+  });
+
   io.sockets.on("connection", function (socket) {
     socket.clients = {};
 
-    socket.emit("settings", client_settings);
+    if (socket.user) {
+      Settings.findOne({where: {user_id: socket.user.id}}, function(err, settings) {
+        if(settings) {
+          socket.emit("settings", _.extend({}, JSON.parse(settings.settings)));
+        } else {
+          socket.emit("settings", client_settings);
+        }
+      });
+    } else {
+      socket.emit("settings", client_settings);
+    }
 
     socket.on("connect", function(data) {
       var backbone_models = require("../src/js/models/models");
@@ -358,6 +386,20 @@ var connection = function(io, app) {
         })
       }
     });
+
+    socket.on("saveSettings", function(data) {
+      if(socket.user) {
+        Settings.findOne({where: {user_id: socket.user.id}}, function(err, settings) {
+          var new_settings = {user_id: socket.user.id, settings: JSON.stringify(data)};
+          if(settings) {
+            settings.save(new_settings);
+          } else {
+            Settings.create(new_settings);
+          }
+        });
+      }
+    });
+
   });
 };
 

diff --git a/lib/static.js b/lib/static.js
@@ -66,10 +66,11 @@ var initialize = function(original_callback) {
               data: {
                 css_output: ["libs/font-awesome/css/font-awesome.css", "css/subway.css"],
                 js_output: js_output
-              }
+              },
+              pretty: true
             },
             files: {
-              "tmp/index.html": "src/jade/index.jade"
+              "tmp/index.ejs": "src/jade/index.jade"
             }
           }
         },

diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "gaze": "0.4.x",
     "backbone": "1.1.2",
     "underscore" : "1.6.0",
+    "ejs": "1.0.0",
     "rework-importer": "git://github.com/thedjpetersen/rework-importer.git",
 
     "grunt-react": "0.6.x",

diff --git a/src/components/app/messages.jsx b/src/components/app/messages.jsx
@@ -120,14 +120,15 @@ app.components.messages = function() {
 
   var Messages = React.createBackboneClass({
     checkScroll: function() {
-      if(this.getDOMNode().scrollTop < 100) {
+      if(this.getDOMNode().scrollTop === 0) {
         this.getModel().fetched = false;
         this.props.fetchHistory();
       }
     },
 
     componentWillUpdate: function() {
       this.model_length = this.getModel().length;
+      this.children_length = this.getDOMNode().children.length;
     },
 
     componentDidUpdate: function() {
@@ -141,6 +142,12 @@ app.components.messages = function() {
         $(node).animate({scrollTop: node.scrollHeight}, 750);
       }
 
+      if (same_window && this.model_length > this.children_length) {
+        // 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;
+      }
+
       if (!same_window) {
         node.scrollTop = node.scrollHeight;
       }

diff --git a/src/components/irc.jsx b/src/components/irc.jsx
@@ -17,7 +17,7 @@ app.components.irc = function() {
   });
 
   var Chat = React.createBackboneClass({
-    fetchHistory: function() {
+    fetchHistory: _.throttle(function() {
       var channel = this.getModel();
       var messages = channel.get("messages");
 
@@ -38,7 +38,7 @@ app.components.irc = function() {
 
         messages.fetched = true;
       }
-    },
+    }, 1000),
 
     render: function() {
       this.fetchHistory();

diff --git a/src/components/menu.jsx b/src/components/menu.jsx
@@ -102,7 +102,30 @@ app.components.startMenu = function() {
         </div>
       )
     }
-  })
+  });
+
+  var User = React.createBackboneClass({
+    logout: function() {
+      var _this = this;
+      $.post('/logout/', function(data) {
+        if(data.success) {
+          delete app.user;
+          app.irc.get("connections").reset();
+          _this.props.login();
+        }
+      });
+    },
+
+    render: function() {
+      return (
+        <div>
+          <h1>User Details</h1>
+          <p>{this.getModel().get("username")}</p>
+          <a className="button pointer" onClick={this.logout}>Logout</a>
+        </div>
+      )
+    }
+  });
 
   var Login = React.createClass({
     redirectConnection: function() {
@@ -124,6 +147,7 @@ app.components.startMenu = function() {
 
           _this.props.connect();
 
+          console.log(data);
           if (data.has_connection) {
             $(".mainMenu").toggleClass("hide")
           }
@@ -241,6 +265,8 @@ app.components.startMenu = function() {
                 return <Connect />
               case "settings":
                 return <Settings />
+              case "user":
+                return <User model={app.user} login={cxt.login} />
               case "login":
                 return <Login connect={cxt.connect} />
               case "register":

diff --git a/src/components/settings/general.jsx b/src/components/settings/general.jsx
@@ -5,6 +5,11 @@ app.components.general = function() {
     updateSetting: function(ev) {
       var setting = ev.target.getAttribute("data-setting");
       app.settings[setting] = ev.target.value;
+
+      if (typeof app.user !== "undefined") {
+        app.io.emit("saveSettings", app.settings);
+      }
+
       this.forceUpdate();
     },
 

diff --git a/src/jade/index.jade b/src/jade/index.jade
@@ -12,15 +12,6 @@ html
 
   body
     .mainMenu
-    //if lt IE 8
-      p.browsehappy
-        | You are using an
-        strong outdated
-        | browser. Please
-        a(href='http://browsehappy.com/') upgrade your browser
-        | to improve your experience.
-    //
-       Add your site or application content here 
     .container
       nav
         .text-center
@@ -32,3 +23,8 @@ html
       main
     each file in js_output
       script(src="#{file}")
+    | <% if (user) { %>
+    | <script>
+    | app.user = new app.models.SubwayUser({username: "<%= user.username %>" });
+    | </script>
+    | <% } %>
diff --git a/src/js/app.js b/src/js/app.js
@@ -8,22 +8,17 @@ app.irc = new app.models.App();
 // their session
 // Or if in the server settings they are to be connected directly to a channel
 // we need to immediately go into the connecting mode
-var menu = new app.components.startMenu();
-menu.show();
-
 app.io.on("connect", function() {
-  $.post("is_logged_in/", {socketid: app.io.socket.sessionid}, function(data) {
-    if(data.logged_in) {
-      app.user = new app.models.SubwayUser({
-        username: data.username
-      });
-      menu.render();
-    }
-
-    if (data.logged_in && data.client_length !== 0 ) {
-      $(".mainMenu").addClass("hide");
-    }
-  });
+  var menu = new app.components.startMenu();
+  menu.show();
+
+  if(app.user) {
+    $.post('restore_connection/', {socketid: app.io.socket.sessionid});
+  }
+
+  if (app.irc.get("connections").length > 0) {
+    $(".mainMenu").addClass("hide");
+  }
 });
 
 app.io.on("settings", function(settings) {

diff --git a/src/js/handle_irc.js b/src/js/handle_irc.js
@@ -35,7 +35,7 @@ util.handle_irc = function(message, irc, app_ref) {
         conn.first().addChannel("status");
 
         if (typeof module === 'undefined') {
-          menu.hide();
+          $(".mainMenu").addClass("hide");
 
           var irc = new app.components.irc({
             collection: conn

diff --git a/subway.js b/subway.js
@@ -71,6 +71,11 @@ async.waterfall([
             .use(express.cookieParser(server_settings.cookie_secret || "subway_secret"))
             .use(express.static(cwd + "/tmp"));
 
+  app.configure(function() {
+    app.set("views", __dirname + "/tmp");
+  });
+  app.engine("ejs", require("ejs").renderFile);
+
   var server = http.createServer(app).listen(3000);
   var io = require("socket.io").listen(server);