app.js

import router from "./core/router.js";
import todoState from "./core/state.js";
import TodoApp from "./components/templates/app-todo.js";
import Footer from "./components/templates/footer.js";
import todoMain from "./components/organisms/todo-main.js";
import todoFooter from "./components/organisms/todo-footer.js";
import todoList from "./components/molecules/todo-list.js";
import clearCompleted from "./components/atoms/clear-completed.js";
import todoCount from "./components/atoms/todo-count.js";

//----------------------------------------------------------------

// Set the state management of the application
todoState.set({
  todos: [],
  filter: "all",
  counter: {
    active: 0,
    completed: 0,
  }
});

// Subscribe initial callbacks.
todoState.subscribe(todoMain.display.bind(todoMain));
todoState.subscribe(todoFooter.display.bind(todoFooter));
todoState.subscribe(todoList.display.bind(todoList));
todoState.subscribe(clearCompleted.display.bind(clearCompleted));
todoState.subscribe(todoCount.refresh.bind(todoCount));

//----------------------------------------------------------------

// Set the routes of the application with
// their respective associated handlers.
// The handlers set the filter property
// of the state object. The state will then
// notify the subscribed handlers to render the
// corresponding components.
router.add("/", () => {
  todoState.set({ filter: "all" });
})

router.add("/active", () => {
  todoState.set({ filter: "active" });
});

router.add("/completed", () => {
  todoState.set({ filter: "completed" });
});

//----------------------------------------------------------------

// Render the initial Page with all components.
document.body.append(
   TodoApp.render(),
   Footer.render(),
);

export default todoState