arqex

/* OUR TOASTER COMPONENT */

// This is our singleton toaster
var singleton;

export default class Toaster extends React.Component {
	constructor(){
	  super();
	  this.state = {toasts: []};
	}

arqex

import Freezer from 'freezer-js';
var freezer = new Freezer({
  me: {id: 44, name: 'Javi', hobbies:['football', 'poker']},
  status: 'READY',
  users: {
    12: {id: 12, name: 'Joe', hobbies:['cinema', 'basket']},
    16: {id: 16, name: 'Alice', hobbies:['basket', 'videogames']},
    31: {id: 31, name: 'Mike', hobbies:['football', 'videogames']}
  },
  friends: [16, 36],

arqex

// Our root component
class App extends React.Component {
 constructor(){
   super();
   this.state = freezer.get();
 }
 render(){ /.../ }
 componentDidUpdate(){
  // Re-render on update
  // Our UI will always synchronized with the state

arqex

// This is our awesome component to render the current user
class Me extends React.Component {
  render(){
    // the component receives freezer.get().me in the prop `user`
    var me = this.props.user;
    return (
      <div className="me">
        <h2>{ me.name }</h2>
      </div>
    );

arqex

class UserCreator extends React.Component {
  render(){
    // This component will let us create an user by name
    return (
      <div className="userCreator">
        <input name="name" onChange={ e => this.setState({name}) } />
        <button onClick={ () => this.save() } />
      </div>
    );
  }

arqex

freezer.on('user:create', user => {
  freezer.get().users.set(user.id, user);
});

freezer.on('user:update', (id, update) => {
  freezer.get().users[id].set(update);
});

freezer.on('user:delete', id => {
  freezer.get().users.remove(id);

arqex

freezer.on( 'user:update', update => {
  var me1 = freezer.get().me;
  
  me1.set({name: update.name});
  if( update.hobbies ){
    me1.set({hobbies: update.hobbies});
  }
});

arqex

freezer.on('user:update', update => {
  var me1 = freezer.get().me;
  var me2 = me.set({name: update.name});
  if( update.hobbies ){
    me2.set({hobbies: update.hobbies});
  }
}

arqex

// I call the helper `d` after the concept `domain`.
const d = () => freezer.get().user;

freezer.on('user:create', user => {
  d().set(user.id, user);
});

freezer.on('user:update', (id, update) => {
  d()[id].set(update);
});

arqex

const me = () => freezer.get().me;

freezer.on( 'user:update', update => {
  me().set({name: update.name});
  if( update.hobbies ){
    me().set({hobbies: update.hobbies});
  }
});