improve centralization of models

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>);