Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Todos: List & Item
const TodoList = ({ store, editTodo, removeTodo, toggleAll }) => {
const [state, setState] = createState(),
filterList = todos => {
if (store.showMode === 'active')
return todos.filter(todo => !todo.completed);
else if (store.showMode === 'completed')
return todos.filter(todo => todo.completed);
else return todos
},
isEditing = todoId => state.editingTodoId === todoId,
setCurrent = todoId => setState('editingTodoId', todoId),
save = ({target: {value}}, todoId) => {
let title;
if (!(state.editingTodoId === todoId
&& (title = value.trim()))) return;
editTodo({id: todoId, title});
setCurrent();
},
toggle = ({target: {checked}}, todoId) =>
editTodo({id: todoId, completed: checked})
,
edit = (e, todoId) => setCurrent(todoId),
remove = (e, todoId) => removeTodo(todoId),
doneEditing = (e, todoId) => {
if (e.keyCode === ENTER_KEY) save(e, todoId);
else if (e.keyCode === ESCAPE_KEY) setCurrent();
};
return <section class='main'>
<input
id='toggle-all'
class='toggle-all'
type='checkbox'
checked={(!store.remainingCount)}
onInput={({target: {checked}}) => toggleAll(checked)}
/>
<label for='toggle-all' />
<ul class='todo-list'>
<For each={(filterList(store.todos))}
transform={selectWhen(
() => state.editingTodoId, 'editing'
)}
>{
todo => <TodoItem {...{
todo, isEditing, toggle, edit,
remove, doneEditing, save}
} />
}</For>
</ul>
</section>
}
const TodoItem = ({ todo, isEditing, toggle, edit, remove, save, doneEditing }) => (
<li
class='todo'
model={todo.id}
classList={({completed: todo.completed})}
>
<div class='view'>
<input
class='toggle'
type='checkbox'
checked={(todo.completed)}
onInput={toggle}
/>
<label onDblClick={edit}>{(todo.title)}</label>
<button class='destroy' onClick={remove} />
</div>
<Show when={(isEditing(todo.id))}>
<input
class='edit'
value={todo.title}
onFocusOut={save}
onKeyUp={doneEditing}
forwardRef={el => Promise.resolve().then(() => el.focus())}
/>
</Show>
</li>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment