Play with mobx

package.json

@@ -16,6 +16,8 @@
     "express": "^4.18.1",
     "helmet": "^6.0.0",
     "heroku-ssl-redirect": "^0.1.1",
+    "mobx": "^6.6.2",
+    "mobx-react-lite": "^3.4.0",
     "pg": "^8.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.tsx

@@ -1,87 +1,96 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { remult } from "remult";
 import { Task } from "./shared/Task";
 import { TasksController } from "./shared/TasksController";
+import { observer } from "mobx-react-lite";
+import { action, makeAutoObservable, observable, runInAction } from 'mobx';
 
-const taskRepo = remult.repo(Task);
 
-async function fetchTasks(hideCompleted: boolean) {
-  return taskRepo.find({
-    limit: 20,
-    orderBy: { completed: "asc" },
-    where: { completed: hideCompleted ? false : undefined }
-  });
-}
 
 
+class Store {
+  taskRepo = remult.repo(Task);
+  readonly tasks = observable<Task>([]);
+  hideCompleted = false;
+  constructor() {
+    makeAutoObservable(this);
+  }
+  replaceTasks(t: Task[]) {
+    this.tasks.replace(t.map(t => makeAutoObservable({ ...t })));
+  }
+  async loadTasks() {
+    this.replaceTasks(await
+      this.taskRepo.find({
+        limit: 20,
+        orderBy: { completed: "asc" },
+        where: { completed: this.hideCompleted ? false : undefined }
+      }));
+  }
+  addTask() {
+    this.tasks.push(makeAutoObservable(new Task()))
+  }
+  async saveTask(task: Task) {
+    try {
+      const savedTask = await this.taskRepo.save(task);
+      runInAction(() => store.tasks[store.tasks.indexOf(task)] = savedTask);
+    } catch (error: any) {
+      alert(error.message);
+    }
+  }
+  async deleteTask(task: Task) {
+    await this.taskRepo.delete(task);
+    runInAction(() => store.tasks.remove(task));
+  }
+  async setAll(completed: boolean) {
+    await TasksController.setAll(completed);
+    this.loadTasks();
+  }
+}
+const store = new Store();
 
 function App() {
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [hideCompleted, setHideCompleted] = useState(false);
+  return <Todo store={store} />
 
+}
+const Todo: React.FC<{ store: Store }> = observer(({ store }) => {
   useEffect(() => {
-    fetchTasks(hideCompleted).then(setTasks);
-  }, [hideCompleted]);
-
-  const addTask = () => {
-    setTasks([...tasks, new Task()])
-  };
-  const setAll = async (completed: boolean) => {
-    await TasksController.setAll(completed);
-    setTasks(await fetchTasks(hideCompleted));
-  }
-
+    store.loadTasks()
+  }, [store.hideCompleted]);
   return (
     <div>
       <input
         type="checkbox"
-        checked={hideCompleted}
-        onChange={e => setHideCompleted(e.target.checked)} /> Hide Completed
+        checked={store.hideCompleted}
+        onChange={action(e => store.hideCompleted = e.target.checked)} /> Hide Completed
       <main>
-        {tasks.map(task => {
-          const handleChange = (values: Partial<Task>) => {
-            setTasks(tasks.map(t => t === task ? { ...task, ...values } : t));
-          };
-
-          const saveTask = async () => {
-            try {
-              const savedTask = await taskRepo.save(task);
-              setTasks(tasks.map(t => t === task ? savedTask : t));
-            } catch (error: any) {
-              alert(error.message);
-            }
-          }
-
-
-          const deleteTask = async () => {
-            await taskRepo.delete(task);
-            setTasks(tasks.filter(t => t !== task));
-          };
-
+        {store.tasks.map(task => {
           return (
             <div key={task.id}>
               <input type="checkbox"
                 checked={task.completed}
-                onChange={e => handleChange({ completed: e.target.checked })} />
+                onChange={action(e => {
+                  const prev = task.completed;
+                  task.completed = e.target.checked;
+                })} />
               <input
                 value={task.title}
-                onChange={e => handleChange({ title: e.target.value })} />
-              <button onClick={saveTask}>Save</button>
-              <button onClick={deleteTask}>Delete</button>
+                onChange={action(e => task.title = e.target.value)} />
+              <button onClick={() => store.saveTask(task)}>Save</button>
+              <button onClick={() => store.deleteTask(task)}>Delete</button>
             </div>
           );
         })}
 
       </main>
-      <button onClick={addTask}>Add Task</button>
+      <button onClick={() => store.addTask()}>Add Task</button>
       <div>
-        <button onClick={() => setAll(true)}>Set all as completed</button>
-        <button onClick={() => setAll(false)}>Set all as uncompleted</button>
+        <button onClick={() => store.setAll(true)}>Set all as completed</button>
+        <button onClick={() => store.setAll(false)}>Set all as uncompleted</button>
       </div>
 
     </div>
   );
-}
+});
 
 
 export default App;