Refactor RootComponent to use VueWrapper

app/core/components/FlatLayout.coffee

@@ -1,12 +1,13 @@
 PageErrors = require 'core/components/PageErrors'
 
-module.exports = {
+FlatLayout = {
   name: 'flat-layout'
   template: require('templates/core/components/flat-layout')()
   components:
     'page-errors': PageErrors
   computed: Vuex.mapState({
     errors: (state) -> state.pageErrors
   })
-
 }
+
+module.exports = FlatLayout

app/views/admin/SkippedContactsView.coffee

@@ -3,6 +3,31 @@ template = require 'templates/base-flat'
 require('vendor/co')
 api = require 'core/api'
 FlatLayout = require 'core/components/FlatLayout'
+store = require('core/store')
+
+storeModule = -> {
+  namespaced: true
+  state:
+    skippedContacts: []
+    users: {}
+  actions:
+    archiveContact: ({ commit, state }, {skippedContact, archived}) ->
+      newContact = _.assign({}, skippedContact, {archived})
+      api.skippedContacts.put(newContact).then ->
+        commit('archiveContact', {skippedContact, archived})
+  mutations:
+    archiveContact: (state, { skippedContact, archived }) ->
+      index = _.findIndex(state.skippedContacts, (s) -> s._id is skippedContact._id)
+      oldContact = state.skippedContacts[index]
+      Vue.set(state.skippedContacts, index, _.assign({}, oldContact, { archived }))
+    addUser: (state, { skippedContact, user }) ->
+      Vue.set(state.users, skippedContact._id, user)
+    loadContacts: (state, skippedContacts) ->
+      state.skippedContacts = skippedContacts
+  getters:
+    numArchivedUsers: (state) ->
+      _.countBy(state.skippedContacts, (contact) -> contact.archived)[true]
+}
 
 SkippedContactInfo =
   template: require('templates/admin/skipped-contacts/skipped-contact-info')()
@@ -88,6 +113,7 @@ SkippedContactInfo =
       # @$emit('archiveContact', @skippedContact, archived)
 
 SkippedContactsComponent = Vue.extend
+  name: "skipped-contacts-view"
   template: require('templates/admin/skipped-contacts/skipped-contacts-view')()
   data: ->
     sortOrder: 'date (descending)'
@@ -126,43 +152,21 @@ SkippedContactsComponent = Vue.extend
     'skipped-contact-info': SkippedContactInfo
     'flat-layout': FlatLayout
   created: co.wrap ->
+    store.registerModule('page', storeModule()) # TODO: Bring back automatic registering/unregistering for RootComponents?
     try
       skippedContacts = yield api.skippedContacts.getAll()
       @$store.commit('page/loadContacts', skippedContacts)
       yield skippedContacts.map co.wrap (skippedContact) =>
         userHandle = skippedContact.trialRequest?.applicant
+        return
         return unless userHandle
         user = yield api.users.getByHandle(userHandle)
         @$store.commit('page/addUser', { skippedContact , user })
     catch e
       @$store.commit('addPageError', e)
+  destroyed: ->
+    store.unregisterModule('page')
+    @$store = silentStore
 
-store = require('core/store')
-
-module.exports = class SkippedContactsView extends RootComponent
-  id: 'skipped-contacts-view'
-  template: template
-  VueComponent: SkippedContactsComponent
-  vuexModule: -> {
-    namespaced: true
-    state:
-      skippedContacts: []
-      users: {}
-    actions:
-      archiveContact: ({ commit, state }, {skippedContact, archived}) ->
-        newContact = _.assign({}, skippedContact, {archived})
-        api.skippedContacts.put(newContact).then ->
-          commit('archiveContact', {skippedContact, archived})
-    mutations:
-      archiveContact: (state, { skippedContact, archived }) ->
-        index = _.findIndex(state.skippedContacts, (s) -> s._id is skippedContact._id)
-        oldContact = state.skippedContacts[index]
-        Vue.set(state.skippedContacts, index, _.assign({}, oldContact, { archived }))
-      addUser: (state, { skippedContact, user }) ->
-        Vue.set(state.users, skippedContact._id, user)
-      loadContacts: (state, skippedContacts) ->
-        state.skippedContacts = skippedContacts
-    getters:
-      numArchivedUsers: (state) ->
-        _.countBy(state.skippedContacts, (contact) -> contact.archived)[true]
-  }
+VueWrapper = require('views/core/VueWrapper')
+module.exports = VueWrapper.RootComponent(SkippedContactsComponent)

app/views/core/VueWrapper.coffee

@@ -1,29 +1,47 @@
 CocoView = require 'views/core/CocoView'
 ModalView = require 'views/core/ModalView'
+RootView = require 'views/core/RootView'
 store = require('core/store')
 
 # Given a Vue modal/component class, generates a backbone-wrapped class
-makeWrapperForClass = (ParentClass) ->
+makeWrapperForClass = (ViewClass) ->
   return (WrappedComponentClass) ->
-    class VueWrapper extends ParentClass
-      template: -> '<div></div>'
+    class VueWrapper extends ViewClass
+      id: switch ViewClass
+        when RootView then WrappedComponentClass.options.name
+        when ModalView then WrappedComponentClass.options.name
+        when CocoView then null
+      template: ->
+        switch ViewClass
+          when RootView then require('templates/base-flat')(this.getRenderData()) # TODO: generalize
+          else '<div></div>'
       initialize: (@propsData) ->
-        @id = WrappedComponentClass.id ? null
         @listeners = []
       afterRender: ->
         super()
         # Modals get attached one layer higher than usual other views, and we don't want to clobber the .modal layer
-        target = if ParentClass is ModalView then @$el.find('div') else @$el
+        target = switch ViewClass
+          when ModalView then @$el.find('div').first()
+          when CocoView then @$el
+          when RootView then @$el.find('#site-content-area')
+        # debugger if ViewClass is ModalView
         if @vueComponent
           target.replaceWith(@vueComponent.$el)
         else
+          # debugger
+          # if WrappedComponentClass.storeModule
+          #   unless _.isFunction(WrappedComponentClass.storeModule)
+          #     throw new Error('@storeModule should be a function')
+          #   store.registerModule('page', @WrappedComponentClass.storeModule())
           @vueComponent = new WrappedComponentClass({
             el: target[0]
             store
             @propsData
           })
           for listener in @listeners
             @setupListener(listener)
+        if ViewClass is RootView
+          window.rootComponent = @vueComponent
       setupListener: (listener) ->
         @vueComponent.$on listener.eventName, () =>
           listener.callback(arguments...)
@@ -40,4 +58,5 @@ makeWrapperForClass = (ParentClass) ->
 module.exports = VueWrapper = {
   Modal: makeWrapperForClass(ModalView)
   Component: makeWrapperForClass(CocoView)
+  RootComponent: makeWrapperForClass(RootView)
 }