rename item->object, implement basic object editing

src/Model/chatModel.ts

@@ -22,19 +22,15 @@ export interface ChatMessage {
   body: string;
   isoDate: string;
 
-  itemData?: Item;
+  messageObject?: MessageObject;
 }
 
-// item
-export interface Item {
+// object
+export interface MessageObject {
   id: string;
   title: string;
 }
 
-export interface NoteItem extends Item {
-  body: string;
-}
-
 // chat
 export class Chat {
   id: string;
@@ -46,9 +42,9 @@ export class Chat {
 
   encryptionKey: React.State<string>;
   messages: React.ListState<ChatMessage>;
-  items: React.MapState<Item>;
+  objects: React.MapState<MessageObject>;
   outbox: React.ListState<ChatMessage>;
-  itemOutbox: React.ListState<ChatMessage>;
+  objectOutbox: React.ListState<ChatMessage>;
   isOutBoxEmpty: React.State<boolean>;
 
   composingMessage: React.State<string>;
@@ -82,9 +78,9 @@ export class Chat {
     );
     this.encryptionKey = React.restoreState(storageKeys.encyptionKey(id), "");
     this.messages = React.restoreListState(storageKeys.messages(id));
-    this.items = React.restoreMapState(storageKeys.items(id));
+    this.objects = React.restoreMapState(storageKeys.objects(id));
     this.outbox = React.restoreListState(storageKeys.outbox(id));
-    this.itemOutbox = React.restoreListState(storageKeys.itemOutbox(id));
+    this.objectOutbox = React.restoreListState(storageKeys.itemOutbox(id));
     this.isOutBoxEmpty = React.createProxyState(
       [this.outbox],
       () => this.outbox.value.size == 0
@@ -149,12 +145,12 @@ export class Chat {
     if (data.subscribed != undefined) this.handleSubscription(data.subscribed);
 
     if (!data.messageBody) return;
-    const { sender, body, channel, isoDate, itemData } = JSON.parse(
+    const { sender, body, channel, isoDate, messageObject } = JSON.parse(
       data.messageBody
     );
 
-    if (itemData && itemData.id && itemData.title) {
-      return this.handleItem(itemData);
+    if (messageObject && messageObject.id && messageObject.title) {
+      return this.handleMessageObject(messageObject);
     }
 
     this.handleMessage({
@@ -178,14 +174,14 @@ export class Chat {
     if (selectedChat.value != this) this.hasUnreadMessages.value = true;
   };
 
-  handleItem = (itemData: Item): void => {
-    this.items.set(itemData.id, itemData);
+  handleMessageObject = (messageObject: MessageObject): void => {
+    this.objects.set(messageObject.id, messageObject);
   };
 
   // messages
-  createMessage = async (
+  createChatMessage = async (
     messageText: string,
-    itemData?: Item
+    messageObject?: MessageObject
   ): Promise<ChatMessage> => {
     // get channels
     const secondaryChannelNames: string[] = [
@@ -198,15 +194,15 @@ export class Chat {
 
     // create object
     const joinedChannelName = allChannelNames.join("/");
-    const messageObject: ChatMessage = {
+    const chatMessage: ChatMessage = {
       channel: joinedChannelName,
       sender: senderName.value,
       body: messageText,
       isoDate: new Date().toISOString(),
     };
 
-    if (itemData) messageObject.itemData = itemData;
-    return messageObject;
+    if (messageObject) chatMessage.messageObject = messageObject;
+    return chatMessage;
   };
 
   sendMessageFromComposer = async (): Promise<void> => {
@@ -217,13 +213,13 @@ export class Chat {
   };
 
   sendMessageFromText = async (text: string): Promise<void> => {
-    const message = await this.createMessage(text);
-    this.sendMessage(message);
+    const chatMessage = await this.createChatMessage(text);
+    this.sendMessage(chatMessage);
   };
 
-  resendMessage = (message: ChatMessage) => {
+  resendMessage = (chatMessage: ChatMessage) => {
     if (this.cannotResendMessage.value == true) return;
-    this.sendMessageFromText(message.body);
+    this.sendMessageFromText(chatMessage.body);
   };
 
   sendMessage = async (chatMessage: ChatMessage): Promise<void> => {
@@ -238,7 +234,7 @@ export class Chat {
       const messageString = JSON.stringify(chatMessage);
       UDN.sendMessage(chatMessage.channel, messageString);
     } else {
-      if (chatMessage.itemData) return this.itemOutbox.add(chatMessage);
+      if (chatMessage.messageObject) return this.objectOutbox.add(chatMessage);
       this.outbox.add(chatMessage);
     }
   };
@@ -248,9 +244,9 @@ export class Chat {
       this.sendMessage(message);
       this.outbox.remove(message);
     });
-    this.itemOutbox.value.forEach((message) => {
+    this.objectOutbox.value.forEach((message) => {
       this.sendMessage(message);
-      this.itemOutbox.remove(message);
+      this.objectOutbox.remove(message);
     });
   };
 
@@ -258,25 +254,25 @@ export class Chat {
     this.messages.clear();
   };
 
-  deleteMessage = (message: ChatMessage): void => {
-    this.messages.remove(message);
+  deleteMessage = (chatMessage: ChatMessage): void => {
+    this.messages.remove(chatMessage);
   };
 
-  deleteOutboxMessage = (message: ChatMessage): void => {
-    this.outbox.remove(message);
+  deleteOutboxMessage = (chatMessage: ChatMessage): void => {
+    this.outbox.remove(chatMessage);
   };
 
-  decryptReceivedMessage = async (message: ChatMessage): Promise<void> => {
-    message.body = await decryptString(message.body, this.encryptionKey.value);
+  decryptReceivedMessage = async (chatMessage: ChatMessage): Promise<void> => {
+    chatMessage.body = await decryptString(chatMessage.body, this.encryptionKey.value);
     this.messages.callSubscriptions();
   };
 
-  // items
-  async createItem(item: Item): Promise<void> {
-    this.items.set(item.id, item);
+  // objects
+  async createObject(object: MessageObject): Promise<void> {
+    this.objects.set(object.id, object);
 
-    const message = await this.createMessage("", item);
-    this.sendMessage(message);
+    const chatMessage = await this.createChatMessage("", object);
+    this.sendMessage(chatMessage);
   }
 
   // channel

src/Views/Chat/chatToolView.tsx

@@ -1,26 +1,43 @@
 import * as React from "bloatless-react";
 
-import { Chat, Item } from "../../Model/chatModel";
+import { Chat, MessageObject } from "../../Model/chatModel";
 
+import { ChatOptionModal } from "./chatOptionModal";
+import { ItemDetailModal } from "./itemDetailModal";
 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>;
+
+    return ItemDetailModal(chat, selectedObject.value, isShowingObjectModal);
+  });
+
   function createItem() {
-    chat.createItem({
+    chat.createObject({
       id: React.UUID(),
       title: "new item",
     });
   }
 
-  const itemConverter: React.StateItemConverter<Item> = (item) => {
-    return <span>{item.title}</span>;
+  const itemConverter: React.StateItemConverter<MessageObject> = (object) => {
+    function select() {
+      selectedObject.value = object;
+      isShowingObjectModal.value = true;
+    }
+
+    return <button on:click={select}>{object.title}</button>;
   };
 
   return (
     <div class="chat-tool-view">
       <button on:click={createItem}>+</button>
       <hr></hr>
-      <div children:append={[chat.items, itemConverter]}></div>
+      <div children:append={[chat.objects, itemConverter]}></div>
+
+      <div children:set={objectModal}></div>
     </div>
   );
 }

src/Views/Chat/itemDetailModal.tsx

@@ -0,0 +1,68 @@
+import * as React from "bloatless-react";
+
+import { Chat, MessageObject } from "../../Model/chatModel";
+
+import { translation } from "../../translations";
+
+export function ItemDetailModal(
+  chat: Chat,
+  object: MessageObject,
+  isPresented: React.State<boolean>
+) {
+  function closeModal() {
+    isPresented.value = false;
+  }
+
+  function saveAndClose() {
+    object.title = editingTitle.value;
+    chat.objects.set(object.id, object);
+    closeModal();
+  }
+
+  function deleteAndClose() {
+    chat.objects.remove(object.id);
+    closeModal();
+  }
+
+  const editingTitle = new React.State(object.title);
+
+  return (
+    <div class="modal" toggle:open={isPresented}>
+      <div>
+        <main>
+          <h2>{object.title}</h2>
+
+          <div>
+            <label class="tile">
+              <span class="icon">label</span>
+              <div>
+                <span>{translation.objectTitle}</span>
+                <input
+                  bind:value={editingTitle}
+                  placeholder={translation.objectTitlePlaceholder}
+                ></input>
+              </div>
+            </label>
+          </div>
+
+          <hr></hr>
+
+          <button class="danger" on:click={deleteAndClose}>
+            {translation.deleteObject}
+            <span class="icon">delete</span>
+          </button>
+        </main>
+
+        <div class="flex-row">
+          <button class="flex-1 width-100 danger" on:click={closeModal}>
+            {translation.discard}
+          </button>
+          <button class="flex-1 width-100 primary" on:click={saveAndClose}>
+            {translation.save}
+            <span class="icon">save</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/translations.ts

@@ -1,9 +1,11 @@
 const englishTranslations = {
   // general
   set: "Set",
+  save: "Save",
   back: "Back",
   undoChanges: "Undo changes",
   close: "Close",
+  discard: "Discard",
 
   // overview
   overview: "Overview",
@@ -36,7 +38,6 @@ const englishTranslations = {
 
   // messages
   showChatOptions: "show chat options",
-  toggleChatTools: "toggle chat tools",
   configureChatTitle: "Configure Chat",
 
   secondaryChannel: "Secondary channel",
@@ -62,6 +63,14 @@ const englishTranslations = {
   decryptMessage: "Decrypt message",
   copyMessage: "Copy message",
   deleteMessage: "Delete message",
+
+  // objects
+  toggleChatTools: "toggle chat tools",
+
+  objectTitle: "Object title",
+  objectTitlePlaceholder: "My object",
+
+  deleteObject: "Delete object",
 };
 
 const allTranslations: { [key: string]: typeof englishTranslations } = {

src/utility.ts

@@ -19,7 +19,7 @@ export const storageKeys = {
     return id + "messages";
   },
 
-  items(id: string): string {
+  objects(id: string): string {
     return id + "items";
   },