Todos: TodoApp

todos-app.jsx

const TodoApp = () => {
  const [store, {
      addTodo, toggleAll, editTodo, 
      removeTodo, clearCompleted, setVisibility
    }] = createTodosStore(),
    locationHandler = () =>
      setVisibility(location.hash.slice(2) || 'all'
    );

  window.addEventListener('hashchange', locationHandler);
  onCleanup(() =>
    window.removeEventListener('hashchange', locationHandler)
  );
  return <section class='todoapp'>
    <TodoHeader addTodo={addTodo} />
    <Show when={(store.todos.length > 0)}>
      <TodoList {...{store, toggleAll, editTodo, removeTodo}}/>
      <TodoFooter store={store} clearCompleted={clearCompleted} /> 
    </Show>
  </section>
}

createRoot(() => document.body.insertBefore(
  <TodoApp />, 
  document.body.firstChild
));