Tri-cycle-autoInc-with-sampleCombine.js

import {run} from '@cycle/xstream-run';
import {makeDOMDriver, div, button} from '@cycle/dom';
//import _ from 'lodash';
import sampleCombine from 'xstream/extra/sampleCombine'
import xs from 'xstream';

function main ({DOM}) {
  
  const inc = (c) => c+1;
  const dec = (c) => c-1;
  const noop = (c) => c;
  const zero = (c) => 0;
  
  const add$ = DOM
    .select('.add')
    .events('click')
    .map(ev => inc);
  const sub$ = DOM
    .select('.sub')
    .events('click')
    .map(ev => dec);
  const toggleAdd$ = DOM
    .select('.toggleAdd')
    .events('click');
//    .map(ev => 1);
  const toggleSub$ = DOM
    .select('.toggleSub')
    .events('click');
//    .map(ev => 1);
  const reset$ = DOM
    .select('.reset')
    .events('click')
    .map(ev => zero);
    
    
  const second$ = xs.periodic(1000);//.map(val => ({source: 'periodic', value: val});
  
  const togStateDec$ = toggleSub$.fold((acc, x) => !acc, false);//.debug('toggleDec');
  const togStateInc$ = toggleAdd$.fold((acc, x) => !acc, false);//.debug('toggleInc');

  const autoDec$ = second$.compose(sampleCombine(togStateDec$)).filter(a => a[1]).mapTo(dec);//.debug('atoDec');
  const autoInc$ = second$.compose(sampleCombine(togStateInc$)).filter(a => a[1]).mapTo(inc);
  const intent$ = xs.merge(sub$, add$, autoDec$, autoInc$, reset$.mapTo(zero));
      
  const count$ = intent$.fold((acc, fn) => fn(acc), 0);
  
  const viewModel$ = xs.combine(count$, togStateDec$, togStateInc$).map((a) => ({count:a[0], tsd:a[1], tsi:a[2]}))

  return {
    DOM: viewModel$.map((vm) =>
      div('.counter', [
          button('.add', 'Add one')
        , button('.toggleAdd', 'Toggle Add every second '+vm.tsi)
        , div('Count: ' + vm.count)
        , button('.sub', 'Sub one')
        , button('.toggleSub', 'Toggle Sub every second '+ vm.tsd)
        , div([button('.reset', 'Reset')])
      ])
    )
  };
}

const sources = {
  DOM: makeDOMDriver('.app')
}

// Normally you need to call Cycle.run, but Tricycle handles that for you!
// If you want to try this out locally, just uncomment this code.
//
// Cycle.run(main, sources);