2024-07-09 05:26:54 +02:00
|
|
|
import * as React from "bloatless-react";
|
|
|
|
|
|
2024-07-09 17:23:29 +02:00
|
|
|
import { UDN, chatIds, chats, isConnected, senderName } from "../Model/model";
|
2024-07-09 05:26:54 +02:00
|
|
|
import { decryptString, encryptString } from "../cryptUtility";
|
|
|
|
|
|
2024-07-09 11:39:23 +02:00
|
|
|
import { Message } from "udn-frontend";
|
2024-07-09 05:26:54 +02:00
|
|
|
import { storageKeys } from "../utility";
|
|
|
|
|
|
|
|
|
|
// TYPES
|
|
|
|
|
// message
|
2024-07-09 11:39:23 +02:00
|
|
|
export interface ChatMessage {
|
2024-07-09 05:26:54 +02:00
|
|
|
channel: string;
|
|
|
|
|
sender: string;
|
|
|
|
|
body: string;
|
|
|
|
|
isoDate: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// chat
|
|
|
|
|
export class Chat {
|
|
|
|
|
id: string;
|
|
|
|
|
|
2024-07-09 11:39:23 +02:00
|
|
|
isSubscribed = new React.State(false);
|
2024-07-09 17:23:29 +02:00
|
|
|
primaryChannel = new React.State("");
|
2024-07-09 05:26:54 +02:00
|
|
|
secondaryChannels: React.ListState<string>;
|
|
|
|
|
|
|
|
|
|
encryptionKey: React.State<string>;
|
2024-07-09 11:39:23 +02:00
|
|
|
messages: React.ListState<ChatMessage>;
|
2024-07-09 05:26:54 +02:00
|
|
|
|
|
|
|
|
composingMessage: React.State<string>;
|
|
|
|
|
newSecondaryChannelName: React.State<string>;
|
2024-07-09 17:23:29 +02:00
|
|
|
primaryChannelInput: React.State<string>;
|
2024-07-09 11:39:23 +02:00
|
|
|
|
|
|
|
|
cannotSendMessage: React.State<boolean>;
|
2024-07-09 05:26:54 +02:00
|
|
|
cannotAddSecondaryChannel: React.State<boolean>;
|
2024-07-09 11:39:23 +02:00
|
|
|
cannotSetChannel: React.State<boolean>;
|
2024-07-09 17:23:29 +02:00
|
|
|
cannotUndoChannel: React.State<boolean>;
|
2024-07-09 05:26:54 +02:00
|
|
|
|
|
|
|
|
// init
|
|
|
|
|
constructor(id: string = React.UUID()) {
|
2024-07-09 15:15:17 +02:00
|
|
|
this.id = id;
|
|
|
|
|
|
|
|
|
|
// channels
|
2024-07-09 17:23:29 +02:00
|
|
|
this.primaryChannel = React.restoreState(
|
2024-07-09 05:26:54 +02:00
|
|
|
storageKeys.primaryChannel(id),
|
|
|
|
|
""
|
|
|
|
|
);
|
|
|
|
|
this.secondaryChannels = React.restoreListState(
|
|
|
|
|
storageKeys.secondaryChannels(id)
|
|
|
|
|
);
|
|
|
|
|
|
2024-07-09 15:15:17 +02:00
|
|
|
// messaging
|
2024-07-09 05:26:54 +02:00
|
|
|
this.encryptionKey = React.restoreState(storageKeys.encyptionKey(id), "");
|
|
|
|
|
this.messages = React.restoreListState(storageKeys.messages(id));
|
|
|
|
|
|
2024-07-09 17:23:29 +02:00
|
|
|
// inputs
|
2024-07-09 05:26:54 +02:00
|
|
|
this.composingMessage = React.restoreState(
|
|
|
|
|
storageKeys.composingMessage(id),
|
|
|
|
|
""
|
|
|
|
|
);
|
|
|
|
|
this.newSecondaryChannelName = new React.State("");
|
2024-07-09 17:23:29 +02:00
|
|
|
this.primaryChannelInput = new React.State(this.primaryChannel.value);
|
2024-07-09 05:26:54 +02:00
|
|
|
|
2024-07-09 15:15:17 +02:00
|
|
|
// guards
|
2024-07-09 05:26:54 +02:00
|
|
|
this.cannotSendMessage = React.createProxyState(
|
2024-07-09 11:39:23 +02:00
|
|
|
[
|
2024-07-09 17:23:29 +02:00
|
|
|
this.primaryChannel,
|
2024-07-09 11:39:23 +02:00
|
|
|
this.composingMessage,
|
|
|
|
|
this.isSubscribed,
|
|
|
|
|
isConnected,
|
|
|
|
|
],
|
2024-07-09 05:26:54 +02:00
|
|
|
() =>
|
2024-07-09 17:23:29 +02:00
|
|
|
this.primaryChannel.value == "" ||
|
2024-07-09 05:26:54 +02:00
|
|
|
this.composingMessage.value == "" ||
|
2024-07-09 11:39:23 +02:00
|
|
|
this.isSubscribed.value == false ||
|
2024-07-09 05:26:54 +02:00
|
|
|
isConnected.value == false
|
|
|
|
|
);
|
|
|
|
|
this.cannotAddSecondaryChannel = React.createProxyState(
|
|
|
|
|
[this.newSecondaryChannelName],
|
|
|
|
|
() => this.newSecondaryChannelName.value == ""
|
|
|
|
|
);
|
2024-07-09 11:39:23 +02:00
|
|
|
this.cannotSetChannel = React.createProxyState(
|
2024-07-09 17:23:29 +02:00
|
|
|
[this.primaryChannelInput, this.primaryChannel],
|
2024-07-09 11:39:23 +02:00
|
|
|
() =>
|
|
|
|
|
this.primaryChannelInput.value == "" ||
|
2024-07-09 17:23:29 +02:00
|
|
|
this.primaryChannelInput.value == this.primaryChannel.value
|
|
|
|
|
);
|
|
|
|
|
this.cannotUndoChannel = React.createProxyState(
|
|
|
|
|
[this.primaryChannelInput, this.primaryChannel],
|
2024-07-09 17:32:51 +02:00
|
|
|
() => this.primaryChannelInput.value == this.primaryChannel.value
|
2024-07-09 11:39:23 +02:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2024-07-09 17:32:51 +02:00
|
|
|
// general
|
|
|
|
|
deleteSelf = () => {
|
|
|
|
|
Object.values(storageKeys).forEach((storageKey) => {
|
|
|
|
|
localStorage.removeItem(storageKey(this.id));
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
chats.remove(this);
|
|
|
|
|
chatIds.remove(this.id);
|
2024-07-09 18:44:13 +02:00
|
|
|
};
|
2024-07-09 17:32:51 +02:00
|
|
|
|
2024-07-09 11:39:23 +02:00
|
|
|
// handlers
|
2024-07-09 17:23:29 +02:00
|
|
|
onmessage = async (data: Message): Promise<void> => {
|
2024-07-09 18:44:13 +02:00
|
|
|
if (!data.messageChannel) return;
|
|
|
|
|
const channels = data.messageChannel.split("/");
|
2024-07-09 18:44:32 +02:00
|
|
|
if (this.primaryChannel.value in channels == false) return;
|
2024-07-09 11:39:23 +02:00
|
|
|
|
|
|
|
|
if (data.subscribed != undefined) this.handleSubscription(data.subscribed);
|
|
|
|
|
|
|
|
|
|
if (!data.messageBody) return;
|
|
|
|
|
const { sender, body, channel, isoDate } = JSON.parse(data.messageBody);
|
2024-07-09 17:23:29 +02:00
|
|
|
this.handleMessage({
|
|
|
|
|
sender,
|
|
|
|
|
body: await decryptString(body, this.encryptionKey.value),
|
|
|
|
|
channel,
|
|
|
|
|
isoDate,
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleSubscription = (isSubscribed: boolean): void => {
|
2024-07-09 11:39:23 +02:00
|
|
|
this.isSubscribed.value = isSubscribed;
|
2024-07-09 17:23:29 +02:00
|
|
|
};
|
2024-07-09 11:39:23 +02:00
|
|
|
|
2024-07-09 17:23:29 +02:00
|
|
|
handleMessage = (chatMessage: ChatMessage): void => {
|
2024-07-09 11:39:23 +02:00
|
|
|
this.messages.add(chatMessage);
|
2024-07-09 17:23:29 +02:00
|
|
|
};
|
2024-07-09 05:26:54 +02:00
|
|
|
|
|
|
|
|
// messages
|
2024-07-09 17:23:29 +02:00
|
|
|
sendMessage = async (): Promise<void> => {
|
2024-07-09 05:26:54 +02:00
|
|
|
if (this.cannotSendMessage.value == true) return;
|
|
|
|
|
|
|
|
|
|
// get channels
|
|
|
|
|
const secondaryChannelNames: string[] = [
|
|
|
|
|
...this.secondaryChannels.value.values(),
|
2024-07-09 18:44:13 +02:00
|
|
|
];
|
2024-07-09 05:26:54 +02:00
|
|
|
const allChannelNames: string[] = [
|
2024-07-09 17:23:29 +02:00
|
|
|
this.primaryChannel.value,
|
2024-07-09 05:26:54 +02:00
|
|
|
...secondaryChannelNames,
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// encrypt
|
|
|
|
|
const encrypted =
|
2024-07-09 17:23:29 +02:00
|
|
|
this.encryptionKey.value == ""
|
|
|
|
|
? this.composingMessage.value
|
|
|
|
|
: (await encryptString(
|
|
|
|
|
this.composingMessage.value,
|
|
|
|
|
this.encryptionKey.value
|
|
|
|
|
)) || this.composingMessage.value;
|
2024-07-09 05:26:54 +02:00
|
|
|
|
|
|
|
|
// create object
|
|
|
|
|
const joinedChannelName = allChannelNames.join("/");
|
2024-07-09 11:39:23 +02:00
|
|
|
const messageObject: ChatMessage = {
|
|
|
|
|
channel: joinedChannelName,
|
|
|
|
|
sender: senderName.value,
|
|
|
|
|
body: encrypted,
|
|
|
|
|
isoDate: new Date().toISOString(),
|
|
|
|
|
};
|
2024-07-09 05:26:54 +02:00
|
|
|
const messageString = JSON.stringify(messageObject);
|
|
|
|
|
|
|
|
|
|
// send
|
|
|
|
|
UDN.sendMessage(joinedChannelName, messageString);
|
|
|
|
|
|
|
|
|
|
// clear
|
|
|
|
|
this.composingMessage.value = "";
|
2024-07-09 17:23:29 +02:00
|
|
|
};
|
2024-07-09 05:26:54 +02:00
|
|
|
|
2024-07-09 17:23:29 +02:00
|
|
|
clearMessages = (): void => {
|
2024-07-09 05:26:54 +02:00
|
|
|
this.messages.clear();
|
2024-07-09 17:23:29 +02:00
|
|
|
};
|
2024-07-09 05:26:54 +02:00
|
|
|
|
2024-07-09 17:23:29 +02:00
|
|
|
deleteMessage = (message: ChatMessage): void => {
|
2024-07-09 05:26:54 +02:00
|
|
|
this.messages.remove(message);
|
2024-07-09 17:23:29 +02:00
|
|
|
};
|
2024-07-09 05:26:54 +02:00
|
|
|
|
2024-07-09 17:23:29 +02:00
|
|
|
decryptReceivedMessage = async (message: ChatMessage): Promise<void> => {
|
2024-07-09 05:26:54 +02:00
|
|
|
message.body = await decryptString(message.body, this.encryptionKey.value);
|
|
|
|
|
this.messages.callSubscriptions();
|
2024-07-09 17:23:29 +02:00
|
|
|
};
|
2024-07-09 05:26:54 +02:00
|
|
|
|
|
|
|
|
// channel
|
2024-07-09 17:23:29 +02:00
|
|
|
setChannel = (): void => {
|
2024-07-09 11:39:23 +02:00
|
|
|
if (this.cannotSetChannel.value == true) return;
|
2024-07-09 17:23:29 +02:00
|
|
|
this.primaryChannel.value = this.primaryChannelInput.value;
|
|
|
|
|
UDN.subscribe(this.primaryChannel.value);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
undoChannelChange = (): void => {
|
|
|
|
|
this.primaryChannelInput.value = this.primaryChannel.value;
|
|
|
|
|
};
|
2024-07-09 05:26:54 +02:00
|
|
|
|
2024-07-09 17:23:29 +02:00
|
|
|
addSecondaryChannel = (): void => {
|
2024-07-09 05:26:54 +02:00
|
|
|
if (this.cannotAddSecondaryChannel.value == true) return;
|
|
|
|
|
|
|
|
|
|
this.secondaryChannels.add(this.newSecondaryChannelName.value);
|
|
|
|
|
this.newSecondaryChannelName.value = "";
|
2024-07-09 17:23:29 +02:00
|
|
|
};
|
2024-07-09 05:26:54 +02:00
|
|
|
|
2024-07-09 17:23:29 +02:00
|
|
|
removeSecondaryChannel = (channel: string): void => {
|
2024-07-09 05:26:54 +02:00
|
|
|
this.secondaryChannels.remove(channel);
|
2024-07-09 17:23:29 +02:00
|
|
|
};
|
2024-07-09 05:26:54 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// METHODS
|
|
|
|
|
export function createChatWithName(name: string): void {
|
|
|
|
|
const newChat = new Chat();
|
2024-07-09 15:15:17 +02:00
|
|
|
chats.add(newChat);
|
2024-07-09 17:23:29 +02:00
|
|
|
|
|
|
|
|
newChat.primaryChannel.value = name;
|
|
|
|
|
chatIds.add(newChat.id);
|
|
|
|
|
|
|
|
|
|
UDN.subscribe(name);
|
2024-07-09 05:26:54 +02:00
|
|
|
}
|