filter customizations by missing body ids

app/assets/javascripts/modeling.js.jsx

@@ -16,7 +16,7 @@
   while (method = methods.pop()) con[method] = con[method] || dummy;
 })(window.console = window.console || {});
 
-(function() {
+(function($) {
   var Neopia = {
     User: {
       get: function(id) {
@@ -49,18 +49,35 @@
   };
 
   var Modeling = {
-    _modelForItemComponents: [],
     _customizationsByPetId: {},
+    _customizations: [],
+    _items: [],
     _addCustomization: function(customization) {
       this._customizationsByPetId[customization.name] = customization;
+      this._customizations = this._buildCustomizations();
       this._update();
     },
-    _getCustomizations: function() {
+    _buildCustomizations: function() {
       var modelCustomizationsByPetId = this._customizationsByPetId;
       return Object.keys(modelCustomizationsByPetId).map(function(petId) {
         return modelCustomizationsByPetId[petId];
       });
     },
+    _createItems: function($) {
+      this._items = $('#newest-unmodeled-items li').map(function() {
+        var el = $(this);
+        return {
+          component: React.renderComponent(<ModelForItem />,
+                                           el.find('.models').get(0)),
+          el: el,
+          id: el.attr('data-item-id'),
+          missingBodyIdsPresenceMap: el.find('span[data-body-id]').toArray().reduce(function(map, node) {
+            map[$(node).attr('data-body-id')] = true;
+            return map;
+          }, {})
+        };
+      }).toArray();
+    },
     _loadPetCustomization: function(neopiaPetId) {
       return Neopia.Customization.get(neopiaPetId)
         .done(this._addCustomization.bind(this));
@@ -77,20 +94,20 @@
       return neopiaUserIds.map(this._loadUserCustomizations.bind(this));
     },
     _update: function() {
-      var state = {
+      var customizations = this._customizations;
-        customizations: this._getCustomizations()
+      this._items.forEach(function(item) {
-      };
+        var filteredCustomizations = customizations.filter(function(c) {
-      this._modelForItemComponents.forEach(function(c) {
+          return item.missingBodyIdsPresenceMap[c.body_id];
-        c.setState(state);
+        });
+        item.component.setState({customizations: filteredCustomizations});
       });
     },
-    init: function() {
+    init: function($) {
       Neopia.init();
-      this._modelForItemComponents = $('#newest-unmodeled-items li').map(function() {
+      this._createItems($);
-        return React.renderComponent(<ModelForItem />,
+      // TODO: use user prefs, silly!
-                                     $(this).find('.models').get(0));
+      var search = document.location.search;
-      }).toArray();
+      var users = search.indexOf('=') >= 0 ? search.split('=')[1].split(',') : '';
-      var users = ["borovan", "donna"];
       this._loadManyUsersCustomizations(users);
     }
   };
@@ -119,12 +136,14 @@
     render: function() {
       var petName = this.props.customization.name;
       var imageSrc = "http://pets.neopets.com/cpn/" + petName + "/1/1.png";
-      return <li><button>
+      // TODO: i18n
+      var title = "submit " + petName + " as a model";
+      return <li><button title={title}>
         <img src={imageSrc} />
         <span>{petName}</span>
       </button></li>;
     }
   });
 
-  Modeling.init();
+  Modeling.init($);
-})();
+})(jQuery);

app/views/outfits/new.html.haml

@@ -80,7 +80,7 @@
     %ul#newest-unmodeled-items
       - @newest_unmodeled_items.each do |item|
         - localized_cache "items/#{item.id} modeling_progress updated_at=#{item.updated_at.to_i}" do
-          %li
+          %li{'data-item-id' => item.id}
             = link_to image_tag(item.thumbnail_url), item, :class => 'image-link'
             = link_to item, :class => 'header' do
               %h2= item.name