following tags now normalized and sorted in ui

closes #6454

Changelog.md

@@ -5,6 +5,7 @@
 
 ## Bug fixes
 * Skip first getting started step if it looks done already [#6456](https://github.com/diaspora/diaspora/pull/6456)
+* Normalize new followed tags and insert them alphabetically [#6454](https://github.com/diaspora/diaspora/pull/6454)
 
 ## Features
 * Show spinner on initial stream load [#6384](https://github.com/diaspora/diaspora/pull/6384)

app/assets/javascripts/app/collections/tag_followings.js

@@ -12,7 +12,7 @@ app.collections.TagFollowings = Backbone.Collection.extend({
     var name = model.name || model.get("name");
     if(!this.any(
         function(tagFollowing){
-          return tagFollowing.get("name") === name; 
+          return tagFollowing.get("name") === name;
         })) {
       Backbone.Collection.prototype.create.apply(this, arguments);
     }

app/assets/javascripts/app/views/tag_following_list_view.js

@@ -21,7 +21,12 @@ app.views.TagFollowingList = app.views.Base.extend({
   },
 
   postRenderTemplate : function() {
-    this.collection.each(this.appendTagFollowing, this);
+    // add the whole sorted collection without handling each item separately
+    this.collection.each(function(tag) {
+      this.$el.prepend(new app.views.TagFollowing({
+        model: tag
+      }).render().el);
+    }, this);
   },
 
   setupAutoSuggest : function() {
@@ -63,12 +68,33 @@ app.views.TagFollowingList = app.views.Base.extend({
   createTagFollowing: function(evt) {
     if(evt){ evt.preventDefault(); }
 
-    this.collection.create({"name":this.$(".tag_input").val()});
+    var name = this.$(".tag_input").val();
+    // compare tag_text_regexp in app/models/acts_as_taggable_on-tag.rb
+    var normalizedName = (name === "<3" ? name : name.replace(
+        new RegExp("[^" + PosixBracketExpressions.alnum + "_\\-]+", "gi"), "").toLowerCase());
+
+    this.collection.create({"name":normalizedName});
+
     this.$(".tag_input").val("");
     return this;
   },
 
   appendTagFollowing: function(tag) {
+    // insert new tag in the order of the collection
+    var modelIndex = this.collection.indexOf(tag);
+    var prevModel = this.collection.at(modelIndex + 1); // prev in alphabet, +1 (next) in reverse sorted list
+
+    if (prevModel) {
+      var prevModelDom = this.$("#tag-following-" + prevModel.get("name"));
+      if (prevModelDom.length > 0) {
+        prevModelDom.after(new app.views.TagFollowing({
+          model: tag
+        }).render().el);
+        return;
+      }
+    }
+
+    // we have no previous Model and no View, so just prepend to the list
     this.$el.prepend(new app.views.TagFollowing({
       model: tag
     }).render().el);

spec/javascripts/app/views/tag_following_list_view_spec.js

@@ -0,0 +1,60 @@
+describe("app.views.TagFollowingList", function(){
+  beforeEach(function () {
+    this.tagsUnsorted = [
+      {name: "ab"},
+      {name: "cd"},
+      {name: "bc"}
+    ];
+
+    this.tagsSorted = [
+      {name: "ab"},
+      {name: "bc"},
+      {name: "cd"}
+    ];
+
+    app.tagFollowings = new app.collections.TagFollowings(this.tagsUnsorted);
+    this.view = new app.views.TagFollowingList({collection: app.tagFollowings});
+  });
+
+  describe("render", function(){
+    it("lists the tags alphabetically ascending", function(){
+      var html = this.view.render();
+      for(var i=0;i<this.tagsSorted.length;i++) {
+        expect(html.el.children[i].id).toMatch("tag-following-" + this.tagsSorted[i].name);
+      }
+    });
+  });
+
+  describe("adding tags", function(){
+    it("inserts a new tag at top if it comes before all others alphabetically", function(){
+      app.tagFollowings.create({name: "aa"});
+
+      var html = this.view.render();
+      expect(html.el.children[0].id).toMatch("tag-following-aa");
+      expect(html.el.children[1].id).toMatch("tag-following-ab");
+    });
+
+    it("inserts a new tag at the bottom if it comes after all others alphabetically", function(){
+      app.tagFollowings.create({name: "zz"});
+
+      var html = this.view.render();
+      var lastItemIndex = html.el.childElementCount -2; // last element is the input box
+      expect(html.el.children[lastItemIndex].id).toMatch("tag-following-zz");
+    });
+
+    it("inserts a new tag at second place if it comes after the first alphabetically", function(){
+      app.tagFollowings.create({name: "ac"});
+
+      var html = this.view.render();
+      expect(html.el.children[1].id).toMatch("tag-following-ac");
+    });
+
+    it("inserts a new tag second to last if it comes before last tag alphabetically", function(){
+      app.tagFollowings.create({name: "ca"});
+
+      var html = this.view.render();
+      var lastItemIndex = html.el.childElementCount -3; // last element is the input box. And one up, please.
+      expect(html.el.children[lastItemIndex].id).toMatch("tag-following-ca");
+    });
+  });
+});