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,43 @@
-import { useEffect, useState } from "react";
-import { remult } from "remult";
-import { Task } from "./shared/Task";
-import { TasksController } from "./shared/TasksController";
+import { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { action } from 'mobx';
+import { Store } from "./Store";
 
-const taskRepo = remult.repo(Task);
-
-async function fetchTasks(hideCompleted: boolean) {
-  return taskRepo.find({
-    limit: 20,
-    orderBy: { completed: "asc" },
-    where: { completed: hideCompleted ? false : undefined }
-  });
-}
-
-
-
-function App() {
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [hideCompleted, setHideCompleted] = useState(false);
+export const store = new Store();
 
+const App = observer(() => {
   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 => 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 type="button" onClick={() => store.saveTask(task)}>Save</button>
+              <button type="button" onClick={() => store.deleteTask(task)}>Delete</button>
             </div>
           );
         })}
-
       </main>
-      <button onClick={addTask}>Add Task</button>
+      <button type="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 type="button" onClick={() => store.setAll(true)}>Set all as completed</button>
+        <button type="button" onClick={() => store.setAll(false)}>Set all as uncompleted</button>
       </div>
-
     </div>
   );
-}
-
+});
 
 export default App;

src/Store.ts

@@ -0,0 +1,43 @@
+import { remult } from "remult";
+import { Task } from "./shared/Task";
+import { TasksController } from "./shared/TasksController";
+import { makeAutoObservable, runInAction } from 'mobx';
+import { store } from "./App";
+
+export class Store {
+  taskRepo = remult.repo(Task);
+  tasks: Task[] = [];
+  hideCompleted = false;
+  constructor() {
+    makeAutoObservable(this);
+  }
+  replaceTasks(tasks: Task[]) {
+    this.tasks = tasks;
+  }
+  async loadTasks() {
+    this.replaceTasks(await this.taskRepo.find({
+      limit: 20,
+      orderBy: { completed: "asc" },
+      where: { completed: this.hideCompleted ? false : undefined }
+    }));
+  }
+  addTask() {
+    this.tasks.push(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(() => this.tasks = this.tasks.filter(t => t !== task));
+  }
+  async setAll(completed: boolean) {
+    await TasksController.setAll(completed);
+    this.loadTasks();
+  }
+}

src/shared/Task.ts

@@ -1,3 +1,4 @@
+import { makeAutoObservable } from "mobx";
 import { Allow, Entity, Fields, Validators } from "remult";
 import { Roles } from "./Roles";
 
@@ -8,6 +9,9 @@ import { Roles } from "./Roles";
       allowApiDelete: Roles.admin
 })
 export class Task {
+      constructor(){
+         makeAutoObservable(this);
+      }
       @Fields.uuid()
       id!: string;
 
@@ -19,4 +23,4 @@ export class Task {
 
       @Fields.boolean()
       completed = false;
-}
+}