2022-04-17 04:08:40 +03:00
|
|
|
import gateway, { GatewayEventType } from "./gateway";
|
2022-05-05 20:52:35 +03:00
|
|
|
import logger from "./logging";
|
2022-04-19 21:21:55 +03:00
|
|
|
import request from "./request";
|
2022-05-06 01:55:21 +03:00
|
|
|
import { apiRoute, getItem, setItem } from "./storage";
|
2022-04-17 04:08:40 +03:00
|
|
|
|
2022-05-05 20:52:35 +03:00
|
|
|
const storeLog = logger("Store");
|
2022-04-23 23:07:46 +03:00
|
|
|
|
2022-04-17 20:23:20 +03:00
|
|
|
class Store {
|
2022-05-05 15:33:22 +03:00
|
|
|
constructor(value=null, name="[unnamed]") {
|
2022-04-17 20:23:20 +03:00
|
|
|
this._handlers = [];
|
2022-04-19 02:22:32 +03:00
|
|
|
this.value = value;
|
2022-05-05 15:33:22 +03:00
|
|
|
this.name = name;
|
2022-04-17 20:23:20 +03:00
|
|
|
}
|
|
|
|
|
2022-05-07 03:27:41 +03:00
|
|
|
// like subscribe, but without initially calling it
|
|
|
|
watch(handler) {
|
|
|
|
const newLength = this._handlers.push(handler);
|
|
|
|
const handlerIndex = newLength - 1;
|
|
|
|
storeLog(`(${this.name}) Calling handler (watch/initial)`, this.value);
|
|
|
|
return () => {
|
|
|
|
this._handlers.splice(handlerIndex, 1);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2022-04-17 04:08:40 +03:00
|
|
|
subscribe(handler) {
|
|
|
|
const newLength = this._handlers.push(handler);
|
|
|
|
const handlerIndex = newLength - 1;
|
2022-05-07 03:27:41 +03:00
|
|
|
storeLog(`(${this.name}) Calling handler (subscribe/initial)`, this.value);
|
2022-04-19 02:17:24 +03:00
|
|
|
handler(this.value);
|
2022-04-17 04:08:40 +03:00
|
|
|
return () => {
|
|
|
|
this._handlers.splice(handlerIndex, 1);
|
|
|
|
};
|
2022-04-17 20:23:20 +03:00
|
|
|
}
|
|
|
|
|
2022-04-28 18:40:38 +03:00
|
|
|
set(value) {
|
|
|
|
this.value = value;
|
|
|
|
this.updated();
|
|
|
|
}
|
|
|
|
|
2022-04-19 02:17:24 +03:00
|
|
|
updated() {
|
2022-05-05 15:33:22 +03:00
|
|
|
storeLog(`(${this.name}) Calling all (${this._handlers.length}) handlers (updated)`, this.value);
|
2022-04-17 04:08:40 +03:00
|
|
|
this._handlers.forEach(e => {
|
2022-04-19 02:17:24 +03:00
|
|
|
e(this.value);
|
2022-04-17 04:08:40 +03:00
|
|
|
});
|
2022-04-17 20:23:20 +03:00
|
|
|
}
|
|
|
|
}
|
2022-04-17 04:08:40 +03:00
|
|
|
|
2022-05-07 03:36:27 +03:00
|
|
|
class StorageItemStore extends Store {
|
|
|
|
constructor(key) {
|
|
|
|
super(getItem(key), `StorageItemStore[key=${key}]`);
|
|
|
|
this.watch(e => setItem(key, e));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-17 20:23:20 +03:00
|
|
|
class ChannelsStore extends Store {
|
|
|
|
constructor() {
|
2022-05-05 15:33:22 +03:00
|
|
|
super(gateway.channels || [], "ChannelsStore");
|
2022-04-17 04:08:40 +03:00
|
|
|
|
|
|
|
gateway.subscribe(GatewayEventType.Ready, ({ channels }) => {
|
2022-04-19 02:17:24 +03:00
|
|
|
this.value = channels;
|
2022-04-27 23:41:50 +03:00
|
|
|
if (channels.length >= 1) {
|
2022-05-06 01:55:21 +03:00
|
|
|
if (!selectedChannel.value || selectedChannel.value.id === -1) {
|
|
|
|
selectedChannel.set(channels[0]);
|
|
|
|
} else {
|
|
|
|
// if a channel id is already selected, we'll populate it with the data we just got from the gateway
|
|
|
|
const index = this.value.findIndex(e => e.id === selectedChannel.value.id);
|
|
|
|
if (index !== -1)
|
|
|
|
selectedChannel.set(this.value[index]);
|
2022-05-06 02:56:22 +03:00
|
|
|
else // if the channel doesn't exist, just select the first one
|
|
|
|
selectedChannel.set(channels[0]);
|
2022-05-06 01:55:21 +03:00
|
|
|
}
|
2022-04-27 23:41:50 +03:00
|
|
|
}
|
2022-04-19 02:17:24 +03:00
|
|
|
this.updated();
|
2022-04-17 04:08:40 +03:00
|
|
|
});
|
|
|
|
gateway.subscribe(GatewayEventType.ChannelCreate, (channel) => {
|
2022-04-19 02:17:24 +03:00
|
|
|
this.value.push(channel);
|
|
|
|
this.updated();
|
2022-04-17 04:08:40 +03:00
|
|
|
});
|
|
|
|
gateway.subscribe(GatewayEventType.ChannelDelete, ({ id }) => {
|
2022-04-19 02:17:24 +03:00
|
|
|
const index = this.value.findIndex(e => e.id === id);
|
2022-04-19 02:19:24 +03:00
|
|
|
if (index === -1)
|
2022-04-17 04:08:40 +03:00
|
|
|
return;
|
|
|
|
|
2022-04-19 02:17:24 +03:00
|
|
|
this.value.splice(index, 1);
|
|
|
|
this.updated();
|
2022-04-17 04:08:40 +03:00
|
|
|
});
|
|
|
|
gateway.subscribe(GatewayEventType.ChannelUpdate, (data) => {
|
2022-04-19 02:17:24 +03:00
|
|
|
const index = this.value.findIndex(e => e.id === data.id);
|
2022-04-19 02:19:24 +03:00
|
|
|
if (index === -1)
|
2022-04-17 04:08:40 +03:00
|
|
|
return;
|
2022-04-19 02:17:24 +03:00
|
|
|
if (!this.value[index])
|
2022-04-17 04:08:40 +03:00
|
|
|
return;
|
|
|
|
|
2022-04-19 02:17:24 +03:00
|
|
|
this.value[index] = data;
|
|
|
|
this.updated();
|
2022-04-17 04:08:40 +03:00
|
|
|
});
|
2022-04-28 18:40:38 +03:00
|
|
|
gateway.subscribe(GatewayEventType.MessageCreate, ({ channel_id }) => {
|
|
|
|
const index = this.value.findIndex(e => e.id === channel_id);
|
2022-04-28 18:48:44 +03:00
|
|
|
if (index === -1 || !this.value[index] || selectedChannel.value.id === channel_id)
|
2022-04-28 18:40:38 +03:00
|
|
|
return;
|
|
|
|
|
|
|
|
this.value[index]._hasUnreads = true;
|
|
|
|
this.updated();
|
|
|
|
});
|
|
|
|
selectedChannel.subscribe(({ id }) => {
|
|
|
|
const index = this.value.findIndex(e => e.id === id);
|
2022-04-28 18:48:44 +03:00
|
|
|
if (index === -1 || !this.value[index] || !this.value[index]._hasUnreads)
|
2022-04-28 18:40:38 +03:00
|
|
|
return;
|
|
|
|
|
|
|
|
this.value[index]._hasUnreads = false;
|
|
|
|
this.updated();
|
|
|
|
});
|
2022-04-17 04:08:40 +03:00
|
|
|
}
|
2022-04-17 20:23:20 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
class GatewayStatusStore extends Store {
|
|
|
|
constructor() {
|
2022-05-05 15:33:22 +03:00
|
|
|
super({ open: gateway.open, ready: gateway.authenticated }, "GatewayStatusStore");
|
2022-04-17 20:23:20 +03:00
|
|
|
|
|
|
|
gateway.subscribe(GatewayEventType.Open, () => {
|
2022-04-19 02:17:24 +03:00
|
|
|
this.value.open = true;
|
|
|
|
this.updated();
|
2022-04-17 20:23:20 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
gateway.subscribe(GatewayEventType.Close, () => {
|
2022-04-19 02:17:24 +03:00
|
|
|
this.value.open = false;
|
|
|
|
this.value.ready = false;
|
|
|
|
this.updated();
|
2022-04-17 20:23:20 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
gateway.subscribe(GatewayEventType.Ready, () => {
|
2022-04-19 02:17:24 +03:00
|
|
|
this.value.ready = true;
|
|
|
|
this.updated();
|
2022-04-17 20:23:20 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-20 03:44:48 +03:00
|
|
|
class UserInfoStore extends Store {
|
|
|
|
constructor() {
|
2022-05-05 15:33:22 +03:00
|
|
|
super(null, "UserInfoStore");
|
2022-04-20 03:44:48 +03:00
|
|
|
|
|
|
|
gateway.subscribe(GatewayEventType.Ready, ({ user }) => {
|
|
|
|
this.value = user;
|
|
|
|
this.updated();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-19 21:21:55 +03:00
|
|
|
class MessageStore extends Store {
|
|
|
|
constructor(channelId) {
|
2022-05-05 15:33:22 +03:00
|
|
|
super([], `MessageStore[channelId=${channelId}]`);
|
2022-04-19 21:21:55 +03:00
|
|
|
this.channelId = channelId;
|
|
|
|
this.isCollectingOldMessages = true;
|
|
|
|
this.didDoInitialLoad = false;
|
|
|
|
}
|
|
|
|
|
2022-04-21 01:55:37 +03:00
|
|
|
setMessage(id, message) {
|
|
|
|
const index = this.value.findIndex(e => e.id === id);
|
|
|
|
if (index === -1)
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.value[index] = message;
|
|
|
|
|
|
|
|
this.updated();
|
|
|
|
}
|
|
|
|
|
2022-04-19 21:21:55 +03:00
|
|
|
addMessage(message) {
|
|
|
|
this.value.push(message);
|
|
|
|
// only dispatch update if collectOldMessages didn't
|
|
|
|
if (!this.collectOldMessages()) {
|
|
|
|
this.updated();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-20 03:44:48 +03:00
|
|
|
updateId(oldId, newId) {
|
|
|
|
const index = this.value.findIndex(e => e.id === oldId);
|
|
|
|
if (index === -1)
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.value[index].id = newId;
|
|
|
|
|
|
|
|
this.updated();
|
|
|
|
}
|
|
|
|
|
2022-04-19 21:21:55 +03:00
|
|
|
updateMessage(message) {
|
|
|
|
const index = this.value.findIndex(e => e.id === message.id);
|
|
|
|
if (index === -1)
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.value[index] = message;
|
|
|
|
|
|
|
|
this.updated();
|
|
|
|
}
|
|
|
|
|
|
|
|
deleteMessage({ id }) {
|
|
|
|
const index = this.value.findIndex(e => e.id === id);
|
|
|
|
if (index === -1)
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.value.splice(index, 1);
|
|
|
|
|
|
|
|
this.updated();
|
|
|
|
}
|
|
|
|
|
|
|
|
collectOldMessages() {
|
|
|
|
if (!this.isCollectingOldMessages)
|
|
|
|
return false;
|
|
|
|
|
|
|
|
const target = 50;
|
|
|
|
const delta = this.value.length - target;
|
|
|
|
if (delta >= 1) {
|
|
|
|
this.value.splice(0, delta);
|
|
|
|
this.updated();
|
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
setIsCollectingOldMessages(isCollectingOldMessages) {
|
|
|
|
this.isCollectingOldMessages = isCollectingOldMessages;
|
|
|
|
this.collectOldMessages();
|
|
|
|
}
|
|
|
|
|
2022-04-22 16:43:26 +03:00
|
|
|
async loadOlderMessages(beforeCommitToStore=null) {
|
2022-04-19 21:21:55 +03:00
|
|
|
const oldestMessage = this.value[0];
|
|
|
|
const endpoint = oldestMessage ? `channels/${this.channelId}/messages/?before=${oldestMessage.id}` : `channels/${this.channelId}/messages`;
|
|
|
|
const res = await request("GET", apiRoute(endpoint), true, null);
|
2022-04-26 04:00:18 +03:00
|
|
|
if (res.success && res.ok && res.json) {
|
|
|
|
if (res.json.length < 1)
|
|
|
|
return;
|
2022-04-22 16:43:26 +03:00
|
|
|
if (beforeCommitToStore)
|
|
|
|
beforeCommitToStore(res.json);
|
2022-04-20 03:14:28 +03:00
|
|
|
res.json.reverse();
|
2022-04-19 21:21:55 +03:00
|
|
|
this.value = res.json.concat(this.value);
|
|
|
|
this.updated();
|
2022-04-26 03:47:51 +03:00
|
|
|
} else {
|
|
|
|
overlayStore.open("toast", {
|
|
|
|
message: "Messages failed to load"
|
|
|
|
});
|
2022-04-19 21:21:55 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async doInitialLoad() {
|
2022-04-27 22:03:51 +03:00
|
|
|
if (this.channelId === -1)
|
|
|
|
return;
|
|
|
|
|
2022-04-19 21:21:55 +03:00
|
|
|
await this.loadOlderMessages();
|
|
|
|
this.didDoInitialLoad = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class MessagesStoreProvider {
|
|
|
|
constructor() {
|
|
|
|
this.storeByChannel = new Map();
|
|
|
|
|
|
|
|
gateway.subscribe(GatewayEventType.MessageCreate, (message) => {
|
2022-04-20 03:44:48 +03:00
|
|
|
// we currently don't care about our own messages
|
|
|
|
if (gateway.user && message.author_id === gateway.user.id)
|
|
|
|
return;
|
2022-04-26 23:20:28 +03:00
|
|
|
|
|
|
|
const store = this.getStoreOrNull(message.channel_id);
|
|
|
|
if (store)
|
|
|
|
store.addMessage(message);
|
2022-04-19 21:21:55 +03:00
|
|
|
});
|
|
|
|
gateway.subscribe(GatewayEventType.MessageUpdate, (message) => {
|
2022-04-26 23:20:28 +03:00
|
|
|
const store = this.getStoreOrNull(message.channel_id);
|
|
|
|
if (store)
|
|
|
|
store.updateMessage(message);
|
2022-04-19 21:21:55 +03:00
|
|
|
});
|
|
|
|
gateway.subscribe(GatewayEventType.MessageDelete, (message) => {
|
2022-04-26 23:20:28 +03:00
|
|
|
const store = this.getStoreOrNull(message.channel_id);
|
|
|
|
if (store)
|
|
|
|
store.deleteMessage(message);
|
2022-04-19 21:21:55 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-04-26 23:20:28 +03:00
|
|
|
getStoreOrNull(channelId) {
|
|
|
|
return this.storeByChannel.get(channelId);
|
|
|
|
}
|
|
|
|
|
2022-04-19 21:21:55 +03:00
|
|
|
getStore(channelId) {
|
2022-04-20 03:14:28 +03:00
|
|
|
if (!this.storeByChannel.get(channelId)) {
|
2022-04-20 03:44:48 +03:00
|
|
|
const store = new MessageStore(channelId);
|
|
|
|
store.doInitialLoad();
|
|
|
|
this.storeByChannel.set(channelId, store);
|
2022-04-19 21:21:55 +03:00
|
|
|
}
|
2022-04-20 03:14:28 +03:00
|
|
|
return this.storeByChannel.get(channelId);
|
2022-04-19 21:21:55 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-25 18:47:27 +03:00
|
|
|
class OverlayStore extends Store {
|
|
|
|
constructor() {
|
|
|
|
super({
|
2022-04-26 03:01:21 +03:00
|
|
|
createChannel: null,
|
2022-04-26 22:45:40 +03:00
|
|
|
editChannel: null,
|
|
|
|
toast: null,
|
|
|
|
login: null,
|
2022-04-27 22:03:51 +03:00
|
|
|
createAccount: null,
|
|
|
|
settings: null
|
2022-05-05 15:33:22 +03:00
|
|
|
}, "OverlayStore");
|
2022-04-25 18:47:27 +03:00
|
|
|
}
|
|
|
|
|
2022-04-25 23:02:15 +03:00
|
|
|
open(name, props={}) {
|
|
|
|
this.value[name] = props;
|
2022-04-25 18:47:27 +03:00
|
|
|
this.updated();
|
|
|
|
}
|
|
|
|
|
|
|
|
close(name) {
|
2022-04-25 23:02:15 +03:00
|
|
|
this.value[name] = null;
|
2022-04-25 18:47:27 +03:00
|
|
|
this.updated();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-05-06 01:55:21 +03:00
|
|
|
export const selectedChannel = new Store({ id: getItem("app:cache:openChannelId"), name: "none", creator_id: -1 }, "selectedChannel");
|
2022-05-05 15:33:22 +03:00
|
|
|
export const showSidebar = new Store(false, "showSidebar");
|
|
|
|
export const showChannelView = new Store(true, "showChannelView");
|
|
|
|
export const smallViewport = new Store(false, "smallViewport");
|
2022-05-07 03:36:27 +03:00
|
|
|
export const theme = new StorageItemStore("app:visual:theme");
|
2022-04-17 20:23:20 +03:00
|
|
|
export const channels = new ChannelsStore();
|
|
|
|
export const gatewayStatus = new GatewayStatusStore();
|
2022-04-19 21:21:55 +03:00
|
|
|
export const messagesStoreProvider = new MessagesStoreProvider();
|
2022-04-20 03:44:48 +03:00
|
|
|
export const userInfoStore = new UserInfoStore();
|
2022-04-25 18:47:27 +03:00
|
|
|
export const overlayStore = new OverlayStore();
|
2022-05-07 03:27:41 +03:00
|
|
|
|
2022-05-05 21:49:25 +03:00
|
|
|
export const allStores = {
|
|
|
|
selectedChannel,
|
|
|
|
showSidebar,
|
|
|
|
showChannelView,
|
|
|
|
smallViewport,
|
2022-05-07 03:27:41 +03:00
|
|
|
theme,
|
2022-05-05 21:49:25 +03:00
|
|
|
channels,
|
|
|
|
gatewayStatus,
|
|
|
|
messagesStoreProvider,
|
|
|
|
userInfoStore,
|
|
|
|
overlayStore,
|
|
|
|
};
|
2022-05-06 01:55:21 +03:00
|
|
|
|
2022-05-07 03:27:41 +03:00
|
|
|
selectedChannel.watch((newSelectedChannel) => {
|
2022-05-06 01:55:21 +03:00
|
|
|
setItem("app:cache:openChannelId", newSelectedChannel.id);
|
|
|
|
});
|