implement object version history

dist/index.js

@@ -516,7 +516,6 @@
           messageObject,
           this.encryptionKey.value
         );
-        console.log(decrypted);
         const object = JSON.parse(decrypted);
         if (object.id && object.title) return this.handleMessageObject(object);
       }
@@ -538,7 +537,7 @@
       if (selectedChat.value != this) this.hasUnreadMessages.value = true;
     };
     handleMessageObject = (messageObject) => {
-      this.objects.set(messageObject.id, messageObject);
+      this.addObject(messageObject);
     };
     // sending
     sendMessagesInOutbox = () => {
@@ -615,8 +614,25 @@
       return true;
     };
     // objects
+    createObjectFromTitle = (title) => {
+      return {
+        id: UUID(),
+        title,
+        dateLastEdited: /* @__PURE__ */ new Date(),
+        contentVersions: []
+      };
+    };
+    addObject = (messageObject) => {
+      this.objects.set(messageObject.id, messageObject);
+    };
+    updateObject = (id, contents) => {
+      const object = this.objects.value.get(id);
+      if (!object) return;
+      object.contentVersions.push(contents);
+      this.sendObject(object);
+    };
     addObjectAndSend = (object) => {
-      this.objects.set(object.id, object);
+      this.addObject(object);
       this.sendObject(object);
     };
     sendObject = (object) => {
@@ -628,13 +644,18 @@
       this.objectOutbox.remove(object.id);
     };
     resendObjects = () => {
-      this.objects.value.forEach((object) => {
+      this.objects.value.forEach((messageObject) => {
-        this.sendObject(object);
+        this.sendObject(messageObject);
       });
     };
     clearObjects = () => {
       this.objects.clear();
     };
+    getLatestObjectContent = (messageObject) => {
+      const versions = messageObject.contentVersions;
+      if (versions.length == 0) return {};
+      return versions[versions.length - 1];
+    };
     // channel
     setChannel = () => {
       if (this.cannotSetChannel.value == true) return;
@@ -1164,22 +1185,22 @@
     ), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": deleteChat }, translation.removeChat, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete_forever")))), /* @__PURE__ */ createElement("button", { "on:click": closeModal }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
 
-  // src/Views/Chat/itemDetailModal.tsx
+  // src/Views/Objects/objectDetailModal.tsx
-  function ItemDetailModal(chat, object, isPresented) {
+  function ObjectDetailModal(chat, messageObject, isPresented) {
     function closeModal() {
       isPresented.value = false;
     }
     function saveAndClose() {
-      object.title = editingTitle.value;
+      messageObject.title = editingTitle.value;
-      chat.addObjectAndSend(object);
+      chat.updateObject(messageObject.id, {});
       closeModal();
     }
     function deleteAndClose() {
-      chat.deleteObject(object);
+      chat.deleteObject(messageObject);
       closeModal();
     }
-    const editingTitle = new State(object.title);
+    const editingTitle = new State(messageObject.title);
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, object.title), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectTitle), /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, messageObject.title), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectTitle), /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": editingTitle,
@@ -1188,26 +1209,31 @@
     )))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": deleteAndClose }, translation.deleteObject, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete"))), /* @__PURE__ */ createElement("div", { class: "flex-row" }, /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 danger", "on:click": closeModal }, translation.discard), /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 primary", "on:click": saveAndClose }, translation.save, /* @__PURE__ */ createElement("span", { class: "icon" }, "save")))));
   }
 
-  // src/Views/Chat/chatToolView.tsx
+  // src/Views/Objects/objectListEntry.tsx
+  function ObjectListEntry(messageObject, onclick) {
+    return /* @__PURE__ */ createElement("button", { class: "tile", "on:click": onclick }, /* @__PURE__ */ createElement("b", null, messageObject.title));
+  }
+
+  // src/Views/Objects/objectListView.tsx
   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 ItemDetailModal(chat, selectedObject.value, isShowingObjectModal);
+      return ObjectDetailModal(chat, selectedObject.value, isShowingObjectModal);
     });
     function createItem() {
-      chat.addObjectAndSend({
+      const newObject = chat.createObjectFromTitle("New item");
-        id: UUID(),
+      chat.addObjectAndSend(newObject);
-        title: "new item"
-      });
     }
-    const itemConverter = (object) => {
+    const itemConverter = (messageObject) => {
+      const latestObject = chat.getLatestObjectContent(messageObject);
+      if (!latestObject) return /* @__PURE__ */ createElement("div", null);
       function select() {
-        selectedObject.value = object;
+        selectedObject.value = messageObject;
         isShowingObjectModal.value = true;
       }
-      return /* @__PURE__ */ createElement("button", { "on:click": select }, object.title);
+      return ObjectListEntry(messageObject, select);
     };
     return /* @__PURE__ */ createElement("div", { class: "chat-tool-view" }, /* @__PURE__ */ createElement("button", { "on:click": createItem }, "+"), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { "children:prepend": [chat.objects, itemConverter] }), /* @__PURE__ */ createElement("div", { "children:set": objectModal }));
   }

src/Model/chatModel.ts

