import fetchival from 'fetchival';
import {from} from 'rxjs';
import {map, filter, debounceTime, distinctUntilChanged, tap, flatMap} from 'rxjs/operators';
import {createStore, createAction, createStatus} from 'rxstate';
// create status action
const status = createStatus();
// create action that fetches typeahead suggestions from server
const getTypeahead = createAction();
const typeahead$ = getTypeahead.$.pipe(
  map(e => e.target.value),
  filter(q => q.length > 3),
  debounceTime(300),
  distinctUntilChanged(),
  tap(() => status('loading')),
  flatMap(q => from(fetchival(typeaheadAPI).post({q}))),
  tap(() => status('done'))
);
// create an array of action streams for store
const streams = [status.$, typeahead$];
// create store
const store = createStore({streams, defaultState: {init: true}});
// other place in code:
// subscribe for state updates
store.subscribe(state => {
  console.log(state);
  // ... handle your state here
});
// other place in code:
// trigger action
getTypeahead('keyword');

// create combinator that always returns new state
const combinator = (_, data) => data;
// create store
const store = createStore({streams, defaultState, combinator});

// create status with custom key
const status = createStatus('customStatus');
// state will be updated with {customStatus: 'statusText'}