const validate = createEffect()

const submit = createEvent()

const submitted = createEvent()

const completed = createEvent()

const changed = createEvent()

const removed = createEvent()

const $todos = createStore([])

const $todo = restore(changed, '').reset(submitted)

const $error = restore(validate.failData, '').reset(changed)

​

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

​

$todos.on(submitted, (prev, next) =>

  prev.concat({text: next, completed: false})

)

$todos.on(completed, (state, index) =>

  state.map((item, i) => ({

    ...item,

    completed: index === i ? !item.completed : item.completed,

  }))

)

$todos.on(removed, (state, index) => state.filter((_, i) => i !== index))

​

validate.use(([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

})

​

sample({

  source: combine($todo, $todos),

  clock: submit,

  target: validate,

})

​

sample({

  source: $todo,

  clock: validate.done,

  target: submitted,

})

​

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'))

​

const style = document.createElement('style')

document.body.appendChild(style)

style.innerHTML = `

h1 {

  color: #24292E;

}

form {

  position: relative;

  display: grid;

  grid-template-columns: 3fr 1fr;

  grid-gap: 10px;

  height: 25px;

}

.text {

  width: 100%;

  border: 1px solid #24292E;

}

.submit {

  width: 100%;

  border: 0;

  background-color: #24292E;

  color: white;

  cursor: pointer;

}

.error {

  position: absolute;

  top: -20px;

  left: 0;

  color: red;

}

ul {

  padding: 0;

}

li {

  position: relative;

  width: 100%;

  padding: 10px;

  border: 1px solid #24292E;

  border-top: 0;

  box-sizing: border-box;

}

li:first-of-type {

  border-top: 1px solid #24292E;

}

.delete {

  position: absolute;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  border: 0;

  background: transparent;

  color: #24292E;

  cursor: pointer;

}

`

​