iFlow - todo example with React.

iFlow/react-iFlow /react- todo example.

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<script src="https://unpkg.com/iflow/dist/umd/index.min.js"></script>
<script src="https://unpkg.com/react-iflow/dist/umd/index.js"></script>
<div id="app"></div>

Babel + JSX

const { iFlow, getState, setState } = iflow
const { Component } = React
const { default:flow, connect, Provider } = iFlowReact

const todos = Array(10**3).fill().map(() => ({ text: '11', completed: false }));

class Todo {
  constructor () {
    this.list = []
    this.input = ''
    this.tabStatus = 'All'
    this.tabs = [
      'All',
      'Active',
      'Completed'
    ]
    this.history = [{list: []}]
    this.index = 1
  }

  onChange ({target}) {
    this.input = target.value
  }

  add (e) {
    this.list.push({
      text: this.input
    })
    this.input = ''
    e.preventDefault()
  }

  toggle (item) {
    item.completed = !item.completed
  }

  clearCompleted () {
    this.list = this.list.filter(({completed}) => !completed)
  }

  jump (tabStatus) {
    this.tabStatus = tabStatus
  }

  record (actionName) {
    if (['add', 'toggle', 'clearCompleted'].includes(actionName)) {
      const {list} = getState(this)
      this.history.splice(this.index, this.history.length - this.index, {list})
      this.index += 1
    }
  }

  doing (index) {
    this.index += index
    const {list} = getState(this.history[this.index - 1])
    setState(this, {list})
  }

  get todo () {
    return this.list
      .filter(
        ({completed}) => [true, !completed, completed][this.tabs.indexOf(this.tabStatus)]
      )
  }

  get redoDisable () {
    return this.history.length === this.index
  }

  get undoDisable () {
    return this.index === 1
  }
}

const persist = {
  stateWillInitialize () {
    const initialValues = todos
    if (initialValues) return initialValues
  },
  stateDidChange (model) {
    localStorage.setItem('todo', JSON.stringify(getState(model)))
  }
}

const store = iFlow(new Todo()).middleware(persist).addListener((...args) => {
  const [actionName] = args.slice(-2, -1)
  actionName !== 'record' && store.record(actionName)
}).create()


class App extends Component {
  render() {
    return [
      <Head key={'head'}/>,
      <Tab key={'tab'}/>,
 ...