todolist for effector-react with hooks

readme.md

TODO list for effector-react with hooks

try it

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import {createEvent, createStore, createApi, sample, combine} from 'effector'
import {useStore} from 'effector-react'

const inputStore = createStore('')
const todos = createStore([])
const visibilityFilter = createStore(todos => todos)

const submit = createEvent('sumbit form')
const onChange = createEvent('on change input')
const toggleTodo = createEvent('toggle todo')

const addTodo = sample(inputStore, submit).filter({
  fn: input => input.length > 0,
})

inputStore
	.on(onChange, (state, e) => e.currentTarget.value)
  .reset(addTodo)

todos
	.on(addTodo, (todos, text) => [...todos, {
    text,
    done: false,
    id: todos.length,
  }])
	.on(toggleTodo, (todos, todoId) => todos.map(
    todo => todo.id === todoId ? toggle(todo) : todo
  ))


const show = createApi(visibilityFilter, {
  all: () => (todos => todos),
  completed: () => (todos => todos.filter(({done}) => done)),
  uncompleted: () => (todos => todos.filter(({done}) => !done)),
})

const visibleTodos = combine(
  todos,
  visibilityFilter,
  (todos, filter) => filter(todos)
)

submit.watch(e => e.preventDefault())

const Input = () => (
  <input
    type="text"
    value={useStore(inputStore)}
    onChange={onChange}
  />
)
const List = () => (
  <ul>
    {useStore(visibleTodos).map(todo => (
      <li key={todo.id} onClick={() => toggleTodo(todo.id)}>
        {todo.text} - {todo.done ? "completed" : "uncompleted"}
      </li>
    ))}
  </ul>
)
const TodosPage = () => (
  <div>
    <form onSubmit={submit}>
      <Input />
    </form>
    <List/>
    <button onClick={show.all}>All</button>
    <button onClick={show.completed}>Completed</button>
    <button onClick={show.uncompleted}>Uncompleted</button>
  </div>
)
const root = document.createElement('div')
document.body.appendChild(root)
ReactDOM.render(<TodosPage/>, root)

function toggle({text, done, id}) {
  return {
    text,
    done: !done,
    id,
  }
}