implement object version history

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 (