Ideas for category rewrite

CategoryOverlay.js

const Tabs = () => {
    // to be implemented but would deal with all the tab magic.
};

const Header = ( { title, actions } ) => {
    // to be implemented
}

// CategoryOverlay becomes an Overlay without any async properties.
// Very easy to test and easier to tweak
// Lots of reusable components that can be used elsewhere (TopicList could be used by Talk),
// very easy to make an Overlay all of a sudden
const CategoryOverlay = (props) => {
    return Overlay( Object.assign({}, props, {
        title: 'Categories',
        header: Header({
            actions: [
                Button({ label: 'Add to category', href: '#/categories/add' })
            ],
            title: 'Categories'
        } );
        // content of overlay..
        children: [
            Panel( { text: 'Thiss page belongs to the following categories' } ),
            Tabs( {
                tabs: [ 'Content based', 'Organizational' ],
                panels: [
                    TopicList({...props.data, filter: 'CONTENT'}),
                    TopicList({...props.data, filter: 'ORGANIZATION'})
                ]
            } )
        )
    }))
};

// Wiring up (tried to keep code as close to as what it what before)
overlayManager.add( /^\/categories$/, () => {
    var result = $.Deferred();

    // This could be automated in a LoadCodeOverlay
    loader.loadModule( 'mobile.categories.overlays', true ).done( function ( loadingOverlay ) {
      var CategoryOverlay = M.require( 'mobile.categories.overlays/CategoryOverlay' );
      /*
      Move to property
      M.on( 'category-added', function () {
        window.location.hash = '#/categories';
      } );*/

      loadingOverlay.hide();
      // remove the new keyword
      const options = {
        //api: new mw.Api(), // no api query any more.
        isAnon: user.isAnon(),
        onAddCategory: () => {
          window.location.hash = '#/categories';
        },
        title: M.getCurrentPage().title
      };
      const overlay = CategoryOverlay( options );
      // Rather than inside component the re-rendering is done inside the wiring code
      // This needs more thought.
      api.getCategories().then((data) => {
          // This is the most lightweight, but ideally we could lean on redux
          // here or preact like ideas.
          // overlayManager could be replaced with redux action { action: CHANGE_URL, url }
          // A framework is necessary for this approach
          overlay.rerender( Object.assign( {}, options, { data } ))
      });
      result.resolve( overlay );
    } );
    return re
})