dummy bacon + react setup

api.js

import store from './store';

export default {
  updateTitle (title) { api.update({title: title}); },
  starSong (songId) { api.star(songId); }
}

app.js

import $ from 'baquery';

import store from './store'; 

// entry point, called after DOM ready
export default function init () {
  const $playlist = $('#js-playlist-app');
  if($playlist.length === 0) return;
  
  store.props.onValue(newProps => ReactDOM.render(<Playlist {...newProps} />, $playlist[0]);
}

playlist.jsx

export default function Playlist = ({ songs, title, followers }) => {
 
  return <section className="playlist">
    <h2>{title}</h2>
    <ul className="songs">
      {songs.map(song, i) => <Song {...song} key={i} />}
    </ul>
    <ul className="followers">
      {followers.map(follower, i) => <Follower {...follower} key={i} />}
    </ul>
   </section>;
  
}

song.jsx

import api from './api';

const onClick = id => api.starSong(id);

export default function Song = ({name, id}) => {
 return <li className="song" onClick={() => onClick(id)}>{name}</li>;
}

store.js

import R from 'ramda';
import { Bacon as B } from 'baconjs';

// vanligvis abstrahert bort i en egen modul.

let busCache = {};

function bus (name) {
  return busCache[name] = busCache[name] || new B.Bus();
}

/*
* sang har typisk denne formen: { name: <navn>, id: <id>, starred: true | false }
*/

const props = B.update(
  {
    songs: [],
    title: "",
    followers: []
  },
  [d.stream('update')], update,
  [d.stream('star')], star
).toProperty();

const update = (state, data) => return R.merge(state, data);

const star = (state, id) => {
  const songs = R.map(doUpdate(id, R.merge(song, { star: true })), state.songs);
  return R.merge(state, { songs: songs });
}

const doUpdate = (id, fn) => song => id === song.id ? fn(song) : song;

export default {
  props: props,
  update: data => bus(name).push('update', data),
  star: id => bus(name).push('star', id)
}