import gateway, { GatewayEventType } from "./gateway"; import logger from "./logging"; import request from "./request"; import { apiRoute, getItem, setItem } from "./storage"; const storeLog = logger("Store"); class Store { constructor(value=null, name="[no name]") { this._handlers = []; this.value = value; this.name = name; } // like subscribe, but without initially calling the handler watch(handler) { const handlerIndex = this._handlers.push(handler) - 1; storeLog(`(${this.name}) (watch/handler) New handler`, this.value); return () => { this._handlers.splice(handlerIndex, 1); }; } subscribe(handler) { const handlerIndex = this._handlers.push(handler) - 1; storeLog(`(${this.name}) (subscribe/initial) Calling handler`, this.value); handler(this.value); return () => { this._handlers.splice(handlerIndex, 1); }; } set(value) { if (value === this.value) return; this.value = value; this.updated(); } updated() { storeLog(`(${this.name}) (updated) Calling all (${this._handlers.length}) handlers`, this.value); for (let i = this._handlers.length - 1; i >= 0; i--) { this._handlers[i](this.value); } } } class StorageItemStore extends Store { constructor(key) { super(getItem(key), `StorageItemStore[key=${key}]`); this.watch(e => setItem(key, e)); } } class ChannelsStore extends Store { constructor() { super(gateway.channels || [], "ChannelsStore"); gateway.subscribe(GatewayEventType.Ready, ({ channels }) => { this.value = channels; if (channels.length >= 1) { 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]); else // if the channel doesn't exist, just select the first one selectedChannel.set(channels[0]); } } this.updated(); }); gateway.subscribe(GatewayEventType.ChannelCreate, (channel) => { this.value.push(channel); this.updated(); }); gateway.subscribe(GatewayEventType.ChannelDelete, ({ id }) => { const index = this.value.findIndex(e => e.id === id); if (index === -1) return; this.value.splice(index, 1); this.updated(); }); gateway.subscribe(GatewayEventType.ChannelUpdate, (data) => { const index = this.value.findIndex(e => e.id === data.id); if (index === -1) return; if (!this.value[index]) return; this.value[index] = data; this.updated(); }); gateway.subscribe(GatewayEventType.MessageCreate, ({ channel_id }) => { const index = this.value.findIndex(e => e.id === channel_id); if (index === -1 || !this.value[index] || selectedChannel.value.id === channel_id) return; this.value[index]._hasUnreads = true; this.updated(); }); selectedChannel.subscribe(({ id }) => { const index = this.value.findIndex(e => e.id === id); if (index === -1 || !this.value[index] || !this.value[index]._hasUnreads) return; this.value[index]._hasUnreads = false; this.updated(); }); } } class GatewayStatusStore extends Store { constructor() { super({ open: gateway.open, ready: gateway.authenticated }, "GatewayStatusStore"); gateway.subscribe(GatewayEventType.Open, () => { this.value.open = true; this.updated(); }); gateway.subscribe(GatewayEventType.Close, () => { this.value.open = false; this.value.ready = false; this.updated(); }); gateway.subscribe(GatewayEventType.Ready, () => { this.value.ready = true; this.updated(); }); } } class UserInfoStore extends Store { constructor() { super(null, "UserInfoStore"); gateway.subscribe(GatewayEventType.Ready, ({ user }) => { this.value = user; this.updated(); }); } } class MessageStore extends Store { constructor(channelId) { super([], `MessageStore[channelId=${channelId}]`); this.channelId = channelId; this.isCollectingOldMessages = true; this.didDoInitialLoad = false; } setMessage(id, message) { const index = this.value.findIndex(e => e.id === id); if (index === -1) return; this.value[index] = message; this.updated(); } addMessage(message) { this.value.push(message); // only dispatch update if collectOldMessages didn't if (!this.collectOldMessages()) { this.updated(); } } updateId(oldId, newId) { const index = this.value.findIndex(e => e.id === oldId); if (index === -1) return; this.value[index].id = newId; this.updated(); } 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(); } async loadOlderMessages(beforeCommitToStore=null) { if (this.channelId === -1) return; 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); if (res.success && res.ok && res.json) { if (res.json.length < 1) return; if (beforeCommitToStore) beforeCommitToStore(res.json); res.json.reverse(); this.value = res.json.concat(this.value); this.updated(); } else { overlayStore.open("toast", { message: "Messages failed to load" }); } } async doInitialLoad() { if (this.channelId === -1) return; await this.loadOlderMessages(); this.didDoInitialLoad = true; } } class MessagesStoreProvider { constructor() { this.storeByChannel = new Map(); gateway.subscribe(GatewayEventType.MessageCreate, (message) => { // we currently don't care about our own messages if (gateway.user && message.author_id === gateway.user.id) return; const store = this.getStoreOrNull(message.channel_id); if (store) store.addMessage(message); }); gateway.subscribe(GatewayEventType.MessageUpdate, (message) => { const store = this.getStoreOrNull(message.channel_id); if (store) store.updateMessage(message); }); gateway.subscribe(GatewayEventType.MessageDelete, (message) => { const store = this.getStoreOrNull(message.channel_id); if (store) store.deleteMessage(message); }); } getStoreOrNull(channelId) { return this.storeByChannel.get(channelId); } getStore(channelId) { if (!this.storeByChannel.get(channelId)) { const store = new MessageStore(channelId); store.doInitialLoad(); this.storeByChannel.set(channelId, store); } return this.storeByChannel.get(channelId); } } class OverlayStore extends Store { constructor() { super({ createChannel: null, editChannel: null, toast: null, login: null, createAccount: null, settings: null }, "OverlayStore"); } open(name, props={}) { this.value[name] = props; this.updated(); } close(name) { if (!this.value[name]) return; this.value[name] = null; this.updated(); } } export const selectedChannel = new Store({ id: getItem("app:cache:openChannelId"), name: "none", creator_id: -1 }, "selectedChannel"); export const showSidebar = new Store(true, "showSidebar"); export const smallViewport = new Store(false, "smallViewport"); export const showChannelView = new Store(true, "showChannelView"); export const theme = new StorageItemStore("app:visual:theme"); export const doAnimations = new StorageItemStore("app:behavior:doAnimations"); export const channels = new ChannelsStore(); export const gatewayStatus = new GatewayStatusStore(); export const messagesStoreProvider = new MessagesStoreProvider(); export const userInfoStore = new UserInfoStore(); export const overlayStore = new OverlayStore(); export const allStores = { selectedChannel, showSidebar, showChannelView, smallViewport, theme, doAnimations, channels, gatewayStatus, messagesStoreProvider, userInfoStore, overlayStore, }; selectedChannel.watch((newSelectedChannel) => { setItem("app:cache:openChannelId", newSelectedChannel.id); });