diff --git a/src/View/chatPageWrapper.tsx b/src/View/chatPageWrapper.tsx
index 46c6a715..ac732b07 100644
--- a/src/View/chatPageWrapper.tsx
+++ b/src/View/chatPageWrapper.tsx
@@ -2,7 +2,7 @@ import "./chatPage.css";
import * as React from "bloatless-react";
-import ChatListViewModel from "../ViewModel/chatListViewModel";
+import ChatListViewModel from "../ViewModel/Chat/chatListViewModel";
import { ChatPage } from "./chatPage";
export function ChatPageWrapper(chatListViewModel: ChatListViewModel) {
diff --git a/src/View/homePage.tsx b/src/View/homePage.tsx
index 83e8f726..2e15505f 100644
--- a/src/View/homePage.tsx
+++ b/src/View/homePage.tsx
@@ -4,7 +4,7 @@ import * as React from "bloatless-react";
import { Option, StringToOption } from "./Components/option";
-import ChatListViewModel from "../ViewModel/chatListViewModel";
+import ChatListViewModel from "../ViewModel/Chat/chatListViewModel";
import { ChatViewModelToChatEntry } from "./Components/chatEntry";
import ConnectionViewModel from "../ViewModel/Global/connectionViewModel";
import SettingsViewModel from "../ViewModel/Global/settingsViewModel";
diff --git a/src/View/translations.ts b/src/View/translations.ts
index 15f7e0c0..f4fc2b2e 100644
--- a/src/View/translations.ts
+++ b/src/View/translations.ts
@@ -104,6 +104,8 @@ const englishTranslations = {
},
message: {
+ messagesHeadline: "Messages",
+
composerInputPlaceholder: "Type a message...",
sendMessageButtonAudioLabel: "send message",
diff --git a/src/ViewModel/Chat/chatMessageViewModel.ts b/src/ViewModel/Chat/chatMessageViewModel.ts
index e5ed9940..b11bd67d 100644
--- a/src/ViewModel/Chat/chatMessageViewModel.ts
+++ b/src/ViewModel/Chat/chatMessageViewModel.ts
@@ -5,9 +5,10 @@ import * as React from "bloatless-react";
import { ChatMessage, ChatMessageStatus } from "../../Model/Chat/chatModel";
import ChatViewModel from "./chatViewModel";
+import MessagePageViewModel from "../Pages/messagePageViewModel";
export default class ChatMessageViewModel {
- chatViewModel: ChatViewModel;
+ messagePageViewModel: MessagePageViewModel;
// data
chatMessage: ChatMessage;
@@ -25,10 +26,10 @@ export default class ChatMessageViewModel {
navigator.clipboard.writeText(this.body.value);
};
resendMessage = (): void => {
- this.chatViewModel.sendMessageFromBody(this.body.value);
+ this.messagePageViewModel.sendMessageFromBody(this.body.value);
};
decryptMessage = (): void => {
- this.chatViewModel.decryptMessage(this);
+ this.messagePageViewModel.decryptMessage(this);
};
// load
@@ -42,11 +43,11 @@ export default class ChatMessageViewModel {
// init
constructor(
- chatViewModel: ChatViewModel,
+ messagePageViewModel: MessagePageViewModel,
chatMessage: ChatMessage,
sentByUser: boolean
) {
- this.chatViewModel = chatViewModel;
+ this.messagePageViewModel = messagePageViewModel;
this.chatMessage = chatMessage;
this.sentByUser = sentByUser;
diff --git a/src/ViewModel/Chat/chatViewModel.ts b/src/ViewModel/Chat/chatViewModel.ts
index 9c653d4e..53c5e9fe 100644
--- a/src/ViewModel/Chat/chatViewModel.ts
+++ b/src/ViewModel/Chat/chatViewModel.ts
@@ -4,10 +4,10 @@ import ChatModel, { ChatMessage } from "../../Model/Chat/chatModel";
import StorageModel, { filePaths } from "../../Model/Global/storageModel";
import ChatListViewModel from "./chatListViewModel";
-import ChatMessageViewModel from "./chatMessageViewModel";
-import { Color } from "../../colors";
+import MessagePageViewModel from "../Pages/messagePageViewModel";
+import SettingsPageViewModel from "../Pages/settingsPageViewModel";
import SettingsViewModel from "../Global/settingsViewModel";
-import { localeCompare } from "../../Model/Utility/utility";
+import TaskPageViewModel from "../Pages/taskPageViewModel";
export default class ChatViewModel {
chatModel: ChatModel;
@@ -15,46 +15,17 @@ export default class ChatViewModel {
settingsViewModel: SettingsViewModel;
chatListViewModel: ChatListViewModel;
+ taskPageViewModel: TaskPageViewModel;
+ messagePageViewModel: MessagePageViewModel;
+ settingsPageViewModel: SettingsPageViewModel;
+
// state
index: React.State = new React.State(0);
- primaryChannel: React.State = new React.State("");
- primaryChannelInput: React.State = new React.State("");
-
- secondaryChannels: React.ListState = new React.ListState();
- newSecondaryChannelInput: React.State = new React.State("");
-
- encryptionKeyInput: React.State = new React.State("");
- shouldShowEncryptionKey: React.State = new React.State(false);
- encryptionKeyInputType: React.State<"text" | "password"> =
- React.createProxyState([this.shouldShowEncryptionKey], () =>
- this.shouldShowEncryptionKey.value == true ? "text" : "password"
- );
-
- color: React.State = new React.State(Color.Standard);
-
selectedPage: React.State = new React.State(
ChatPageType.Messages
);
- chatMessageViewModels: React.MapState =
- new React.MapState();
- composingMessage: React.State = new React.State("");
-
- // guards
- cannotSetPrimaryChannel: React.State = React.createProxyState(
- [this.primaryChannel, this.primaryChannelInput],
- () =>
- this.primaryChannelInput.value == "" ||
- this.primaryChannelInput.value == this.primaryChannel.value
- );
- cannotAddSecondaryChannel: React.State = React.createProxyState(
- [this.newSecondaryChannelInput],
- () => this.newSecondaryChannelInput.value == ""
- );
- cannotSetEncryptionKey: React.State;
- cannotSendMessage: React.State;
-
// sorting
updateIndex = (): void => {
this.index.value = this.chatModel.index;
@@ -63,95 +34,12 @@ export default class ChatViewModel {
// view
open = (): void => {
this.chatListViewModel.openChat(this);
- this.loadMessages();
};
close = (): void => {
this.chatListViewModel.closeChat();
};
- // add
- addChatMessage = (chatMessage: ChatMessage): void => {
- const chatMessageModel = new ChatMessageViewModel(
- this,
- chatMessage,
- chatMessage.sender == this.settingsViewModel.username.value
- );
-
- const existingChatMessageViewModel: ChatMessageViewModel | undefined =
- this.chatMessageViewModels.value.get(chatMessage.id);
- if (existingChatMessageViewModel != undefined) {
- existingChatMessageViewModel.body.value = chatMessage.body;
- existingChatMessageViewModel.status.value = chatMessage.status;
- } else {
- this.chatMessageViewModels.set(chatMessage.id, chatMessageModel);
- }
- };
-
- // settings
- setPrimaryChannel = (): void => {
- this.chatModel.setPrimaryChannel(this.primaryChannelInput.value);
- this.primaryChannel.value = this.chatModel.info.primaryChannel;
- this.chatListViewModel.updateIndices();
- };
-
- addSecondaryChannel = (): void => {
- this.secondaryChannels.add(this.newSecondaryChannelInput.value);
- this.newSecondaryChannelInput.value = "";
- this.storeSecondaryChannels();
- this.loadSecondaryChannels();
- };
-
- removeSecondaryChannel = (secondaryChannel: string): void => {
- this.secondaryChannels.remove(secondaryChannel);
- this.storeSecondaryChannels();
- };
-
- storeSecondaryChannels = (): void => {
- this.chatModel.setSecondaryChannels([
- ...this.secondaryChannels.value.values(),
- ]);
- };
-
- setEncryptionKey = (): void => {
- this.chatModel.setEncryptionKey(this.encryptionKeyInput.value);
-
- // disable button
- this.encryptionKeyInput.callSubscriptions();
- };
-
- setColor = (newColor: Color): void => {
- this.color.value = newColor;
- this.chatModel.setColor(newColor);
- };
-
- remove = (): void => {
- this.close();
- this.chatModel.delete();
- this.chatListViewModel.loadChats();
- };
-
- // messaging
- sendMessage = (): void => {
- if (this.cannotSendMessage.value == true) return;
-
- this.sendMessageFromBody(this.composingMessage.value);
- this.composingMessage.value = "";
- };
-
- sendMessageFromBody = (body: string): void => {
- this.chatModel.sendMessage(body);
- };
-
- decryptMessage = async (
- messageViewModel: ChatMessageViewModel
- ): Promise => {
- const chatMessage: ChatMessage = messageViewModel.chatMessage;
- await this.chatModel.decryptMessage(chatMessage);
- this.chatModel.addMessage(chatMessage);
- messageViewModel.loadData();
- };
-
// load
loadPageSelection = (): void => {
const path: string[] = StorageModel.getPath(
@@ -168,21 +56,6 @@ export default class ChatViewModel {
});
};
- loadSecondaryChannels = (): void => {
- this.secondaryChannels.clear();
- for (const secondaryChannel of this.chatModel.info.secondaryChannels.sort(
- localeCompare
- )) {
- this.secondaryChannels.add(secondaryChannel);
- }
- };
-
- loadMessages = (): void => {
- for (const chatMessage of this.chatModel.messages) {
- this.addChatMessage(chatMessage);
- }
- };
-
// init
constructor(
chatModel: ChatModel,
@@ -196,34 +69,22 @@ export default class ChatViewModel {
this.settingsViewModel = settingsViewModel;
this.chatListViewModel = chatListViewModel;
+ // page viewModels
+ this.taskPageViewModel = new TaskPageViewModel(
+ this.chatModel.fileModel.taskModel,
+ this.storageModel
+ );
+ this.messagePageViewModel = new MessagePageViewModel(this);
+ this.settingsPageViewModel = new SettingsPageViewModel(this);
+
// handlers
chatModel.setMessageHandler((chatMessage) => {
- this.addChatMessage(chatMessage);
+ this.messagePageViewModel.addChatMessage(chatMessage);
});
// load
- this.primaryChannel.value = chatModel.info.primaryChannel;
- this.primaryChannelInput.value = chatModel.info.primaryChannel;
-
- this.encryptionKeyInput.value = chatModel.info.encryptionKey;
- this.cannotSetEncryptionKey = React.createProxyState(
- [this.encryptionKeyInput],
- () => this.encryptionKeyInput.value == this.chatModel.info.encryptionKey
- );
-
- this.color.value = chatModel.color;
-
- this.loadSecondaryChannels();
this.loadPageSelection();
this.updateIndex();
-
- // guards
- this.cannotSendMessage = React.createProxyState(
- [this.settingsViewModel.username, this.composingMessage],
- () =>
- this.settingsViewModel.username.value == "" ||
- this.composingMessage.value == ""
- );
}
}
diff --git a/src/ViewModel/Pages/messagePageViewModel.ts b/src/ViewModel/Pages/messagePageViewModel.ts
new file mode 100644
index 00000000..512d7b74
--- /dev/null
+++ b/src/ViewModel/Pages/messagePageViewModel.ts
@@ -0,0 +1,78 @@
+import * as React from "bloatless-react";
+
+import { ChatMessage } from "../../Model/Chat/chatModel";
+import ChatMessageViewModel from "../Chat/chatMessageViewModel";
+import ChatViewModel from "../Chat/chatViewModel";
+
+export default class MessagePageViewModel {
+ chatViewModel: ChatViewModel;
+
+ // state
+ chatMessageViewModels: React.MapState =
+ new React.MapState();
+ composingMessage: React.State = new React.State("");
+
+ // guards
+ cannotSendMessage: React.State;
+
+ // methods
+ addChatMessage = (chatMessage: ChatMessage): void => {
+ const chatMessageModel = new ChatMessageViewModel(
+ this,
+ chatMessage,
+ chatMessage.sender == this.chatViewModel.settingsViewModel.username.value
+ );
+
+ const existingChatMessageViewModel: ChatMessageViewModel | undefined =
+ this.chatMessageViewModels.value.get(chatMessage.id);
+ if (existingChatMessageViewModel != undefined) {
+ existingChatMessageViewModel.body.value = chatMessage.body;
+ existingChatMessageViewModel.status.value = chatMessage.status;
+ } else {
+ this.chatMessageViewModels.set(chatMessage.id, chatMessageModel);
+ }
+ };
+
+ // messaging
+ sendMessage = (): void => {
+ if (this.cannotSendMessage.value == true) return;
+
+ this.sendMessageFromBody(this.composingMessage.value);
+ this.composingMessage.value = "";
+ };
+
+ sendMessageFromBody = (body: string): void => {
+ this.chatViewModel.chatModel.sendMessage(body);
+ };
+
+ decryptMessage = async (
+ messageViewModel: ChatMessageViewModel
+ ): Promise => {
+ const chatMessage: ChatMessage = messageViewModel.chatMessage;
+ await this.chatViewModel.chatModel.decryptMessage(chatMessage);
+ this.chatViewModel.chatModel.addMessage(chatMessage);
+ messageViewModel.loadData();
+ };
+
+ // load
+ loadData = (): void => {
+ this.cannotSendMessage = React.createProxyState(
+ [this.chatViewModel.settingsViewModel.username, this.composingMessage],
+ () =>
+ this.chatViewModel.settingsViewModel.username.value == "" ||
+ this.composingMessage.value == ""
+ );
+ };
+
+ loadMessages = (): void => {
+ for (const chatMessage of this.chatViewModel.chatModel.messages) {
+ this.addChatMessage(chatMessage);
+ }
+ };
+
+ // init
+ constructor(chatViewModel: ChatViewModel) {
+ this.chatViewModel = chatViewModel;
+ this.loadData();
+ }
+}
diff --git a/src/ViewModel/Pages/settingsPageViewModel.ts b/src/ViewModel/Pages/settingsPageViewModel.ts
new file mode 100644
index 00000000..f3cf3bdb
--- /dev/null
+++ b/src/ViewModel/Pages/settingsPageViewModel.ts
@@ -0,0 +1,124 @@
+import * as React from "bloatless-react";
+
+import ChatViewModel from "../Chat/chatViewModel";
+import { Color } from "../../colors";
+
+export default class SettingsPageViewModel {
+ chatViewModel: ChatViewModel;
+
+ // state
+ primaryChannel: React.State = new React.State("");
+ primaryChannelInput: React.State = new React.State("");
+
+ secondaryChannels: React.ListState = new React.ListState();
+ newSecondaryChannelInput: React.State = new React.State("");
+
+ encryptionKeyInput: React.State = new React.State("");
+ shouldShowEncryptionKey: React.State = new React.State(false);
+ encryptionKeyInputType: React.State<"text" | "password"> =
+ React.createProxyState([this.shouldShowEncryptionKey], () =>
+ this.shouldShowEncryptionKey.value == true ? "text" : "password"
+ );
+
+ color: React.State = new React.State(Color.Standard);
+
+ // guards
+ cannotSetPrimaryChannel: React.State = React.createProxyState(
+ [this.primaryChannel, this.primaryChannelInput],
+ () =>
+ this.primaryChannelInput.value == "" ||
+ this.primaryChannelInput.value == this.primaryChannel.value
+ );
+ cannotAddSecondaryChannel: React.State = React.createProxyState(
+ [this.newSecondaryChannelInput],
+ () => this.newSecondaryChannelInput.value == ""
+ );
+ cannotSetEncryptionKey: React.State;
+
+ // methods
+ setPrimaryChannel = (): void => {
+ this.chatViewModel.chatModel.setPrimaryChannel(
+ this.primaryChannelInput.value
+ );
+ this.primaryChannel.value =
+ this.chatViewModel.chatModel.info.primaryChannel;
+ this.chatViewModel.chatListViewModel.updateIndices();
+ };
+
+ addSecondaryChannel = (): void => {
+ this.secondaryChannels.add(this.newSecondaryChannelInput.value);
+ this.newSecondaryChannelInput.value = "";
+ this.storeSecondaryChannels();
+ this.loadSecondaryChannels();
+ };
+
+ removeSecondaryChannel = (secondaryChannel: string): void => {
+ this.secondaryChannels.remove(secondaryChannel);
+ this.storeSecondaryChannels();
+ };
+
+ storeSecondaryChannels = (): void => {
+ this.chatViewModel.chatModel.setSecondaryChannels([
+ ...this.secondaryChannels.value.values(),
+ ]);
+ };
+
+ setEncryptionKey = (): void => {
+ this.chatViewModel.chatModel.setEncryptionKey(
+ this.encryptionKeyInput.value
+ );
+
+ // disable button
+ this.encryptionKeyInput.callSubscriptions();
+ };
+
+ setColor = (newColor: Color): void => {
+ this.color.value = newColor;
+ this.chatViewModel.chatModel.setColor(newColor);
+ };
+
+ remove = (): void => {
+ this.chatViewModel.close();
+ this.chatViewModel.chatModel.delete();
+ this.chatViewModel.chatListViewModel.loadChats();
+ };
+
+ // load
+ loadViewRelevantData = (): void => {
+ this.primaryChannel.value =
+ this.chatViewModel.chatModel.info.primaryChannel;
+
+ this.color.value = this.chatViewModel.chatModel.color;
+
+ this.cannotSetEncryptionKey = React.createProxyState(
+ [this.encryptionKeyInput],
+ () =>
+ this.encryptionKeyInput.value ==
+ this.chatViewModel.chatModel.info.encryptionKey
+ );
+ };
+
+ loadData = (): void => {
+ this.primaryChannelInput.value =
+ this.chatViewModel.chatModel.info.primaryChannel;
+
+ this.loadSecondaryChannels();
+
+ this.encryptionKeyInput.value =
+ this.chatViewModel.chatModel.info.encryptionKey;
+ };
+
+ loadSecondaryChannels = (): void => {
+ this.secondaryChannels.clear();
+ for (const secondaryChannel of this.chatViewModel.chatModel
+ .secondaryChannels) {
+ this.secondaryChannels.add(secondaryChannel);
+ }
+ };
+
+ // init
+ constructor(chatViewModel: ChatViewModel) {
+ this.chatViewModel = chatViewModel;
+ this.loadViewRelevantData();
+ }
+}
diff --git a/src/ViewModel/Files/taskViewModel.ts b/src/ViewModel/Pages/taskPageViewModel.ts
similarity index 87%
rename from src/ViewModel/Files/taskViewModel.ts
rename to src/ViewModel/Pages/taskPageViewModel.ts
index de250cfa..442f2850 100644
--- a/src/ViewModel/Files/taskViewModel.ts
+++ b/src/ViewModel/Pages/taskPageViewModel.ts
@@ -2,14 +2,12 @@ import * as React from "bloatless-react";
import TaskModel, {
BoardInfoFileContent,
- TaskFileContent,
} from "../../Model/Files/taskModel";
import StorageModel from "../../Model/Global/storageModel";
-export default class TaskViewModel {
+export default class TaskPageViewModel {
taskModel: TaskModel;
- storageModel: StorageModel;
// state
newBoardNameInput: React.State = new React.State("");
@@ -33,6 +31,5 @@ export default class TaskViewModel {
// init
constructor(taskModel: TaskModel, storageModel: StorageModel) {
this.taskModel = taskModel;
- this.storageModel = storageModel;
}
}