Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ideas for category rewrite
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
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.