imp: work on store, refactor, improve todoapp

examples/todoapp/components/TodoApp.js

@@ -1,20 +1,20 @@
 import { TodoItem } from "./TodoItem.js";
 
-const { StoreMixin, Component } = odoo.core;
+const { connect, Component } = odoo.core;
 
 const ENTER_KEY = 13;
 
-export class TodoApp extends StoreMixin(Component) {
+function mapStateToProps(state) {
+  return { todos: state.todos };
+}
+
+class TodoApp extends Component {
   template = "todoapp";
   widgets = { TodoItem };
   state = { filter: "all" };
 
-  get todos() {
-    return this.env.store.state.todos;
-  }
-
   get visibleTodos() {
-    let todos = this.todos;
+    let todos = this.props.todos;
     if (this.state.filter === "active") {
       todos = todos.filter(t => !t.completed);
     }
@@ -25,11 +25,11 @@ export class TodoApp extends StoreMixin(Component) {
   }
 
   get allChecked() {
-    return this.todos.every(todo => todo.completed);
+    return this.props.todos.every(todo => todo.completed);
   }
 
   get remaining() {
-    return this.todos.filter(todo => !todo.completed).length;
+    return this.props.todos.filter(todo => !todo.completed).length;
   }
 
   get remainingText() {
@@ -54,3 +54,5 @@ export class TodoApp extends StoreMixin(Component) {
     this.env.store.dispatch("toggleAll", !this.allChecked);
   }
 }
+
+export default connect(mapStateToProps)(TodoApp);

examples/todoapp/main.js

@@ -1,4 +1,4 @@
-import { TodoApp } from "./components/TodoApp.js";
+import TodoApp from "./components/TodoApp.js";
 import { makeStore } from "./store.js";
 
 async function makeEnv() {

examples/todoapp/templates.xml

@@ -8,7 +8,7 @@
             <input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
         </header>
         <!-- main section -->
-        <section class="main" t-if="todos.length">
+        <section class="main" t-if="props.todos.length">
             <input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="toggleAll"/>
             <label for="toggle-all"></label>
             <ul class="todo-list">
@@ -18,7 +18,7 @@
             </ul>
         </section>
         <!-- footer -->
-        <footer class="footer" t-if="todos.length">
+        <footer class="footer" t-if="props.todos.length">
             <span class="todo-count">
                 <strong>
                     <t t-esc="remaining"/>
@@ -36,7 +36,7 @@
                     <a href="#/completed" t-on-click="updateState({filter:'completed'})" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
                 </li>
             </ul>
-            <button class="clear-completed" t-if="todos.length gt remaining" t-on-click="clearCompleted">
+            <button class="clear-completed" t-if="props.todos.length gt remaining" t-on-click="clearCompleted">
         Clear completed
             </button>
         </footer>