yelouafi

/*
model : {
  counters: [{id: Number, counter: counter.model}],
  nextID  : Number
}
*/

const ADD     = Symbol('add');
const UPDATE  = Symbol('update counter');
const REMOVE  = Symbol('remove');

yelouafi

const resetAction = {type: counter.actions.INIT, data: 0};

function update(model, action) {
  
  return  action.type === ADD     ? addCounter(model)
        : action.type === RESET   ? resetCounters(model)
        : action.type === REMOVE  ? removeCounter(model, action.id)
        : action.type === UPDATE  ? updateCounter(model, action.id, action.data) 
        : model;
}

yelouafi

function view(model, handler) { 
  return h('div', [
    h('button', {
      on   : { click: handler.bind(null, {type: ADD}) }
    }, 'Add'), 
    h('button', {
      on   : { click: handler.bind(null, {type: RESET}) }
    }, 'Reset'),
    h('hr'),
    h('div.counter-list', model.counters.map(item => counterItemView(item, handler)))

yelouafi

main(
  {first: 0, second: 0}, // the initial state 
  document.getElementById('placeholder'), 
  twoCounters
);

yelouafi

const resetAction = {type: counter.actions.INIT, data: 0};

function update(model, action) {
  return  action.type === RESET     ?
            { 
              first : counter.update(model.first, resetAction),
              second: counter.update(model.second, resetAction)
            }
            
        : action.type === UPDATE_FIRST   ?

yelouafi

function view(model, handler) { 
  return h('div', [
    h('button', {
      on   : { click: handler.bind(null, {type: RESET}) }
    }, 'Reset'),
    h('hr'),
    counter.view(model.first, counterAction => handler({ type: UPDATE_FIRST, data: counterAction})),
    h('hr'),
    counter.view(model.second, counterAction => handler({ type: UPDATE_SECOND, data: counterAction})),
    

yelouafi

...
const INIT   = Symbol('init');

function update(count, action) {
  return ...
        : action.type === INIT  ? action.data
        ...
}

yelouafi

import test from 'tape';
import { update, actions } from '../app/js/counter';

test('counter update function', (assert) => {
    
  var count = 10;
  count = update(count, {type: actions.INC});
  assert.equal(count, 11);

  count = update(count, {type: actions.DEC});

yelouafi

const INC = Symbol('inc');
const DEC = Symbol('dec');

// model : Number
function view(count, handler) { 
  return h('div', [
    h('button', {
      on   : { click: handler.bind(null, {type: INC}) }
    }, '+'),
    h('button', {

yelouafi

// item : {id, like}
function likeItemView(item, handler) {
  
  return h('li', { key: item.id }, [ 
    likeComp.view(item.like, e => handler({ action: 'likeAction', id: item.id, data: e})) 
  ]);
}