fix message page bug

2 files changed, 109 insertions, 102 deletions

diff --git a/public/assets/js/lib/views/mail/mailbox.js b/public/assets/js/lib/views/mail/mailbox.js
index c48d948..cae87f0 100644
--- a/public/assets/js/lib/views/mail/mailbox.js
+++ b/public/assets/js/lib/views/mail/mailbox.js
@@ -2,91 +2,95 @@ var MailboxView = View.extend({
   el: "#messages",
 
   events: {
-    'click .discard_link': 'discard',
+    "click .discard_link": "discard",
   },
 
   action: "/api/mailbox/",
 
-  initialize: function(){
-    this.__super__.initialize.call(this)
-    this.template = this.$(".template").html()
-    this.boxlist = new BoxList ()
+  initialize: function () {
+    this.__super__.initialize.call(this);
+    this.template = this.$(".template").html();
+    this.boxlist = new BoxList();
+    this.message = new MessageView();
   },
 
-  load: function(name){
-    name = sanitizeHTML(name) || "inbox"
-    $("h1").html(name)
-    var query = window.location.search.substr(1)
-    $.get(this.action + name, query, this.populate.bind(this))
+  load: function (name) {
+    name = sanitizeHTML(name) || "inbox";
+    $("h1").html(name);
+    var query = window.location.search.substr(1);
+    $.get(this.action + name, query, this.populate.bind(this));
   },
 
-  populate: function(data){
+  populate: function (data) {
     if (data.boxes) {
-      this.boxlist.load(data.boxes)
+      this.boxlist.load(data.boxes);
 
-      var user = data.user
-      var max = data.messages.length-1
+      var user = data.user;
+      var max = data.messages.length - 1;
       if (data.messages.length) {
-        var limit = data.query.limit || 50
-        var offset = data.query.offset + data.messages.length
+        var limit = data.query.limit || 50;
+        var offset = data.query.offset + data.messages.length;
         if (limit > data.messages.length) {
-          $(".next_page").hide()
+          $(".next_page").hide();
+        } else {
+          var query = { limit, offset };
+          $(".next_page a").attr("href", "?" + querystring(query));
         }
-        else {
-          var query = { limit, offset }
-          $(".next_page a").attr("href", "?" + querystring(query))
-        }
-      }
-      else {
-        $("#no_messages").show()
-        $(".next_page").hide()
+      } else {
+        $("#no_messages").show();
+        $(".next_page").hide();
       }
-      data.messages.forEach(function(message, i){
-        var $row = this.parse(message, user)
-        if (i === 0) $row.addClass("first")
-        if (i === max) $row.addClass("last")
-        this.$el.append($row)
-      }.bind(this))
+      data.messages.forEach(
+        function (message, i) {
+          var $row = this.parse(message, user);
+          if (i === 0) $row.addClass("first");
+          if (i === max) $row.addClass("last");
+          this.$el.append($row);
+        }.bind(this),
+      );
     }
-    $("body").removeClass('loading')
+    $("body").removeClass("loading");
   },
 
-  parse: function(message, user){
-    var datetime = verbose_date(message.date)
-    var size = hush_size(message.size)
-    var id = message.id
+  parse: function (message, user) {
+    var datetime = verbose_date(message.date);
+    var size = hush_size(message.size);
+    var id = message.id;
 
-    var is_sender = message.sender === user.username
+    var is_sender = message.sender === user.username;
     var t = this.template
-                .replace(/{{id}}/g, message.id)
-                .replace(/{{to}}/g, is_sender ? "to " : "")
-                .replace(/{{unread}}/g, message.unread ? "unread" : "")
-                .replace(/{{username}}/g, is_sender ? message.recipient : message.sender)
-                .replace(/{{subject}}/g, message.subject)
-                .replace(/{{date}}/g, datetime[0])
-                .replace(/{{time}}/g, datetime[1])
-                .replace(/{{date_class}}/g, carbon_date(message.lastmodified) )
-                .replace(/{{size}}/g, size[1] )
-                .replace(/{{size_class}}/g, size[0] )
-    var $t = $(t)
+      .replace(/{{id}}/g, message.id)
+      .replace(/{{to}}/g, is_sender ? "to " : "")
+      .replace(/{{unread}}/g, message.unread ? "unread" : "")
+      .replace(/{{username}}/g, is_sender ? message.recipient : message.sender)
+      .replace(/{{subject}}/g, message.subject)
+      .replace(/{{date}}/g, datetime[0])
+      .replace(/{{time}}/g, datetime[1])
+      .replace(/{{date_class}}/g, carbon_date(message.lastmodified))
+      .replace(/{{size}}/g, size[1])
+      .replace(/{{size_class}}/g, size[0]);
+    var $t = $(t);
     if (is_sender) {
-      $t.find('.reply_link').remove()
+      $t.find(".reply_link").remove();
     }
-    return $t
+    return $t;
   },
 
-  discard: function(e){
-    var id = $(e.target).data('id')
-    var ok = confirm("Really delete this message?")
-    if (! ok) return
+  discard: function (e) {
+    var id = $(e.target).data("id");
+    var ok = confirm("Really delete this message?");
+    if (!ok) return;
     $.ajax({
-      method: 'delete',
-      url: '/api/message/' + id,
+      method: "delete",
+      url: "/api/message/" + id,
       headers: { "csrf-token": csrf() },
       data: { _csrf: csrf() },
-      success: function(){ window.location.reload() },
-      error: function(){ window.location.reload() },
-    })
+      success: function () {
+        window.location.reload();
+      },
+      error: function () {
+        window.location.reload();
+      },
+    });
   },
-
-})
+});
diff --git a/public/assets/js/lib/views/mail/message.js b/public/assets/js/lib/views/mail/message.js
index 6fa3d78..6ea2274 100644
--- a/public/assets/js/lib/views/mail/message.js
+++ b/public/assets/js/lib/views/mail/message.js
@@ -1,67 +1,70 @@
 var MessageView = View.extend({
-
   el: "#message",
 
   events: {
-    'click .discard_link': 'discard',
+    "click .discard_link": "discard",
   },
 
-  action: '/api/message/',
+  action: "/api/message/",
 
-  initialize: function(){
-    this.template = this.$(".template").html()
+  initialize: function () {
+    this.template = this.$(".template").html();
+    this.$el.empty().hide();
   },
 
-  load: function(name){
-    name = sanitizeHTML(name) || "inbox"
+  load: function (name) {
+    name = sanitizeHTML(name) || "inbox";
     $.ajax({
       url: this.action + name,
-      method: 'get',
+      method: "get",
       success: this.populate.bind(this),
-      error: app.router.error404
-    })
+      error: app.router.error404,
+    });
   },
 
-  populate: function(data){
-    this.parse(data)
-    $("body").removeClass('loading')
+  populate: function (data) {
+    this.parse(data);
+    $("body").removeClass("loading");
   },
 
-  parse: function(data){
-    var message = data.message
-//     var user = data.user
+  parse: function (data) {
+    var message = data.message;
+    //     var user = data.user
 
-    $("h1").html(message.subject)
-    var datetime = verbose_date(message.date)
-    var id = message.id
-    var is_sender = message.sender === auth.user.username
+    $("h1").html(message.subject);
+    var datetime = verbose_date(message.date);
+    var id = message.id;
+    var is_sender = message.sender === auth.user.username;
     var t = this.template
-                .replace(/{{id}}/g, message.id)
-                .replace(/{{sender}}/g, message.sender)
-                .replace(/{{avatar}}/g, profile_image(message.sender))
-                .replace(/{{subject}}/g, message.subject)
-                .replace(/{{date}}/g, datetime[0])
-                .replace(/{{time}}/g, datetime[1])
-                .replace(/{{body}}/g, tidy_urls(message.body) )
-    var $t = $(t)
+      .replace(/{{id}}/g, message.id)
+      .replace(/{{sender}}/g, message.sender)
+      .replace(/{{avatar}}/g, profile_image(message.sender))
+      .replace(/{{subject}}/g, message.subject)
+      .replace(/{{date}}/g, datetime[0])
+      .replace(/{{time}}/g, datetime[1])
+      .replace(/{{body}}/g, tidy_urls(message.body));
+    var $t = $(t);
     if (is_sender) {
-      $t.find('.reply_link').remove()
+      $t.find(".reply_link").remove();
     }
-    this.$el.empty().append($t)
+    this.$el.empty().append($t).show();
   },
 
-  discard: function(e){
-    var id = $(e.target).data('id')
-    var ok = confirm("Really delete this message?")
-    if (! ok) return
+  discard: function (e) {
+    var id = $(e.target).data("id");
+    var ok = confirm("Really delete this message?");
+    if (!ok) return;
     $.ajax({
-      method: 'delete',
-      url: '/api/message/' + id,
+      method: "delete",
+      url: "/api/message/" + id,
       headers: { "csrf-token": csrf() },
       data: { _csrf: csrf() },
-      success: function(){ window.location.href = "/mail" },
-      error: function(){ window.location.href = "/mail" },
-    })
+      success: function () {
+        window.location.href = "/mail";
+      },
+      error: function () {
+        window.location.href = "/mail";
+      },
+    });
   },
-
-})
+});