Skip to content

Instantly share code, notes, and snippets.

@trueadm
Last active August 15, 2016 14:19
Show Gist options
  • Save trueadm/116d6b0d5ab8fef2f3ff00e5412fae4b to your computer and use it in GitHub Desktop.
Save trueadm/116d6b0d5ab8fef2f3ff00e5412fae4b to your computer and use it in GitHub Desktop.
import { render, UIComponent, ModelComponent } from 'fusion';
const state = {
people: [],
title: 'Hello world'
};
// you could alternatively do this?
const SideBarModel = ModelComponent({
name: 'sidebar',
deleteItem(state, id) {
state.people = state.people.filter(item => item.id !== id);
},
getPeople(state) {
setTimeout(() => {
state.people = [
{ name: 'Fred', id: '1' },
{ name: 'Bob', id: '2' }
];
}, 500);
},
onComponentWillMount(props, state, actions) {
actions.getPeople();
},
reducer(props, state) {
return {
list: state.people
.filter(person => people.available)
.map((person, i) => ({ title: `#${ i } ${ person.name }`, id: person.id }))
};
}
});
const HeaderModel = ModelComponent({
name: 'header',
reducer(props, state) {
return {
h1: `${ state.title } ${ props.version }`
};
}
});
const SidebarItem = UIComponent(({ item, deleteItem }, models) => {
return (
<div>
<span>{ item.name }</span>
<button onClick={ () => deleteItem(item.id) }>Delete</button>
</div>
)
});
const MyApp = UIComponent((props, { header, sidebar }) => {
return (
<div>
<header>
<h1>{ header.h1 }</h1>
</header>
<section class='sidebar'>
{
sidebar.list.map(
(item, i) => <SidebarItem item={ item } deleteItem={ sidebar.deleteItem } />
)
}
</section>
</div>
);
});
// title prop actually goes into the ModelComponent, not to the UIComponent
render(<MyApp models={{ HeaderModel, SideBarModel }} version='1.0' />, container);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment