fix object editing

dist/index.js

@@ -621,25 +621,35 @@
     };
     // objects
     createObjectFromTitle = (title) => {
-      return {
+      const firstObjectContent = this.createObjectContent();
+      const messageObject = {
         id: UUID(),
         title,
-        contentVersions: [this.createObjectContent()]
+        contentVersions: {}
+      };
+      this.addObjectContent(messageObject, firstObjectContent);
+      return messageObject;
+    };
+    createObjectContent = () => {
+      return {
+        id: UUID(),
+        isoDateVersionCreated: (/* @__PURE__ */ new Date()).toISOString()
       };
     };
-    addObject = (messageObject) => {
-      this.objects.set(messageObject.id, messageObject);
+    addObjectContent = (messageObject, content) => {
+      messageObject.contentVersions[content.id] = content;
     };
-    updateObject = (id, contents) => {
-      const messageObject = this.objects.value.get(id);
-      if (!messageObject) return;
-      if (contents) {
-        messageObject.contentVersions.push(contents);
-        messageObject.contentVersions.sort(
-          (a, b) => a.isoDateVersionCreated > b.isoDateVersionCreated ? 0 : 1
-        );
+    addObject = (messageObject) => {
+      const existingObject = this.objects.value.get(messageObject.id);
+      if (existingObject) {
+        existingObject.title = messageObject.title;
+        Object.values(messageObject.contentVersions).forEach((content) => {
+          this.addObjectContent(existingObject, content);
+        });
+        this.objects.set(existingObject.id, existingObject);
+      } else {
+        this.objects.set(messageObject.id, messageObject);
       }
-      this.sendObject(messageObject);
     };
     addObjectAndSend = (messageObject) => {
       this.addObject(messageObject);
@@ -661,18 +671,23 @@
     clearObjects = () => {
       this.objects.clear();
     };
-    getLatestObjectContent = (messageObject) => {
-      return this.getObjectContentFromIndex(messageObject, 0);
+    getSortedContents = (messageObject) => {
+      const contents = Object.values(messageObject.contentVersions);
+      contents.sort(
+        (a, b) => a.isoDateVersionCreated > b.isoDateVersionCreated ? 0 : 1
+      );
+      return contents;
     };
-    getObjectContentFromIndex = (messageObject, index) => {
-      const versions = messageObject.contentVersions;
-      return versions[index] ?? this.createObjectContent();
+    getMostRecentContentId = (messageObject) => {
+      const contents = Object.values(messageObject.contentVersions);
+      return contents[contents.length - 1].id;
     };
-    createObjectContent = () => {
-      return {
-        id: UUID(),
-        isoDateVersionCreated: (/* @__PURE__ */ new Date()).toISOString()
-      };
+    getMostRecentContent = (messageObject) => {
+      const id = this.getMostRecentContentId(messageObject);
+      return this.getObjectContentFromId(messageObject, id);
+    };
+    getObjectContentFromId = (messageObject, contentId) => {
+      return messageObject.contentVersions[contentId];
     };
     // channel
     setChannel = () => {
@@ -1209,13 +1224,12 @@
   // src/Views/Objects/objectDetailModal.tsx
   function ObjectDetailModal(chat, messageObject, isPresented) {
     const editingTitle = new State(messageObject.title);
-    const selectedMessageObjectIndex = new State(0);
+    const selectedMessageObjectId = new State(
+      chat.getMostRecentContentId(messageObject)
+    );
     const selectedMessageObject = createProxyState(
-      [selectedMessageObjectIndex],
-      () => chat.getObjectContentFromIndex(
-        messageObject,
-        selectedMessageObjectIndex.value
-      )
+      [selectedMessageObjectId],
+      () => chat.getObjectContentFromId(messageObject, selectedMessageObjectId.value)
     );
     const didEditContent = new State(false);
     const editingNoteContent = createProxyState(
@@ -1240,14 +1254,14 @@
     }
     function saveAndClose() {
       messageObject.title = editingTitle.value;
-      chat.updateObject(
-        messageObject.id,
-        didEditContent.value == true ? {
+      if (didEditContent.value == true) {
+        chat.addObjectContent(messageObject, {
           isoDateVersionCreated: (/* @__PURE__ */ new Date()).toISOString(),
           id: UUID(),
           noteContent: editingNoteContent.value
-        } : void 0
-      );
+        });
+      }
+      chat.addObjectAndSend(messageObject);
       closeModal();
     }
     function deleteAndClose() {
@@ -1260,7 +1274,9 @@
         "bind:value": editingTitle,
         placeholder: translation.objectTitlePlaceholder
       }
-    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectVersion), /* @__PURE__ */ createElement("select", { "bind:value": selectedMessageObjectIndex }, ...messageObject.contentVersions.map((content, index) => /* @__PURE__ */ createElement("option", { value: index }, new Date(content.isoDateVersionCreated).toLocaleString()))), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "sticky_note_2"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.noteContent), /* @__PURE__ */ createElement(
+    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectVersion), /* @__PURE__ */ createElement("select", { "bind:value": selectedMessageObjectId }, ...chat.getSortedContents(messageObject).map((content) => /* @__PURE__ */ createElement("option", { value: content.id }, new Date(
+      content.isoDateVersionCreated
+    ).toLocaleString()))), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "sticky_note_2"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.noteContent), /* @__PURE__ */ createElement(
       "textarea",
       {
         rows: "5",
@@ -1279,17 +1295,22 @@
   function ChatToolView(chat) {
     const isShowingObjectModal = new State(false);
     const selectedObject = new State(void 0);
-    const objectModal = createProxyState([selectedObject], () => {
-      if (selectedObject.value == void 0) return /* @__PURE__ */ createElement("div", null);
-      return ObjectDetailModal(chat, selectedObject.value, isShowingObjectModal);
-    });
+    const objectModal = createProxyState(
+      [chat.objects, selectedObject],
+      () => {
+        if (selectedObject.value == void 0) return /* @__PURE__ */ createElement("div", null);
+        return ObjectDetailModal(
+          chat,
+          selectedObject.value,
+          isShowingObjectModal
+        );
+      }
+    );
     function createItem() {
       const newObject = chat.createObjectFromTitle("New item");
       chat.addObjectAndSend(newObject);
     }
     const itemConverter = (messageObject) => {
-      const latestObject = chat.getLatestObjectContent(messageObject);
-      if (!latestObject) return /* @__PURE__ */ createElement("div", null);
       function select() {
         selectedObject.value = messageObject;
         isShowingObjectModal.value = true;

src/Model/chatModel.ts

@@ -29,7 +29,7 @@ export interface ChatMessage {
 export interface MessageObject {
   id: string;
   title: string;
-  contentVersions: MessageObjectContent[];
+  contentVersions: { [key: string]: MessageObjectContent };
 }
 
 export interface MessageObjectContent {
@@ -156,8 +156,8 @@ export class Chat {
     if (channels.indexOf(this.primaryChannel.value) == -1) return;
 
     if (data.subscribed != undefined) this.handleSubscription(data.subscribed);
-
     if (!data.messageBody) return;
+
     const message: ChatMessage = JSON.parse(data.messageBody);
     const { sender, body, channel, isoDate, messageObjectString } = message;
 
@@ -197,7 +197,6 @@ export class Chat {
   };
 
   // sending
-
   sendMessagesInOutbox = () => {
     this.outbox.value.forEach(async (message) => {
       const isSent = await this.sendMessage(message);
@@ -298,27 +297,41 @@ export class Chat {
 
   // objects
   createObjectFromTitle = (title: string): MessageObject => {
-    return {
+    const firstObjectContent = this.createObjectContent();
+    const messageObject: MessageObject = {
       id: React.UUID(),
       title,
-      contentVersions: [this.createObjectContent()],
+      contentVersions: {},
+    };
+    this.addObjectContent(messageObject, firstObjectContent);
+    return messageObject;
+  };
+
+  createObjectContent = () => {
+    return {
+      id: React.UUID(),
+      isoDateVersionCreated: new Date().toISOString(),
     };
   };
 
-  addObject = (messageObject: MessageObject): void => {
-    this.objects.set(messageObject.id, messageObject);
+  addObjectContent = (
+    messageObject: MessageObject,
+    content: MessageObjectContent
+  ): void => {
+    messageObject.contentVersions[content.id] = content;
   };
 
-  updateObject = (id: string, contents?: MessageObjectContent): void => {
-    const messageObject = this.objects.value.get(id);
-    if (!messageObject) return;
-    if (contents) {
-      messageObject.contentVersions.push(contents);
-      messageObject.contentVersions.sort((a, b) =>
-        a.isoDateVersionCreated > b.isoDateVersionCreated ? 0 : 1
-      );
+  addObject = (messageObject: MessageObject): void => {
+    const existingObject = this.objects.value.get(messageObject.id);
+    if (existingObject) {
+      existingObject.title = messageObject.title;
+      Object.values(messageObject.contentVersions).forEach((content) => {
+        this.addObjectContent(existingObject, content);
+      });
+      this.objects.set(existingObject.id, existingObject);  
+    } else {
+      this.objects.set(messageObject.id, messageObject);
     }
-    this.sendObject(messageObject);
   };
 
   addObjectAndSend = (messageObject: MessageObject): void => {
@@ -346,25 +359,31 @@ export class Chat {
     this.objects.clear();
   };
 
-  getLatestObjectContent = (
+  getSortedContents = (
     messageObject: MessageObject
-  ): MessageObjectContent => {
-    return this.getObjectContentFromIndex(messageObject, 0);
+  ): MessageObjectContent[] => {
+    const contents = Object.values(messageObject.contentVersions);
+    contents.sort((a, b) =>
+      a.isoDateVersionCreated > b.isoDateVersionCreated ? 0 : 1
+    );
+    return contents;
   };
 
-  getObjectContentFromIndex = (
+  getMostRecentContentId = (messageObject: MessageObject): string => {
+    const contents = Object.values(messageObject.contentVersions);
+    return contents[contents.length - 1].id;
+  };
+
+  getMostRecentContent = (messageObject: MessageObject): MessageObjectContent => {
+    const id = this.getMostRecentContentId(messageObject);
+    return this.getObjectContentFromId(messageObject, id);
+  }
+
+  getObjectContentFromId = (
     messageObject: MessageObject,
-    index: number
+    contentId: string
   ): MessageObjectContent => {
-    const versions = messageObject.contentVersions;
-    return versions[index] ?? this.createObjectContent();
-  };
-
-  createObjectContent = () => {
-    return {
-      id: React.UUID(),
-      isoDateVersionCreated: new Date().toISOString(),
-    };
+    return messageObject.contentVersions[contentId];
   };
 
   // channel

src/Views/Objects/objectDetailModal.tsx

@@ -12,14 +12,13 @@ export function ObjectDetailModal(
   // state
   const editingTitle = new React.State(messageObject.title);
 
-  const selectedMessageObjectIndex = new React.State(0);
+  const selectedMessageObjectId = new React.State(
+    chat.getMostRecentContentId(messageObject)
+  );
   const selectedMessageObject = React.createProxyState(
-    [selectedMessageObjectIndex],
+    [selectedMessageObjectId],
     () =>
-      chat.getObjectContentFromIndex(
-        messageObject,
-        selectedMessageObjectIndex.value
-      )
+      chat.getObjectContentFromId(messageObject, selectedMessageObjectId.value)
   );
 
   const didEditContent = new React.State(false);
@@ -51,18 +50,16 @@ export function ObjectDetailModal(
   function saveAndClose() {
     messageObject.title = editingTitle.value;
 
-    chat.updateObject(
-      messageObject.id,
-      didEditContent.value == true
-        ? {
-            isoDateVersionCreated: new Date().toISOString(),
-            id: React.UUID(),
+    if (didEditContent.value == true) {
+      chat.addObjectContent(messageObject, {
+        isoDateVersionCreated: new Date().toISOString(),
+        id: React.UUID(),
 
-            noteContent: editingNoteContent.value,
-          }
-        : undefined
-    );
+        noteContent: editingNoteContent.value,
+      });
+    }
 
+    chat.addObjectAndSend(messageObject);
     closeModal();
   }
 
@@ -98,12 +95,16 @@ export function ObjectDetailModal(
               <span class="icon">history</span>
               <div>
                 <span>{translation.objectVersion}</span>
-                <select bind:value={selectedMessageObjectIndex}>
-                  {...messageObject.contentVersions.map((content, index) => (
-                    <option value={index}>
-                      {new Date(content.isoDateVersionCreated).toLocaleString()}
-                    </option>
-                  ))}
+                <select bind:value={selectedMessageObjectId}>
+                  {...chat
+                    .getSortedContents(messageObject)
+                    .map((content) => (
+                      <option value={content.id}>
+                        {new Date(
+                          content.isoDateVersionCreated
+                        ).toLocaleString()}
+                      </option>
+                    ))}
                 </select>
                 <span class="icon">arrow_drop_down</span>
               </div>

src/Views/Objects/objectListView.tsx

@@ -9,11 +9,18 @@ import { translation } from "../../translations";
 export function ChatToolView(chat: Chat) {
   const isShowingObjectModal = new React.State(false);
   const selectedObject = new React.State<MessageObject | undefined>(undefined);
-  const objectModal = React.createProxyState([selectedObject], () => {
-    if (selectedObject.value == undefined) return <div></div>;
+  const objectModal = React.createProxyState(
+    [chat.objects, selectedObject],
+    () => {
+      if (selectedObject.value == undefined) return <div></div>;
 
-    return ObjectDetailModal(chat, selectedObject.value, isShowingObjectModal);
-  });
+      return ObjectDetailModal(
+        chat,
+        selectedObject.value,
+        isShowingObjectModal
+      );
+    }
+  );
 
   function createItem() {
     const newObject = chat.createObjectFromTitle("New item");
@@ -23,10 +30,6 @@ export function ChatToolView(chat: Chat) {
   const itemConverter: React.StateItemConverter<MessageObject> = (
     messageObject
   ) => {
-    const latestObject = chat.getLatestObjectContent(messageObject);
-
-    if (!latestObject) return <div></div>; //TODO
-
     function select() {
       selectedObject.value = messageObject;
       isShowingObjectModal.value = true;