JS-eksempel

_store.js

// Denne brukes av alle React-apper (ligger i lib-mappe)

import B from 'baconjs';
import R from 'ramda';

import Dispatcher from './dispatcher';
import { renameKeys } from './functions';

export default function store (fields = {}, keyMap = {}, 
  transform = state => state) {
  const d = new Dispatcher();
  const rename = renameKeys(keyMap);

  const props = B.update(
    fields,

    [d.stream('pop')], (state, {item, arr}) => {
      const items = R.reject(it => it.id === item.id, state[arr]);
      return R.merge(state, { [arr]: items });
    },

    [d.stream('push')], (state, {item, arr}) => {
      const old = state[arr];
      const items = R.reduce((arr, it) => arr.concat(it), [], old.concat(item));
      return R.merge(state, { [arr]: items });
    },

    [d.stream('reset')], () => fields,

    [d.stream('update')], (state, data) => R.merge(state, data),
    
    [d.stream('update-item')], (state, {item, arr, data}) => {
      const items = R.map(it => it.id === item.id ? R.merge(it, data) : it, state[arr]);
      return R.merge(state, { [arr]: items });
    }

  );

  const params = () => props.take(1).map(rename).map(transform);

  return {
    combine: prop => B.combineWith((p1, p2) => R.merge(p1, p2), prop, params()),
    params,
    pop: (item, arr) => d.push('pop', {item, arr}),
    props,
    push: (item, arr) => d.push('push', {item, arr}),
    reset: () => d.push('reset'),
    update: data => d.push('update', data),
    updateItem: (item, arr, data) => d.push('update-item', {item, arr, data})
  }
}

api.js

import store from './store';

export default {
  back () {
    store.props.take(1)
    .onValue(({ active, count }) => {
      let step = active - 1;
      if(step < 0) step = count-1;
      store.update({ active: step });
    });
  },

  next () {
    store.props.take(1)
    .onValue(({ active, count }) => {
      let step = active + 1;
      if(step === count) step = 0;
      store.update({ active: step });
    });
  },

  update (data) { store.update(data); }
}

app.jsx

import React from 'react';
import R from 'ramda';
import { TransitionGroup, CSSTransition } from 'react-transition-group'; 

import api from './api';
import CONSTANTS from './constants';

const Quotes = ({ active }) => {

  const { quotes } = CONSTANTS;
  const quote = R.find(item => R.indexOf(item, quotes) === active, quotes);

  return (
    <div className="quotes-container">
      <div className="quotes">
        <TransitionGroup>
          <CSSTransition
            key={quote.key}
            classNames="slide-in"
            timeout={600}>
            <Quote {...quote} />
          </CSSTransition>
        </TransitionGroup>
      </div>
      <ul className="indicator margin-top-large">
        {quotes.map((_, i) => <li key={i} className={`pip ${ active === i ? 'active' : ''}`} onClick={() => api.update({ active: i })}></li>)}
      </ul>
      <i className="icon icon-arrow-left click" onClick={api.back} />
      <i className="icon icon-arrow-right click" onClick={api.next} />
    </div>
  );
};

const Quote = ({ text, quotee }) => {

  return (
    <div className="quote">
      <h1 className="margin-bottom-small text-center centered width-medium">{`"${text}"`}</h1>
      <p className="text-grey lead-text text-center">{quotee}</p>
    </div>
  );

};

export default Quotes;

constants.js

const CONSTANTS = {
  quotes: 
    [
      {
        "key": 0,
        "text": "Helt genialt! Før brukte jeg timesvis på prosessen, nå går det automatisk",
        "quotee": "Torstein Pettersen, Statsautorisert revisor"
      },
      {
        "key": 1,
        "text": "Ei slik teneste har eg etterlyst i mange år. Ei revisjonshandling mindre å følge opp. Veldig bra",
        "quotee": "Vegard W. Hansen, Senior revisor (EY alumni)"
      }
  ]
};

export default CONSTANTS;

index.js

// entry point

import $ from 'baquery';
import React from 'react';
import ReactDOM from 'react-dom';

import store from './store';
import api from './api';

import Quotes from './app';
import CONSTANTS from './constants';

export default function init () {
  const $quotes = $('#js-quotes');

  if($quotes.length === 0) return;

  store.props.onValue(newProps => ReactDOM.render(<Quotes {...newProps} />, $quotes[0]));

  api.update({ count: CONSTANTS.quotes.length });
}

store.js

import { store } from '../../lib';

export default store({ active: 0 });