implement contacts with messaging

src/View/Components/chatMessage.tsx

@@ -37,9 +37,10 @@ export function ChatMessage(
             {InlineReply(chatMessageViewModel)}
             <div class="main tile">
                 <div class="text-container">
-                    <span class="sender-name ellipsis">
+		    <span 
-                        {chatMessageViewModel.senderName}
+			class="sender-name ellipsis"
-                    </span>
+			subscribe:innerText={chatMessageViewModel.contact.name}
+		    ></span>
                     <span
                         class="body"
                         subscribe:innerText={chatMessageViewModel.body}

src/ViewModel/Chat/chatListViewModel.ts

@@ -6,6 +6,7 @@ import ConnectionViewModel from "../Global/connectionViewModel";
 import * as React from "../../react";
 import { IndexManager } from "../../Model/Utility/utility";
 import ChatModel from "../../Model/Chat/chatModel";
+import ContactListViewModel from "../Global/contactViewModel";
 
 export default class ChatListViewModel {
     notificationViewModel: NotificationViewModel;
@@ -61,6 +62,7 @@ export default class ChatListViewModel {
             this.notificationViewModel,
             this.connectionViewModel,
             this,
+	    this.contactListViewModel,
         );
     };
 
@@ -97,6 +99,7 @@ export default class ChatListViewModel {
         public readonly coreViewModel: CoreViewModel,
         public readonly settingsViewModel: SettingsViewModel,
         public readonly connectionViewModel: ConnectionViewModel,
+	public readonly contactListViewModel: ContactListViewModel,
     ) {
         this.notificationViewModel = new NotificationViewModel(this);
 

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -7,13 +7,13 @@ import {
     ChatMessageStatuses,
     ReactionSymbols,
 } from "../../Model/Chat/chatModel";
+import {ContactViewModel} from "../Global/contactViewModel";
 
 export default class ChatMessageViewModel {
     // data
     chatMessage: ChatMessage;
     channel: string = "";
     senderId: string = "";
-    senderName: string = "";
     dateSent: string = "";
     body: React.State<string> = new React.State("");
     inlineReply: ChatMessageViewModel | undefined = undefined;
@@ -185,7 +185,6 @@ export default class ChatMessageViewModel {
     loadData = (): void => {
         this.channel = this.chatMessage.channel;
         this.senderId = this.chatMessage.senderId;
-        this.senderName = this.chatMessage.senderName;
         this.dateSent = new Date(this.chatMessage.dateSent).toLocaleString();
         this.body.value = this.chatMessage.body;
         this.status.value = this.chatMessage.status;
@@ -204,6 +203,7 @@ export default class ChatMessageViewModel {
         public readonly coreViewModel: CoreViewModel,
         public readonly messagePageViewModel: MessagePageViewModel,
         chatMessage: ChatMessage,
+	public contact: ContactViewModel,
         sentByUser: boolean,
     ) {
         this.chatMessage = chatMessage;

src/ViewModel/Chat/chatViewModel.ts

@@ -21,6 +21,7 @@ import ChatModel, {
     ChatMessage,
     ChatMessageReaction,
 } from "../../Model/Chat/chatModel";
+import ContactListViewModel from "../Global/contactViewModel";
 
 export default class ChatViewModel extends ContextHost<ChatPageTypes> {
     calendarViewModel: CalendarPageViewModel;
@@ -149,6 +150,7 @@ export default class ChatViewModel extends ContextHost<ChatPageTypes> {
         public readonly notificationViewModel: NotificationViewModel,
         public readonly connectionViewModel: ConnectionViewModel,
         public readonly chatListViewModel: ChatListViewModel,
+	public readonly contactListViewModel: ContactListViewModel,
     ) {
         super("chat", coreViewModel);
 
@@ -167,6 +169,7 @@ export default class ChatViewModel extends ContextHost<ChatPageTypes> {
         this.messagePageViewModel = new MessagePageViewModel(
             this.coreViewModel,
             this,
+	    this.contactListViewModel,
         );
         this.settingsPageViewModel = new SettingsPageViewModel(
             this.coreViewModel,

src/ViewModel/Global/contactViewModel.ts

@@ -3,22 +3,30 @@ import * as React from "../../react";
 
 export default class ContactListViewModel {
     // state
-    contacts: React.MapState<ContactViewModel> = new React.MapState();
+    contacts: Map<string, ContactViewModel> = new Map();
 
     // main
-    updateContact = (id: string, name: string): void => {
+    updateContact = (id: string, name: string): ContactViewModel => {
-	if (this.contacts.value.has(id)) {
+	const match = this.contacts.get(id);
-	    this.contacts.value.get(id)!.name.value = name;
+	if (match) {
-	    return;
+	    match.name.value = name;
+	    return match;
 	}
 	const vm = new ContactViewModel(id, name);
 	this.contacts.set(id, vm);
+	return vm;
     }
 
     handleContact = (contact: [string, string]): void => {
 	this.updateContact(...contact);
     }
 
+    unwrapContact = (id: string, knownName: string): ContactViewModel => {
+	if (this.contacts.has(id))
+	    return this.contacts.get(id)!
+	return this.updateContact(id, knownName);
+    }
+
     // load
     loadData = (): void => {
 	const contacts: [string, string][] = this.contactListModel.loadContacts();

src/ViewModel/Global/settingsViewModel.ts

@@ -1,7 +1,7 @@
 import CoreViewModel, { Context } from "./coreViewModel";
 import * as React from "../../react";
 import { CommonKeys } from "../../View/keystrokes";
-import { Languages, ThemeSettings } from "../../Model/Global/settingsModel";
+import SettingsModel, { Languages, ThemeSettings } from "../../Model/Global/settingsModel";
 
 export default class SettingsViewModel extends Context {
     // state
@@ -126,7 +126,7 @@ export default class SettingsViewModel extends Context {
     };
 
     // init
-    constructor(public readonly coreViewModel: CoreViewModel) {
+    constructor(public readonly coreViewModel: CoreViewModel, public readonly settingsModel: SettingsModel) {
         super("settings");
 
         this.username.value = coreViewModel.settingsModel.username;

src/ViewModel/Pages/messagePageViewModel.ts

@@ -9,6 +9,7 @@ import {
     ChatMessageReaction,
     ReactionSymbols,
 } from "../../Model/Chat/chatModel";
+import ContactListViewModel from "../Global/contactViewModel";
 
 export default class MessagePageViewModel extends Context {
     // state
@@ -106,12 +107,14 @@ export default class MessagePageViewModel extends Context {
 
     // view
     showChatMessage = (chatMessage: ChatMessage): void => {
+	const contact = this.contactListViewModel.unwrapContact(chatMessage.senderId, chatMessage.senderName);
 	const chatMessageViewModel = new ChatMessageViewModel(
 	    this.coreViewModel,
 	    this,
 	    chatMessage,
-            chatMessage.senderName ==
+	    contact,
-                this.chatViewModel.settingsViewModel.username.value,
+	    chatMessage.senderId ==
+	    this.chatViewModel.settingsViewModel.settingsModel.userid
 	);
 
 	const existingChatMessageViewModel: ChatMessageViewModel | undefined =
@@ -194,6 +197,7 @@ export default class MessagePageViewModel extends Context {
     constructor(
 	public readonly coreViewModel: CoreViewModel,
 	public readonly chatViewModel: ChatViewModel,
+	public readonly contactListViewModel: ContactListViewModel,
     ) {
 	super("message-page");
 	this.restoreFilter();

src/index.tsx

@@ -46,13 +46,14 @@ const coreViewModel = new CoreViewModel(
 );
 
 const storageViewModel = new StorageViewModel(coreViewModel);
-const settingsViewModel = new SettingsViewModel(coreViewModel);
+const settingsViewModel = new SettingsViewModel(coreViewModel, settingsModel);
 const contactListViewModel = new ContactListViewModel(contactListModel);
 const connectionViewModel = new ConnectionViewModel(coreViewModel);
 const chatListViewModel = new ChatListViewModel(
     coreViewModel,
     settingsViewModel,
     connectionViewModel,
+    contactListViewModel,
 );
 const fileTransferViewModel = new FileTransferViewModel(coreViewModel);