@@ -29,8 +29,12 @@ export interface ChatMessage {
 export interface MessageObject {
   id: string;
   title: string;
+  dateLastEdited: Date;
+  contentVersions: MessageObjectContent[];
 }
 
+export interface MessageObjectContent {}
+
 // chat
 export class Chat {
   id: string;
@@ -185,7 +189,7 @@ export class Chat {
   };
 
   handleMessageObject = (messageObject: MessageObject): void => {
-    this.objects.set(messageObject.id, messageObject);
+    this.addObject(messageObject);
   };
 
   // sending
@@ -289,8 +293,28 @@ export class Chat {
   };
 
   // objects
+  createObjectFromTitle = (title: string): MessageObject => {
+    return {
+      id: React.UUID(),
+      title,
+      dateLastEdited: new Date(),
+      contentVersions: [],
+    };
+  };
+
+  addObject = (messageObject: MessageObject): void => {
+    this.objects.set(messageObject.id, messageObject);
+  };
+
+  updateObject = (id: string, contents: MessageObjectContent): void => {
+    const object = this.objects.value.get(id);
+    if (!object) return;
+    object.contentVersions.push(contents);
+    this.sendObject(object);
+  };
+
   addObjectAndSend = (object: MessageObject): void => {
-    this.objects.set(object.id, object);
+    this.addObject(object);
     this.sendObject(object);
   };
 
@@ -305,8 +329,8 @@ export class Chat {
   };
 
   resendObjects = (): void => {
-    this.objects.value.forEach((object) => {
+    this.objects.value.forEach((messageObject) => {
-      this.sendObject(object);
+      this.sendObject(messageObject);
     });
   };
 
@@ -314,6 +338,14 @@ export class Chat {
     this.objects.clear();
   };
 
+  getLatestObjectContent = (
+    messageObject: MessageObject
+  ): MessageObjectContent => {
+    const versions = messageObject.contentVersions;
+    if (versions.length == 0) return {};
+    return versions[versions.length - 1];
+  };
+
   // channel
   setChannel = (): void => {
     if (this.cannotSetChannel.value == true) return;

src/Tabs/messageTab.tsx

@@ -3,7 +3,7 @@ import * as React from "bloatless-react";
 import { closeChatView, isShowingChatTools, selectedChat, toggleChatTools } from "../Model/model";
 
 import { ChatOptionModal } from "../Views/Chat/chatOptionModal";
-import { ChatToolView } from "../Views/Chat/chatToolView";
+import { ChatToolView } from "../Views/Objects/objectListView";
 import { MessageComposer } from "../Views/Chat/messageComposer";
 import { ThreadView } from "../Views/Chat/threadView";
 import { translation } from "../translations";

src/Views/Objects/objectDetailModal.tsx

@@ -4,9 +4,9 @@ import { Chat, MessageObject } from "../../Model/chatModel";
 
 import { translation } from "../../translations";
 
-export function ItemDetailModal(
+export function ObjectDetailModal(
   chat: Chat,
-  object: MessageObject,
+  messageObject: MessageObject,
   isPresented: React.State<boolean>
 ) {
   function closeModal() {
@@ -14,24 +14,23 @@ export function ItemDetailModal(
   }
 
   function saveAndClose() {
-    object.title = editingTitle.value;
+    messageObject.title = editingTitle.value;
-    
+    chat.updateObject(messageObject.id, {});
-    chat.addObjectAndSend(object);
     closeModal();
   }
 
   function deleteAndClose() {
-    chat.deleteObject(object);
+    chat.deleteObject(messageObject);
     closeModal();
   }
 
-  const editingTitle = new React.State(object.title);
+  const editingTitle = new React.State(messageObject.title);
 
   return (
     <div class="modal" toggle:open={isPresented}>
       <div>
         <main>
-          <h2>{object.title}</h2>
+          <h2>{messageObject.title}</h2>
 
           <div>
             <label class="tile">

src/Views/Objects/objectListEntry.tsx

@@ -0,0 +1,14 @@
+import * as React from "bloatless-react";
+
+import { MessageObject } from "../../Model/chatModel";
+
+export function ObjectListEntry(
+  messageObject: MessageObject,
+  onclick: () => void
+) {
+  return (
+    <button class="tile" on:click={onclick}>
+      <b>{messageObject.title}</b>
+    </button>
+  );
+}

src/Views/Objects/objectListView.tsx

@@ -2,8 +2,8 @@ import * as React from "bloatless-react";
 
 import { Chat, MessageObject } from "../../Model/chatModel";
 
-import { ChatOptionModal } from "./chatOptionModal";
+import { ObjectDetailModal } from "./objectDetailModal";
-import { ItemDetailModal } from "./itemDetailModal";
+import { ObjectListEntry } from "./objectListEntry";
 import { translation } from "../../translations";
 
 export function ChatToolView(chat: Chat) {
@@ -12,23 +12,27 @@ export function ChatToolView(chat: Chat) {
   const objectModal = React.createProxyState([selectedObject], () => {
     if (selectedObject.value == undefined) return <div></div>;
 
-    return ItemDetailModal(chat, selectedObject.value, isShowingObjectModal);
+    return ObjectDetailModal(chat, selectedObject.value, isShowingObjectModal);
   });
 
   function createItem() {
-    chat.addObjectAndSend({
+    const newObject = chat.createObjectFromTitle("New item");
-      id: React.UUID(),
+    chat.addObjectAndSend(newObject);
-      title: "new item",
-    });
   }
 
-  const itemConverter: React.StateItemConverter<MessageObject> = (object) => {
+  const itemConverter: React.StateItemConverter<MessageObject> = (
+    messageObject
+  ) => {
+    const latestObject = chat.getLatestObjectContent(messageObject);
+
+    if (!latestObject) return <div></div>; //TODO
+
     function select() {
-      selectedObject.value = object;
+      selectedObject.value = messageObject;
       isShowingObjectModal.value = true;
     }
 
-    return <button on:click={select}>{object.title}</button>;
+    return ObjectListEntry(messageObject, select);
   };
 
   return (