From 2de5c9d253de641a8cfbd7070b0be05cbc4d3d1e Mon Sep 17 00:00:00 2001 From: Noam Honig Date: Sun, 11 Sep 2022 19:06:41 +0300 Subject: [PATCH 1/4] added entity ref --- db/tasks.json | 2 +- src/App.tsx | 15 +++++++-------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/db/tasks.json b/db/tasks.json index b674c29..e615f4c 100644 --- a/db/tasks.json +++ b/db/tasks.json @@ -26,7 +26,7 @@ }, { "id": "94c14437-ac2c-405b-931c-16659d271468", - "title": "jl;jkl;", + "title": "jl;jkl;123456", "completed": false } ] \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index f75a8ee..39baf86 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,12 @@ import React, { useEffect, useState } from "react"; -import { remult } from "remult"; +import { Remult, 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'; - +import { action, makeAutoObservable, observable, runInAction, createAtom } from 'mobx'; +Remult.entityRefInit = (ref, row) => ref.subscribe(createAtom("entity")); class Store { taskRepo = remult.repo(Task); @@ -16,7 +16,7 @@ class Store { makeAutoObservable(this); } replaceTasks(t: Task[]) { - this.tasks.replace(t.map(t => makeAutoObservable({ ...t }))); + this.tasks.replace(t); } async loadTasks() { this.replaceTasks(await @@ -27,7 +27,7 @@ class Store { })); } addTask() { - this.tasks.push(makeAutoObservable(new Task())) + this.tasks.push(this.taskRepo.create()) } async saveTask(task: Task) { try { @@ -50,7 +50,6 @@ const store = new Store(); function App() { return - } const Todo: React.FC<{ store: Store }> = observer(({ store }) => { useEffect(() => { @@ -68,13 +67,13 @@ const Todo: React.FC<{ store: Store }> = observer(({ store }) => {
{ + onChange={(e => { const prev = task.completed; task.completed = e.target.checked; })} /> task.title = e.target.value)} /> + onChange={(e => task.title = e.target.value)} />
From 9243bd215ce8a374c8878aa8ed25a8246db41ced Mon Sep 17 00:00:00 2001 From: Noam Honig Date: Sun, 11 Sep 2022 19:13:19 +0300 Subject: [PATCH 2/4] mobx with entity base --- src/App.tsx | 26 ++++++++++++-------------- src/shared/Task.ts | 8 ++++---- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 39baf86..c174bd7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,6 +14,9 @@ class Store { hideCompleted = false; constructor() { makeAutoObservable(this); + this.taskRepo.addEventListener({ + deleted: action(task => this.tasks.remove(task)) + }); } replaceTasks(t: Task[]) { this.tasks.replace(t); @@ -29,18 +32,6 @@ class Store { addTask() { this.tasks.push(this.taskRepo.create()) } - 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(); @@ -74,8 +65,15 @@ const Todo: React.FC<{ store: Store }> = observer(({ store }) => { task.title = e.target.value)} /> - - + + + {task.$.title.error} ); })} diff --git a/src/shared/Task.ts b/src/shared/Task.ts index 3c7c3bb..0aaa585 100644 --- a/src/shared/Task.ts +++ b/src/shared/Task.ts @@ -1,4 +1,4 @@ -import { Allow, Entity, Fields, Validators } from "remult"; +import { Allow, Entity, EntityBase, Fields, Validators } from "remult"; import { Roles } from "./Roles"; @Entity("tasks", { @@ -7,13 +7,13 @@ import { Roles } from "./Roles"; allowApiInsert: Roles.admin, allowApiDelete: Roles.admin }) -export class Task { +export class Task extends EntityBase { @Fields.uuid() id!: string; @Fields.string({ - validate: Validators.required, - allowApiUpdate: Roles.admin + validate: Validators.required, + allowApiUpdate: Roles.admin }) title = ''; From 89b0a0f4004799936ba0f4b86cfa2f397f66dab1 Mon Sep 17 00:00:00 2001 From: Noam Honig Date: Tue, 13 Sep 2022 09:10:10 +0300 Subject: [PATCH 3/4] updated to compare to play with mobx --- db/tasks.json | 2 +- src/App.tsx | 6 +++--- src/Store.ts | 18 ++++++++++-------- src/shared/Task.ts | 11 ++--------- 4 files changed, 16 insertions(+), 21 deletions(-) diff --git a/db/tasks.json b/db/tasks.json index e615f4c..b674c29 100644 --- a/db/tasks.json +++ b/db/tasks.json @@ -26,7 +26,7 @@ }, { "id": "94c14437-ac2c-405b-931c-16659d271468", - "title": "jl;jkl;123456", + "title": "jl;jkl;", "completed": false } ] \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index ba06943..ab4f930 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,12 +21,12 @@ const App = observer(() => {
task.completed = e.target.checked)} /> + onChange={e => task.completed = e.target.checked} /> task.title = e.target.value)} /> + onChange={e => task.title = e.target.value} /> - +
); })} diff --git a/src/Store.ts b/src/Store.ts index 08e1915..ed8287e 100644 --- a/src/Store.ts +++ b/src/Store.ts @@ -1,15 +1,21 @@ -import { remult } from "remult"; +import { Remult, remult } from "remult"; import { Task } from "./shared/Task"; import { TasksController } from "./shared/TasksController"; -import { makeAutoObservable, runInAction } from 'mobx'; +import { action, createAtom, makeAutoObservable, runInAction } from 'mobx'; import { store } from "./App"; +// Make all remult entities observable mobx items +Remult.entityRefInit = (ref, row) => ref.subscribe(createAtom("entity")); + export class Store { taskRepo = remult.repo(Task); tasks: Task[] = []; hideCompleted = false; constructor() { makeAutoObservable(this); + this.taskRepo.addEventListener({ + deleted: action(task => this.tasks = this.tasks.filter(t => t != task)) + }); } replaceTasks(tasks: Task[]) { this.tasks = tasks; @@ -22,20 +28,16 @@ export class Store { })); } addTask() { - this.tasks.push(new Task()); + this.tasks.push(this.taskRepo.create()); } async saveTask(task: Task) { try { - const savedTask = await this.taskRepo.save(task); + const savedTask = await task.save(); 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(); diff --git a/src/shared/Task.ts b/src/shared/Task.ts index 5140ab0..313645b 100644 --- a/src/shared/Task.ts +++ b/src/shared/Task.ts @@ -1,5 +1,3 @@ - -import { makeAutoObservable } from "mobx"; import { Allow, Entity, EntityBase, Fields, Validators } from "remult"; import { Roles } from "./Roles"; @@ -9,18 +7,13 @@ import { Roles } from "./Roles"; allowApiInsert: Roles.admin, allowApiDelete: Roles.admin }) - export class Task extends EntityBase { - constructor(){ - super(); - makeAutoObservable(this); - } @Fields.uuid() id!: string; @Fields.string({ - validate: Validators.required, - allowApiUpdate: Roles.admin + validate: Validators.required, + allowApiUpdate: Roles.admin }) title = ''; From e8b129bcefec614cdf0d8f43fefdb40b48a30819 Mon Sep 17 00:00:00 2001 From: Noam Honig Date: Tue, 13 Sep 2022 12:16:06 +0300 Subject: [PATCH 4/4] updated the save --- src/App.tsx | 1 + src/Store.ts | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index ab4f930..162b096 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -27,6 +27,7 @@ const App = observer(() => { onChange={e => task.title = e.target.value} /> + {task.$.title.error} ); })} diff --git a/src/Store.ts b/src/Store.ts index ed8287e..7cf1586 100644 --- a/src/Store.ts +++ b/src/Store.ts @@ -32,8 +32,7 @@ export class Store { } async saveTask(task: Task) { try { - const savedTask = await task.save(); - runInAction(() => store.tasks[store.tasks.indexOf(task)] = savedTask); + await task.save(); } catch (error: any) { alert(error.message); }