cycle.js list example

import xs from 'xstream'
// import TeamList from '../components/TeamList'
import {button, div, ul, li, p} from '@cycle/dom'

const fakeData = [
  {
    name: 'Maine Road FC',
    points: 40,
    players: [
      {
        id: 0,
        name: 'Zé'
      },
      {
        id: 1,
        name: 'Jão'
      }
    ]
  },
  {
    name: 'Albergue FC',
    points: 50,
    players: [
      {
        id: 0,
        name: 'Zé'
      },
      {
        id: 1,
        name: 'Jão'
      }
    ]
  },
  {
    name: 'Terulipa FC',
    points: 30,
    players: [
      {
        id: 0,
        name: 'Zé'
      },
      {
        id: 1,
        name: 'Jão'
      }
    ]
  }
]

const Team = sources => {
  const vdom$ = sources.props$
    .map(team => li(`${team.name} - ${team.points}`))

  return {
    DOM: vdom$
  }
}

const TeamList = sources => {
  const intent = () => xs.merge(
    sources.DOM.select('#sortList').events('click')
      .mapTo({type: 'list/sort'})
  )
  const model = actions$ => {
    const sortedList$ = actions$
      .map(action => action.type === 'list/sort')
      .map(action => state => state.sort((a, b) => a.points - b.points))

    return sources.props$
      .map(initialState =>
        xs.merge(sortedList$)
          .fold((state, action) => action(state), initialState)
      ).flatten()
  }
  const view = state$ =>
    state$
      .map(teams => {
        const teamsNodes = teams.map(teamItem => {
          const props$ = xs.of(teamItem)
          const teamSource = {DOM: sources.DOM, props$}
          const team = Team(teamSource)
          return team.DOM
        })
        console.log(teamsNodes)
        console.log(...teamsNodes)
        return xs.combine(...teamsNodes)
          .map(nodes => div([
            p(['list']),
            button('#sortList', 'sort list'),
            ul(nodes)
          ]))
      }).flatten()
  const vdom$ = view(model(intent(), ))
  return {
    DOM: vdom$
  }
}

export default sources => {
  const model = () => {
    const teams$ = xs.of(fakeData)
    return teams$
  }
  const view = state$ => {
    const listSources = {DOM: sources.DOM, props$: state$}
    const teamList = TeamList(listSources)
    return teamList.DOM
      .map(teamListDOM => div([teamListDOM]))
  }
  const vdom$ = view(model())
  return {
    DOM: vdom$
  }
}