reLayouts when something is favorited, whoa

app/assets/javascripts/app/models/post.js

@@ -68,6 +68,11 @@ app.models.Post = Backbone.Model.extend(_.extend({}, app.models.formatDateMixin,
     }
   },
 
+  toggleFavorite : function(){
+    this.set({favorite : !this.get("favorite")})
+    this.save()
+  },
+
   like : function() {
     var self = this;
     this.likes.create({}, {success : function(resp){

app/assets/javascripts/app/models/stream.js

@@ -61,6 +61,13 @@ app.models.Stream = Backbone.Collection.extend({
     this.items.add(models)
   },
 
+  preloadOrFetch : function(){ //hai, plz test me THNX
+    this.preload()
+    if(this.items.length == 0) {
+      this.fetch()
+    }
+  },
+
   preload : function(){
     var preloadJson = window.preLoadContent && JSON.parse(window.preLoadContent)
     delete window.preLoadContent // always do this just to be safe in preventing dirty state across navigates

app/assets/javascripts/app/pages/profile.js

@@ -26,7 +26,7 @@ app.pages.Profile = app.views.Base.extend({
   initialize : function(options) {
     this.model = new app.models.Profile.findByGuid(options.personId)
     this.stream = options && options.stream || new app.models.Stream()
-    this.stream.preload()
+    this.stream.preloadOrFetch();
 
     this.canvasView = new app.views.Canvas({ model : this.stream })
     this.profileInfo = new app.views.ProfileInfo({ model : this.model })

app/assets/javascripts/app/views/canvas_view.js

@@ -4,6 +4,7 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
     this.collection = this.stream.items
     this.postClass = app.views.SmallFrame
     this.setupInfiniteScroll()
+    this.stream.bind("reLayout", this.reRender, this)
   },
 
   renderTemplate : function() {
@@ -18,12 +19,16 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
     _.defer(_.bind(function(){ this.$el.isotope("insert", this.createPostView(post).render().$el) }, this))
   },
 
-    mason : function() {
+  mason : function() {
     this.$el.isotope({
       itemSelector : '.canvas-frame',
       masonry : {
         columnWidth : 292.5
       }
     })
+  },
+
+  reRender : function(){
+    this.$el.isotope("reLayout")
   }
 }));

app/assets/javascripts/app/views/small_frame.js

@@ -72,12 +72,13 @@ app.views.SmallFrame = app.views.Base.extend({
   favoritePost : function(evt) {
     if(evt) { evt.stopImmediatePropagation(); evt.preventDefault() }
 
-    if(this.model.get("favorite")) {
+    var prevDimension = this.dimensionsClass();
-      this.model.save({favorite : false})
+    this.model.toggleFavorite();
-    } else {
+
-      this.model.save({favorite : true})
+    this.$el.removeClass(prevDimension)
-      this.$el.addClass("x2 width height")
+    this.render()
-    }
+
+    app.page.stream.trigger("reLayout")
   },
 
   goToPost : function() {

spec/javascripts/app/pages/profile_spec.js

@@ -1,7 +1,7 @@
 describe("app.pages.Profile", function(){
   beforeEach(function(){
     this.guid = 'abcdefg123'
-    this.page = new app.pages.Profile({personId :this.guid });
+    app.page = this.page = new app.pages.Profile({personId :this.guid });
     this.stream = this.page.stream
   });
 
@@ -26,8 +26,27 @@ describe("app.pages.Profile", function(){
 
   describe("rendering", function(){
     beforeEach(function(){
-      this.page.render();
+      this.post = factory.post()
+      this.stream.add(this.post)
+      this.page.toggleEdit()
+      expect(this.page.editMode).toBeTruthy()
+      this.page.render()
     });
+
+    context("clicking fav", function(){
+      beforeEach(function(){
+        spyOn(this.post, 'toggleFavorite')
+        spyOn($.fn, "isotope")
+        this.page.$(".fav").click()
+      })
+
+      it("relayouts the page", function(){
+        expect($.fn.isotope).toHaveBeenCalledWith("reLayout")
+      })
+      it("toggles the favorite status on the model", function(){
+        expect(this.post.toggleFavorite).toHaveBeenCalled()
+      })
+    })
   });
 
   describe("edit mode", function(){