Switch the search view to react; refactor store & search (#215)

tests/pageobjects/store-page.js

@@ -54,12 +54,6 @@ var storePage = Object.create(basepage, {
         }
     },
 
-    searchResultSnapListSelector: {
-        get: function() {
-            return '#js-snaplist .p-card'
-        }
-    },
-
     sectionSnapListSelector: {
         get: function() {
             return '.p-card-deck .p-card'
@@ -68,7 +62,7 @@ var storePage = Object.create(basepage, {
 
     snaps: {
         get: function() {
-            return browser.elements(this.searchResultSnapListSelector);
+            return browser.elements(this.sectionSnapListSelector);
         }
     },
 

tests/specs/test-store.js

@@ -59,14 +59,14 @@ describe('Store Page - Verify that', function() {
 
     it('search non exact match', function() {
         storePage.search('hello-w');
-        browser.waitForVisible(storePage.searchResultSnapListSelector);
+        browser.waitForVisible(storePage.sectionSnapListSelector);
         snaps = storePage.snaps;
         assert.isAbove(snaps.value.length, 0, "No snaps found");
     });
 
     it('search non exact match and check snap details', function() {
         storePage.search('hello-w');
-        browser.waitForVisible(storePage.searchResultSnapListSelector);
+        browser.waitForVisible(storePage.sectionSnapListSelector);
         storePage.snaps.value[0].click();
         browser.waitForVisible(snapDetailsPage.snapTitleElement);
         assert.isNotNull(snapDetailsPage.snap.value, "Snap details not found");

www/src/js/common/snaplists.js

@@ -1,36 +1,92 @@
 var $ = require('jquery');
 var Backbone = require('backbone');
 Backbone.$ = $;
-var CONF = require('../config.js');
+var React = require('react');
+var Radio = require('backbone.radio');
 var Snaplist = require('../collections/snaplist.js');
+var Sections = require('../common/sections.js');
+var StoreLayoutView = require('../views/store.js');
+var CONF = require('../config.js');
+
+function isDiffArray(arr1, arr2) {
+  if (arr1.length != arr2.length)
+    return true;
+
+  for (var i = 0; i < arr1.length; ++i) {
+    if (arr1[i] !== arr2[i])
+      return true;
+  }
+  return false;
+}
+
+var updateInstalledStates = function(collection) {
+  if (!collection) {
+    return;
+  }
+  var installedBask = new Snaplist();
+  installedBask.fetch({
+    data: $.param({
+      'installed_only': true
+    }),
+    success: function(snaplist) {
+      var installedById = {}
+      snaplist.forEach(function(s) {
+        installedById[s.id] = s
+      })
+      collection.forEach(function(s) {
+        if (installedById[s.id]) {
+          // TODO make sure that active & installed state is preserved
+          s.set('status', CONF.INSTALL_STATE.INSTALLED)
+          s.set('icon', installedById[s.id].get('icon'))
+        }
+      });
+    },
+    error: function(snaplist) {
+      console.log('error')
+    }
+  });
+  return collection
+};
 
 module.exports = {
-  updateInstalledStates: function(collection) {
-    if (!collection) {
-      return;
+  fetchSnapListView: function(title, query, options) {
+    var chan = Radio.channel('root');
+    var snaplist = new Snaplist();
+    var sections = [];
+
+    if (localStorage) {
+      sections = JSON.parse(localStorage.getItem('storeSections')) || [];
     }
-    var installedBask = new Snaplist();
-    installedBask.fetch({
-      data: $.param({
-        'installed_only': true
-      }),
-      success: function(snaplist) {
-        var installedById = {}
-        snaplist.forEach(function(s) {
-          installedById[s.id] = s
-        })
-        collection.forEach(function(s) {
-          if (installedById[s.id]) {
-            // TODO make sure that active & installed state is preserved
-            s.set('status', CONF.INSTALL_STATE.INSTALLED)
-            s.set('icon', installedById[s.id].get('icon'))
-          }
-        });
-      },
-      error: function(snaplist) {
-	console.log('error')
+
+    var m = new Backbone.Model({
+      query: query,
+      title: title,
+      isGrid: true,
+      isHomeActive: false,
+      sections: sections.concat('private'),
+      loading: true
+    });
+
+    var element = React.createElement(StoreLayoutView, {
+      model: m,
+      collection: snaplist
+    });
+    chan.command('set:content', {reactElement: element});
+
+    Sections.fetch().done(function(response) {
+      if (isDiffArray(sections, response)) {
+        if (localStorage) {
+          localStorage.setItem('storeSections', JSON.stringify(response));
+        }
+        m.set('sections', response.concat('private'));
       }
     });
-    return collection
+
+    snaplist.fetch(options).always(function(response) {
+      m.set('loading', false);
+    }).done(function() {
+      snaplist = updateInstalledStates(snaplist)
+    });
   },
+  updateInstalledStates: updateInstalledStates,
 };

www/src/js/components/storelist.js

@@ -1,4 +1,3 @@
-
 var Backbone = require('backbone');
 var React = require('react')
 var ReactBackbone = require('react.backbone');

www/src/js/controllers/search.js

@@ -1,44 +1,12 @@
 var $ = require('jquery');
-var Backbone = require('backbone');
-var Marionette = require('backbone.marionette');
-var Radio = require('backbone.radio');
-var SearchLayoutView = require('../views/search.js');
-var Sections = require('../collections/sections.js');
-var Bask = require('../collections/snaplist.js');
 var SnaplistTools = require('../common/snaplists.js');
 
 module.exports = {
   query: function(q) {
-    var chan = Radio.channel('root');
-    var sections = new Sections();
-    var searchBask = new Bask();
-
-    var sp = sections.fetch();
-
-    // TODO impose the limit before the query
-    // not at display time
-    searchBask.fetch({
-      data: $.param({
-        'q': q
-      }),
-      success: function(snaplist) {
-        snaplist = SnaplistTools.updateInstalledStates(snaplist)
-        var view =  new SearchLayoutView({
-          model: new Backbone.Model({
-            query: q,
-            title: 'Search results for "' + q  + '"',
-            isGrid: true,
-            isAlpha: true,
-            canSort: false,
-            canStyle: true,
-            isHomeActive: false,
-            sections: sections,
-          }),
-          sectionsPromise: sp,
-          collection: snaplist,
-        });
-        chan.command('set:content', {backboneView: view});
-      }
-    });
+    SnaplistTools.fetchSnapListView(
+      'Search results for "' + q  + '"',
+      q,
+      {data: $.param({'q': q})}
+    );
   }
 };

www/src/js/controllers/store.js

@@ -1,82 +1,30 @@
 var $ = require('jquery');
-var Backbone = require('backbone');
-Backbone.$ = $;
-var Marionette = require('backbone.marionette');
-var React = require('react');
-var Radio = require('backbone.radio');
-var StoreLayoutView = require('../views/store.js');
-var Snaplist = require('../collections/snaplist.js');
-var Sections = require('../common/sections.js');
 var SnaplistTools = require('../common/snaplists.js');
 
-
-function isDiffArray(arr1, arr2) {
-  if (arr1.length != arr2.length)
-    return true;
-
-  for (var i = 0; i < arr1.length; ++i) {
-    if (arr1[i] !== arr2[i])
-      return true;
-  }
-
-  return false;
-}
-
-var fetchSnapList = function(title, options) {
-  var chan = Radio.channel('root');
-  var storeSnaplist = new Snaplist();
-  var sections = [];
-
-  if (localStorage) {
-    sections = JSON.parse(localStorage.getItem('storeSections')) || [];
-  }
-
-  var storeModel = new Backbone.Model({
-        query: '',
-        title: title,
-        isGrid: true,
-        isAlpha: true,
-        canSort: false,
-        canStyle: true,
-        isHomeActive: false,
-        sections: sections.concat('private'),
-        loading: true
-      });
-
-  var element = React.createElement(StoreLayoutView, {
-    model: storeModel,
-    collection: storeSnaplist
-  });
-  chan.command('set:content', {reactElement: element});
-
-  Sections.fetch().done(function(response) {
-      if (isDiffArray(sections, response)) {
-        if (localStorage) {
-          localStorage.setItem('storeSections', JSON.stringify(response));
-        }
-        storeModel.set('sections', response.concat('private'));
-      }
-    });
-
-  storeSnaplist.fetch(options).always(function(response) {
-    storeModel.set('loading', false);
-  }).done(function() {
-      storeSnaplist = SnaplistTools.updateInstalledStates(storeSnaplist)
-  });
-}
-
 module.exports = {
   index: function() {
-    fetchSnapList('Featured snaps', {data: $.param({'section': 'featured'})})
+    SnaplistTools.fetchSnapListView(
+      'Featured snaps',
+      '',
+      {data: $.param({'section': 'featured'})}
+    );
   },
   section: function(s) {
     // Special case for private section which is not a section
     // per se but a specificity of a snap
     if (s === 'private') {
-      fetchSnapList('Private snaps', {data: $.param({'private_snaps': true})})
+      SnaplistTools.fetchSnapListView(
+        'Private snaps',
+        '',
+        {data: $.param({'private_snaps': true})}
+      );
     }
     else {
-      fetchSnapList(s, {data: $.param({'section': s})})
+      SnaplistTools.fetchSnapListView(
+        s,
+        '',
+        {data: $.param({'section': s})}
+      );
     }
   }
 };