Introduce intl-friendly sort order for contact lists (#1900)

js/conversation_controller.js

@@ -20,30 +20,25 @@
                 _.debounce(this.updateUnreadCount.bind(this), 1000)
             );
             this.startPruning();
+
+            this.collator = new Intl.Collator();
         },
         comparator: function(m1, m2) {
             var timestamp1 = m1.get('timestamp');
             var timestamp2 = m2.get('timestamp');
-            if (timestamp1 && timestamp2) {
+            if (timestamp1 && !timestamp2) {
+                return -1;
+            }
+            if (timestamp2 && !timestamp1) {
+                return 1;
+            }
+            if (timestamp1 && timestamp2 && timestamp1 !== timestamp2) {
                 return timestamp2 - timestamp1;
             }
-            if (timestamp1) {
-                return -1;
-            }
-            if (timestamp2) {
-                return 1;
-            }
+
             var title1 = m1.getTitle().toLowerCase();
             var title2 = m2.getTitle().toLowerCase();
-            if (title1 === title2) {
-                return 0;
-            }
-            if (title1 < title2) {
-                return -1;
-            }
-            if (title1 > title2) {
-                return 1;
-            }
+            return this.collator.compare(title1, title2);
         },
         addActive: function(model) {
             if (model.get('active_at')) {

js/models/conversations.js

@@ -72,6 +72,12 @@
         this.initialPromise = Promise.resolve();
 
         this.contactCollection = new Backbone.Collection();
+        var collator = new Intl.Collator();
+        this.contactCollection.comparator = function(left, right) {
+            left = left.getTitle().toLowerCase();
+            right = right.getTitle().toLowerCase();
+            return collator.compare(left, right);
+        };
         this.messageCollection = new Whisper.MessageCollection([], {
             conversation: this
         });

test/conversation_controller_test.js

@@ -0,0 +1,43 @@
+'use strict';
+
+describe('ConversationController', function() {
+  it('sorts conversations based on timestamp then by intl-friendly title', function() {
+    var collection = window.getInboxCollection();
+    collection.reset([]);
+
+    collection.add(new Whisper.Conversation({
+      name: 'No timestamp',
+    }));
+    collection.add(new Whisper.Conversation({
+      name: 'B',
+      timestamp: 20,
+    }));
+    collection.add(new Whisper.Conversation({
+      name: 'C',
+      timestamp: 20,
+    }));
+    collection.add(new Whisper.Conversation({
+      name: 'Á',
+      timestamp: 20,
+    }));
+    collection.add(new Whisper.Conversation({
+      name: 'First!',
+      timestamp: 30,
+    }));
+
+    console.log('WTF!');
+    console.log(collection.at('0').attributes);
+    console.log(collection.at('1').attributes);
+    console.log(collection.at('2').attributes);
+    console.log(collection.at('3').attributes);
+    console.log(collection.at('4').attributes);
+
+    assert.strictEqual(collection.at('0').get('name'), 'First!');
+    assert.strictEqual(collection.at('1').get('name'), 'Á');
+    assert.strictEqual(collection.at('2').get('name'), 'B');
+    assert.strictEqual(collection.at('3').get('name'), 'C');
+    assert.strictEqual(collection.at('4').get('name'), 'No timestamp');
+
+    collection.reset([]);
+  });
+});

test/index.html

@@ -645,6 +645,7 @@
   <script type="text/javascript" src="models/messages_test.js"></script>
 
   <script type="text/javascript" src="libphonenumber_util_test.js"></script>
+  <script type="text/javascript" src="conversation_controller_test.js"></script>
   <script type="text/javascript" src="storage_test.js"></script>
   <script type="text/javascript" src="keychange_listener_test.js"></script>
   <script type="text/javascript" src="emoji_util_test.js"></script>

test/models/conversations_test.js

@@ -98,6 +98,23 @@
         });
         after(clearDatabase);
 
+        it('sorts its contacts in an intl-friendly way', function() {
+            var convo = new Whisper.Conversation({id: '+18085555555'});
+            convo.contactCollection.add(new Whisper.Conversation({
+                name: 'C'
+            }));
+            convo.contactCollection.add(new Whisper.Conversation({
+                name: 'B'
+            }));
+            convo.contactCollection.add(new Whisper.Conversation({
+                name: 'Á'
+            }));
+
+            assert.strictEqual(convo.contactCollection.at('0').get('name'), 'Á');
+            assert.strictEqual(convo.contactCollection.at('1').get('name'), 'B');
+            assert.strictEqual(convo.contactCollection.at('2').get('name'), 'C');
+        });
+
         it('contains its own messages', function (done) {
             var convo = new Whisper.ConversationCollection().add({id: '+18085555555'});
             convo.fetchMessages().then(function() {