Ideas for category rewrite
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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