TODO list with input validation
import {createEvent, createStore, createEffect, restore, combine, sample} from 'effector'
import {useStore, useList} from 'effector-react'
const submit = createEvent()
const submitted = createEvent()
const completed = createEvent()
const changed = createEvent()
const removed = createEvent()
const validate = createEffect(([todo, todos]) => {
if (todos.some(item => item.text === todo))
throw 'This todo is already on the list'
if (!todo.trim().length) throw 'Required field'
return null
})
const $todo = restore(changed, '').reset(submitted)
const $error = restore(validate.failData, '').reset(changed)
const $todos = createStore([])
.on(submitted, (prev, next) => [...prev, {text: next, completed: false}])
.on(completed, (state, index) => state.map((item, i) => ({
...item,
completed: index === i ? !item.completed : item.completed,
})))
.on(removed, (state, index) => state.filter((_, i) => i !== index))
sample({
clock: submit,
source: [$todo, $todos],
target: validate,
})
sample({
clock: validate.done,
source: $todo,
target: submitted,
})
submit.watch(e => e.preventDefault())
const App = () => {
const tasks = useStore($todos)
const todo = useStore($todo)
const error = useStore($error)
const list = useList($todos, (item, index) => (
<li style={{textDecoration: item.completed ? 'line-through' : ''}}>
<input
type="checkbox"
checked={item.completed}
onChange={() => completed(index)}
/>
{item.text}
<button type="button" onClick={() => removed(index)} className="delete">
x
</button>
</li>
))
return (
<div>
<h1>Todos</h1>
<form>
<input
className="text"
type="text"
name="todo"
value={todo}
onChange={e => changed(e.target.value)}
/>
<button type="submit" onClick={submit} className="submit">
Submit
</button>
{error && <div className="error">{error}</div>}
</form>
<ul style={{listStyle: 'none'}}>{list}</ul>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))