Compass 98 react convert collection

src/app/home/index.jade

@@ -1,6 +1,6 @@
 .page
   .content.with-sidebar
-    div(data-hook='collection-subview')
+    div(data-hook='collection-view')
     div.report-zero-state(data-hook='report-zero-state')
       div.state-arrow
         img(src='images/zero-state-arrow-collections.png', width="110")

src/app/home/index.js

@@ -1,7 +1,6 @@
 var View = require('ampersand-view');
 // var format = require('util').format;
 // var IdentifyView = require('../identify');
-var CollectionView = require('./collection');
 var { NamespaceStore } = require('hadron-reflux-store');
 var TourView = require('../tour');
 var NetworkOptInView = require('../network-optin');
@@ -16,6 +15,32 @@ var ReactDOM = require('react-dom');
 
 var indexTemplate = require('./index.jade');
 
+/**
+ * Ampersand view wrapper around a React component tab view
+ */
+var WrapperView = View.extend({
+  template: '<div></div>',
+  props: {
+    componentKey: 'string',
+    visible: {
+      type: 'boolean',
+      required: true,
+      default: false
+    }
+  },
+  bindings: {
+    visible: {
+      type: 'booleanClass',
+      no: 'hidden'
+    }
+  },
+  render: function() {
+    this.renderWithTemplate();
+    var component = app.appRegistry.getComponent(this.componentKey);
+    ReactDOM.render(React.createElement(component), this.query());
+  }
+});
+
 var HomeView = View.extend({
   screenName: 'Schema',
   props: {
@@ -184,40 +209,21 @@ var HomeView = View.extend({
 
     return database.collections.get(ns.ns);
   },
-  // onNamespaceChange: function(ns) {
-  //   const model = this._getCollection();
-  //
-  //   // if (!model) {
-  //   //   app.navigate('/');
-  //   //   return;
-  //   // }
-  //
-  //   const collection = app.instance.collections;
-  //   if (!collection.select(model)) {
-  //     return debug('already selected %s', model);
-  //   }
-  //
-  //   this.updateTitle(model);
-  //   this.showNoCollectionsZeroState = false;
-  //   this.showDefaultZeroState = false;
-  //
-  //   // app.navigate(format('schema/%s', model.getId()), {
-  //   //   silent: true
-  //   // });
-  // },
   onClickShowConnectWindow: function() {
     // code to close current connection window and open connect dialog
     ipc.call('app:show-connect-window');
     window.close();
   },
   template: indexTemplate,
   subviews: {
-    _collection: {
-      hook: 'collection-subview',
+    collectionView: {
+      hook: 'collection-view',
       prepareView: function(el) {
-        return new CollectionView({
+        return new WrapperView({
           el: el,
-          parent: this
+          parent: this,
+          visible: true,
+          componentKey: 'Collection.Collection'
         });
       }
     }