Nicer timestamps with momentjs

This dependency may be a little heavy for our current use case, but we can
roll with it for now and find something slimmer if it turns out yagni.

Closes #77
Closes #40

bower.json

@@ -15,7 +15,8 @@
     "bootstrap-tagsinput": "~0.4.2",
     "cryptojs": "svn+http://crypto-js.googlecode.com/svn/#~3.1.2",
     "libphonenumber-api": "git://github.com/codedust/libphonenumber-api",
-    "backbone.localstorage": "liliakai/Backbone.localStorage#master"
+    "backbone.localstorage": "liliakai/Backbone.localStorage#master",
+    "momentjs": "~2.8.3"
   },
   "devDependencies": {
     "mocha": "~2.0.1",
@@ -75,6 +76,9 @@
     ],
     "backbone.localstorage": [
       "backbone.localStorage.js"
+    ],
+    "momentjs": [
+      "moment.js"
     ]
   },
   "concat": {
@@ -89,6 +93,7 @@
       "backbone.localstorage",
       "qrcode",
       "libphonenumber-api",
+      "momentjs",
       "native-client"
     ]
   }

index.html

@@ -60,6 +60,7 @@
               <ul class='volley'>
                   <li class='message'>
                   {{ message }}
+                  <span class='timestamp'>{{ timestamp }}</span>
                   </li>
               </ul>
               {{#attachments}}

js/views/conversation_list_item_view.js

@@ -36,24 +36,11 @@ var Whisper = Whisper || {};
           contact_name: this.model.get('name'),
           contact_avatar: this.model.get('image'),
           last_message: this.model.get('lastMessage'),
-          last_message_timestamp: this.formatTimestamp()
+          last_message_timestamp: moment(this.model.get('timestamp')).format('MMM M')
         })
       );
 
       return this;
-    },
-    formatTimestamp: function() {
-      var timestamp = this.model.get('timestamp');
-      var now = new Date().getTime();
-      var date = new Date();
-      date.setTime(timestamp*1000);
-      if (now - timestamp > 60*60*24*7) {
-        return date.toLocaleDateString('en-US',{month: 'short', day: 'numeric'});
-      }
-      if (now - timestamp > 60*60*24) {
-        return date.toLocaleDateString('en-US',{weekday: 'short'});
-      }
-      return date.toTimeString();
     }
 
   });

js/views/message_view.js

@@ -22,7 +22,7 @@ var Whisper = Whisper || {};
       this.$el.html(
         Mustache.render(this.template, {
           message: this.model.get('body'),
-          date: this.formatTimestamp(),
+          timestamp: moment(this.model.get('timestamp')).fromNow(),
           attachments: this.model.get('attachments'),
           bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming',
           sender: this.model.thread().get('type') === 'group' ? this.model.get('person') : ''
@@ -30,21 +30,8 @@ var Whisper = Whisper || {};
       );
 
       return this;
-    },
+    }
 
-    formatTimestamp: function() {
-      var timestamp = this.model.get('timestamp');
-      var now = new Date().getTime();
-      var date = new Date();
-      date.setTime(timestamp*1000);
-      if (now - timestamp > 60*60*24*7) {
-        return date.toLocaleDateString('en-US',{month: 'short', day: 'numeric'});
-      }
-      if (now - timestamp > 60*60*24) {
-        return date.toLocaleDateString('en-US',{weekday: 'short'});
-      }
-      return date.toTimeString();
-    }
   });
 
 })();

stylesheets/index.css

@@ -76,3 +76,16 @@ li.entry img {
   padding: 5px;
   border-radius: 3px;
 }
+
+.timestamp {
+  font-size: 0.75em;
+  display: block;
+}
+
+.incoming .timestamp {
+  color: gray;
+}
+
+.outgoing .timestamp {
+  color: whitesmoke;
+}

test/index.html

@@ -56,6 +56,7 @@
         <ul class='volley'>
             <li class='message'>
             {{ message }}
+            <span class='timestamp'>{{ timestamp }}</span>
             </li>
         </ul>
         {{#attachments}}

test/views/message_view_test.js

@@ -18,6 +18,18 @@ describe('MessageView', function() {
     assert.match(view.$el.html(), /goodbye world/);
   });
 
+  it('should have a nice timestamp', function() {
+    var view = new Whisper.MessageView({model: message});
+    message.set({'timestamp': new Date().getTime() - 5000});
+    assert.match(view.$el.html(), /seconds ago/);
+
+    message.set({'timestamp': new Date().getTime() - 60000});
+    assert.match(view.$el.html(), /minute ago/);
+
+    message.set({'timestamp': new Date().getTime() - 3600000});
+    assert.match(view.$el.html(), /hour ago/);
+  });
+
   it('should go away when the model is destroyed', function() {
     var view = new Whisper.MessageView({model: message});
     var div = $('<div>').append(view.$el);