implement object version history

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.sendObject(object);
+    this.objects.value.forEach((messageObject) => {
+      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;
-    
-    chat.addObjectAndSend(object);
+    messageObject.title = editingTitle.value;
+    chat.updateObject(messageObject.id, {});
     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 { ItemDetailModal } from "./itemDetailModal";
+import { ObjectDetailModal } from "./objectDetailModal";
+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({
-      id: React.UUID(),
-      title: "new item",
-    });
+    const newObject = chat.createObjectFromTitle("New item");
+    chat.addObjectAndSend(newObject);
   }
 
-  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 (