@@ -7,26 +7,25 @@ import store from "./store.js";
 
 //store.on("log", (state, data) => console.log(data, state));
 
-// Main rendering function (creates virtual dom)
-const build = () => {
+const app = () => {
   const { todos, filteredTodos, filter } = store.get();
-  localStorage.setItem("h3_todo_list", JSON.stringify(todos));
-  store.dispatch("todos/filter", filter);
   const [error, updateError] = region(EmptyTodoError);
   store.on("error/update", updateError);
+  const [mainArea, updateMainArea] = region(() => {
+    store.dispatch("todos/filter", filter);
+    localStorage.setItem("h3_todo_list", JSON.stringify(todos));
+    return h3("div#main-area", [NavigationBar(), TodoList()]);
+  });
+  store.on("mainArea/update", () => {
+    updateMainArea();
+  });
   return h3("div#todolist.todo-list-container", [
     h3("h1", "To Do List"),
     AddTodoForm(),
     error,
-    NavigationBar(),
-    TodoList(),
+    mainArea,
   ]);
 };
 
 store.dispatch("todos/load");
-
-const [app, update] = region(build);
-
-store.on("app/update", update);
-
-mount("app", app);
+mount("app", app());

@@ -16,7 +16,7 @@ key: `todo_${Date.now()}__${newTodo.value}`, // Make todos "unique-enough" to ensure they are processed correctly
       text: newTodo.value,
     });
     newTodo.value = "";
-    store.dispatch("app/update");
+    store.dispatch("mainArea/update");
     document.getElementById("new-todo").focus();
   };
   const addTodoOnEnter = (event) => {

@@ -7,7 +7,7 @@ // Set the todo filter.
   const setFilter = () => {
     let f = document.getElementById("filter-text");
     store.dispatch("todos/filter", f.value);
-    store.dispatch("app/update");
+    store.dispatch("mainArea/update");
     f = document.getElementById("filter-text");
     f.focus();
   };

@@ -19,14 +19,14 @@ const page = store.get('page');
     const newPage = page - 1;
     store.dispatch("pages/set", newPage);
     window.location.hash = `/?page=${newPage}`;
-    store.dispatch("app/update");
+    store.dispatch("mainArea/update");
   }
   function setNextPage() {
     const page = store.get('page');
     const newPage = page + 1;
     store.dispatch("pages/set", newPage);
     window.location.hash = `/?page=${newPage}`;
-    store.dispatch("app/update");
+    store.dispatch("mainArea/update");
   }
   return h3("div.paginator", [
     h3(

@@ -5,11 +5,11 @@ export default function Todo(data) {
   const todoStateClass = data.done ? ".done" : ".todo";
   const toggleTodo = (todo) => {
     store.dispatch("todos/toggle", data);
-    store.dispatch("app/update");
+    store.dispatch("mainArea/update");
   };
   const removeTodo = (todo) => {
     store.dispatch("todos/remove", data);
-    store.dispatch("app/update");
+    store.dispatch("mainArea/update");
   };
   return h3(`div#${data.key}.todo-item`, [
     h3(`div.todo-content${todoStateClass}`, [