improve centralization of models

src/Model/Utility/utility.ts

@@ -5,7 +5,7 @@ export function createTimestamp(): string {
 
 // string
 export function stringify(data: any): string {
-  return JSON.stringify(data);
+  return JSON.stringify(data, null, 4);
 }
 
 export function parse(string: string): any {

src/Model/chatListModel.ts

@@ -1,11 +1,15 @@
 import StorageModel, { storageKeys } from "./storageModel";
 
 import { ChatModel } from "./chatModel";
+import ConnectionModel from "./connectionModel";
+import SettingsModel from "./settingsModel";
 import { localeCompare } from "./Utility/utility";
 import { v4 } from "uuid";
 
 export default class ChatListModel {
   storageModel: StorageModel;
+  settingsModel: SettingsModel;
+  connectionModel: ConnectionModel;
 
   // data
   chatModels = new Set<ChatModel>();
@@ -20,7 +24,13 @@ export default class ChatListModel {
   createChat = (primaryChannel: string): ChatModel => {
     const id: string = v4();
 
-    const chatModel = new ChatModel(this.storageModel, this, id);
+    const chatModel = new ChatModel(
+      this.storageModel,
+      this.connectionModel,
+      this.settingsModel,
+      this,
+      id
+    );
     chatModel.setPrimaryChannel(primaryChannel);
 
     this.addChatModel(chatModel);
@@ -44,19 +54,31 @@ export default class ChatListModel {
     this.sortedPrimaryChannels = allChannels.sort(localeCompare);
   };
 
+  getIndexOfPrimaryChannel(primaryChannel: string): number {
+    return this.sortedPrimaryChannels.indexOf(primaryChannel);
+  }
+  
   // restore
   loadChats = (): void => {
     const chatDir = storageKeys.chats;
     const chatIds = this.storageModel.list(chatDir);
     for (const chatId of chatIds) {
-      const chatModel = new ChatModel(this.storageModel, this, chatId);
+      const chatModel = new ChatModel(
+        this.storageModel,
+        this.connectionModel,
+        this.settingsModel,
+        this,
+        chatId
+      );
       this.addChatModel(chatModel);
     }
   };
 
   // init
-  constructor(storageModel: StorageModel) {
+  constructor(storageModel: StorageModel, settingsModel: SettingsModel, connectionModel: ConnectionModel) {
     this.storageModel = storageModel;
+    this.settingsModel = settingsModel;
+    this.connectionModel = connectionModel;
     this.loadChats();
   }
 }

src/Model/chatModel.ts

@@ -4,21 +4,33 @@ import StorageModel, { storageKeys } from "./storageModel";
 
 import ChatListModel from "./chatListModel";
 import { Color } from "../ViewModel/colors";
+import ConnectionModel from "./connectionModel";
+import SettingsModel from "./settingsModel";
 import { checkIsValidObject } from "./Utility/typeSafety";
 import { createTimestamp } from "./Utility/utility";
 import { v4 } from "uuid";
 
 export class ChatModel {
+  connectionModel: ConnectionModel;
+  storageModel: StorageModel;
+  settingsModel: SettingsModel;
+  chatListModel: ChatListModel;
+
   // data
   id: string;
-  storageModel: StorageModel;
-  chatListModel: ChatListModel;
   info: ChatInfo;
   color: Color;
 
   messages = new Set<ChatMessage>();
   objects = new Map<string, ChatObject>();
 
+  // sorting
+  get index(): number {
+    return this.chatListModel.getIndexOfPrimaryChannel(
+      this.info.primaryChannel
+    );
+  }
+
   // paths
   get infoPath(): string[] {
     return storageKeys.chatInfo(this.id);
@@ -148,6 +160,11 @@ export class ChatModel {
     }
   };
 
+  // messaging
+  sendMessage = (body: string): void => {
+    //TODO
+  };
+
   // memory
   loadData = (): void => {
     this.restoreMessages();
@@ -162,10 +179,14 @@ export class ChatModel {
   // init
   constructor(
     storageModel: StorageModel,
+    connectionModel: ConnectionModel,
+    settingsModel: SettingsModel,
     chatListModel: ChatListModel,
     chatId: string
   ) {
     this.id = chatId;
+    this.connectionModel = connectionModel;
+    this.settingsModel = settingsModel;
     this.storageModel = storageModel;
     this.chatListModel = chatListModel;
 

src/Model/connectionModel.ts

@@ -29,6 +29,8 @@ export default class ConnectionModel {
     this.udn.disconnect();
   };
 
+  handleMessage = (data: Message): void => {}
+
   handleConnectionChange = (): void => {
     console.log("connection status:", this.isConnected, this.address);
     if (this.isConnected == false) return;
@@ -114,30 +116,20 @@ export default class ConnectionModel {
   }
 
   // setup
-  constructor(configuration: ConnectionModelConfiguration) {
+  constructor(storageModel: StorageModel) {
     // create frontend
     this.udn = new UDNFrontend();
-    this.storageModel = configuration.storageModel;
+    this.storageModel = storageModel;
 
     // setup handlers
     this.udn.onmessage = (data: Message) => {
-      configuration.messageHandler(data);
+      this.handleMessage(data);
     };
     this.udn.onconnect = () => {
       this.handleConnectionChange();
-      configuration.connectionChangeHandler();
     };
     this.udn.ondisconnect = () => {
       this.handleConnectionChange();
-      configuration.connectionChangeHandler();
     };
   }
-}
-
-// types
-export interface ConnectionModelConfiguration {
-  storageModel: StorageModel;
-
-  connectionChangeHandler: () => void;
-  messageHandler: (data: Message) => void;
-}
+}

src/Model/storageModel.ts

@@ -103,7 +103,7 @@ export default class StorageModel {
   };
 
   print = () => {
-    console.log(JSON.stringify(this.storageEntryTree, null, 4));
+    console.log(stringify(this.storageEntryTree));
   };
 
   static pathComponentsToKey = (...pathComponents: string[]): string => {
@@ -146,7 +146,12 @@ export const storageKeys = {
   // chat etc
   chats: [DATA_VERSION, "chat"],
   chatInfo: (id: string) => [DATA_VERSION, "chat", id, "info"],
-  chatLastUsedPage: (id: string) => [DATA_VERSION, "chat", id, "last-used-page"],
+  chatLastUsedPage: (id: string) => [
+    DATA_VERSION,
+    "chat",
+    id,
+    "last-used-page",
+  ],
   chatColor: (id: string) => [DATA_VERSION, "chat", id, "color"],
   chatMessages: (id: string) => [DATA_VERSION, "chat", id, "messages"],
   chatObjects: (id: string) => [DATA_VERSION, "chat", id, "objects"],

src/ViewModel/chatListViewModel.tsx

@@ -6,8 +6,8 @@ import ChatViewModel from "./chatViewModel";
 import StorageModel from "../Model/storageModel";
 
 export default class ChatListViewModel {
-  storageModel: StorageModel;
   chatListModel: ChatListModel;
+  storageModel: StorageModel;
 
   // state
   newChatPrimaryChannel: React.State<string> = new React.State("");
@@ -23,21 +23,6 @@ export default class ChatListViewModel {
     () => this.newChatPrimaryChannel.value == ""
   );
 
-  // sorting
-  get sortedPrimaryChannels(): string[] {
-    return this.chatListModel.sortedPrimaryChannels;
-  }
-
-  getIndexOfChat(chat: ChatViewModel): number {
-    return this.sortedPrimaryChannels.indexOf(chat.primaryChannel.value);
-  }
-
-  updateIndices = (): void => {
-    for (const chatViewModel of this.chatViewModels.value) {
-      chatViewModel.updateIndex();
-    }
-  }
-
   // methods
   createChat = (): void => {
     const chatModel: ChatModel = this.chatListModel.createChat(
@@ -45,8 +30,10 @@ export default class ChatListViewModel {
     );
     this.newChatPrimaryChannel.value = "";
 
-    const chatViewModel: ChatViewModel = new ChatViewModel(this, chatModel);
+    const chatViewModel: ChatViewModel = this.createChatViewModel(chatModel);
     this.chatViewModels.add(chatViewModel);
+
+    this.updateIndices();
   };
 
   untrackChat = (chatViewModel: ChatViewModel): void => {
@@ -54,6 +41,11 @@ export default class ChatListViewModel {
     this.chatViewModels.remove(chatViewModel);
   };
 
+  createChatViewModel = (chatModel: ChatModel): ChatViewModel => {
+    return new ChatViewModel(chatModel, this.storageModel, this);
+  }
+
+  // view
   openChat = (chatViewModel: ChatViewModel): void => {
     this.selectedChat.value = chatViewModel;
   };
@@ -62,20 +54,25 @@ export default class ChatListViewModel {
     this.selectedChat.value = undefined;
   };
 
+  // sorting
+  updateIndices = (): void => {
+    for (const chatViewModel of this.chatViewModels.value) {
+      chatViewModel.updateIndex();
+    }
+  }
+
   // restore
   restoreChats = (): void => {
     for (const chatModel of this.chatListModel.chatModels.values()) {
-      const chatViewModel = new ChatViewModel(this, chatModel);
+      const chatViewModel = this.createChatViewModel(chatModel);
       this.chatViewModels.add(chatViewModel);
     }
   };
 
   // init
-  constructor(storageModel: StorageModel) {
-    this.storageModel = storageModel;
-
-    const chatListModel = new ChatListModel(storageModel);
+  constructor(chatListModel: ChatListModel, storageModel: StorageModel) {
     this.chatListModel = chatListModel;
+    this.storageModel = storageModel;
 
     this.restoreChats();
   }

src/ViewModel/chatViewModel.tsx

@@ -9,8 +9,8 @@ import { localeCompare } from "../Model/Utility/utility";
 
 export default class ChatViewModel {
   chatModel: ChatModel;
-  chatListViewModel: ChatListViewModel;
   storageModel: StorageModel;
+  chatListViewModel: ChatListViewModel;
 
   // state
   index: React.State<number> = new React.State(0);
@@ -34,6 +34,8 @@ export default class ChatViewModel {
     ChatPageType.Messages
   );
 
+  composingMessage: React.State<string> = new React.State("");
+
   // guards
   cannotSetPrimaryChannel: React.State<boolean> = React.createProxyState(
     [this.primaryChannel, this.primaryChannelInput],
@@ -45,11 +47,10 @@ export default class ChatViewModel {
 
   // sorting
   updateIndex = (): void => {
-    const index = this.chatListViewModel.getIndexOfChat(this);
-    this.index.value = index;
+    this.index.value = this.chatModel.index;
   };
 
-  // methods
+  // view
   open = (): void => {
     this.chatListViewModel.openChat(this);
   };
@@ -58,6 +59,7 @@ export default class ChatViewModel {
     this.chatListViewModel.closeChat();
   };
 
+  // settings
   setPrimaryChannel = (): void => {
     this.chatModel.setPrimaryChannel(this.primaryChannelInput.value);
     this.primaryChannel.value = this.chatModel.info.primaryChannel;
@@ -117,9 +119,13 @@ export default class ChatViewModel {
   };
 
   // init
-  constructor(chatListViewModel: ChatListViewModel, chatModel: ChatModel) {
+  constructor(
+    chatModel: ChatModel,
+    storageModel: StorageModel,
+    chatListViewModel: ChatListViewModel
+  ) {
     this.chatModel = chatModel;
-    this.storageModel = chatModel.storageModel;
+    this.storageModel = storageModel;
     this.chatListViewModel = chatListViewModel;
 
     this.primaryChannel.value = chatModel.info.primaryChannel;

src/ViewModel/connectionViewModel.tsx

@@ -2,7 +2,6 @@ import * as React from "bloatless-react";
 
 import ConnectionModel from "../Model/connectionModel";
 import { Message } from "udn-frontend";
-import StorageModel from "../Model/storageModel";
 
 export default class ConnectionViewModel {
   connectionModel: ConnectionModel;
@@ -78,14 +77,8 @@ export default class ConnectionViewModel {
   };
 
   // init
-  constructor(storageModel: StorageModel) {
-    const connectionModel = new ConnectionModel({
-      storageModel,
-      connectionChangeHandler: this.connectionChangeHandler,
-      messageHandler: this.messageHandler,
-    });
+  constructor(connectionModel: ConnectionModel) {
     this.connectionModel = connectionModel;
-
     this.updatePreviousAddresses();
   }
 }

src/ViewModel/settingsViewModel.ts

@@ -1,7 +1,6 @@
 import * as React from "bloatless-react";
 
 import SettingsModel from "../Model/settingsModel";
-import StorageModel from "../Model/storageModel";
 
 export default class SettingsViewModel {
   settingsModel: SettingsModel;
@@ -29,8 +28,7 @@ export default class SettingsViewModel {
   };
 
   // init
-  constructor(storageModel: StorageModel) {
-    const settingsModel = new SettingsModel(storageModel);
+  constructor(settingsModel: SettingsModel) {
     this.settingsModel = settingsModel;
 
     this.nameInput.value = settingsModel.username;

src/index.tsx

@@ -3,22 +3,33 @@ import "./colors.css";
 
 import * as React from "bloatless-react";
 
+import ChatListModel from "./Model/chatListModel";
 import ChatListViewModel from "./ViewModel/chatListViewModel";
 import { ChatPageWrapper } from "./View/chatPageWrapper";
 import { ConnectionModal } from "./View/Modals/connectionModal";
+import ConnectionModel from "./Model/connectionModel";
 import ConnectionViewModel from "./ViewModel/connectionViewModel";
 import { HomePage } from "./View/homePage";
+import SettingsModel from "./Model/settingsModel";
 import SettingsViewModel from "./ViewModel/settingsViewModel";
 import StorageModel from "./Model/storageModel";
 
 // models
 const storageModel = new StorageModel();
+const settingsModel = new SettingsModel(storageModel);
+const connectionModel = new ConnectionModel(storageModel);
+const chatListModel = new ChatListModel(
+  storageModel,
+  settingsModel,
+  connectionModel
+);
+
 storageModel.print();
 
 // viewModels
-const settingsViewModel = new SettingsViewModel(storageModel);
-const connectionViewModel = new ConnectionViewModel(storageModel);
-const chatListViewModel = new ChatListViewModel(storageModel);
+const settingsViewModel = new SettingsViewModel(settingsModel);
+const connectionViewModel = new ConnectionViewModel(connectionModel);
+const chatListViewModel = new ChatListViewModel(chatListModel, storageModel);
 
 // view
 document.body.append(<div id="background"></div>);