From f41c9d4663bd95e77412378ae35f9fd496d679e5 Mon Sep 17 00:00:00 2001 From: Michael Peters Date: Sun, 7 Nov 2021 17:08:21 -0600 Subject: [PATCH] Actions no longer depends on UI for construction --- client/webapp/actions.ts | 70 +++++++++---------- client/webapp/elements/channel.ts | 2 +- .../webapp/elements/events-infinite-scroll.ts | 4 +- client/webapp/elements/server-list-server.ts | 6 +- client/webapp/script.ts | 18 ++--- 5 files changed, 47 insertions(+), 53 deletions(-) diff --git a/client/webapp/actions.ts b/client/webapp/actions.ts index d19c19d..ec921e3 100644 --- a/client/webapp/actions.ts +++ b/client/webapp/actions.ts @@ -12,46 +12,40 @@ import { Channel } from './data-types'; import Q from './q-module'; export default class Actions { - private ui: UI; - - constructor (ui: UI) { - this.ui = ui; - } - - async fetchAndUpdateConnection(server: ClientController) { + async fetchAndUpdateConnection(ui: UI, server: ClientController) { // Explicitly not using withPotentialError to make this simpler try { let connection = await server.fetchConnectionInfo(); - this.ui.setActiveConnection(server, connection); + ui.setActiveConnection(server, connection); } catch (e) { LOG.error('Error updating current connection', e); - this.ui.setActiveConnection(server, { id: null, avatarResourceId: null, displayName: 'Error', status: 'Error', privileges: [], roleName: null, roleColor: null, rolePriority: null }); + ui.setActiveConnection(server, { id: null, avatarResourceId: null, displayName: 'Error', status: 'Error', privileges: [], roleName: null, roleColor: null, rolePriority: null }); } } - async fetchAndUpdateMembers(q: Q, server: ClientController) { + async fetchAndUpdateMembers(q: Q, ui: UI, server: ClientController) { await Util.withPotentialErrorWarnOnCancel(q, { taskFunc: async () => { - if (this.ui.activeServer === null || this.ui.activeServer.id !== server.id) return; + if (ui.activeServer === null || ui.activeServer.id !== server.id) return; let members = await server.grabMembers(); - await this.ui.setMembers(server, members); + await ui.setMembers(server, members); }, errorIndicatorAddFunc: async (errorIndicatorElement) => { - await this.ui.setMembersErrorIndicator(server, errorIndicatorElement); + await ui.setMembersErrorIndicator(server, errorIndicatorElement); }, errorContainer: q.$('#server-members'), errorMessage: 'Error loading members' }); } - async fetchAndUpdateChannels(q: Q, server: ClientController) { + async fetchAndUpdateChannels(q: Q, ui: UI, server: ClientController) { await Util.withPotentialErrorWarnOnCancel(q, { taskFunc: async () => { - if (this.ui.activeServer === null || this.ui.activeServer.id !== server.id) return; + if (ui.activeServer === null || ui.activeServer.id !== server.id) return; let channels = await server.grabChannels(); - await this.ui.setChannels(this, server, channels); - if (this.ui.activeServer === null || this.ui.activeServer.id !== server.id) return; - if (this.ui.activeChannel === null) { + await ui.setChannels(this, server, channels); + if (ui.activeServer === null || ui.activeServer.id !== server.id) return; + if (ui.activeChannel === null) { // click on the first channel in the list if no channel is active yet let element = q.$_('#channel-list .channel'); if (element) { @@ -60,45 +54,45 @@ export default class Actions { } }, errorIndicatorAddFunc: async (errorIndicatorElement) => { - await this.ui.setChannelsErrorIndicator(server, errorIndicatorElement); + await ui.setChannelsErrorIndicator(server, errorIndicatorElement); }, errorContainer: q.$('#channel-list'), errorMessage: 'Error fetching channels' }); } - async fetchAndUpdateMessagesRecent(q: Q, server: ClientController, channel: Channel | { id: string }) { + async fetchAndUpdateMessagesRecent(q: Q, ui: UI, server: ClientController, channel: Channel | { id: string }) { await Util.withPotentialErrorWarnOnCancel(q, { taskFunc: async () => { - if (this.ui.activeServer === null || this.ui.activeServer.id !== server.id) return; - if (this.ui.activeChannel === null || this.ui.activeChannel.id !== channel.id) return; + if (ui.activeServer === null || ui.activeServer.id !== server.id) return; + if (ui.activeChannel === null || ui.activeChannel.id !== channel.id) return; let messages = await server.grabRecentMessages(channel.id, Globals.MESSAGES_PER_REQUEST); - await this.ui.setMessages(server, channel, messages, { atTop: messages.length < Globals.MESSAGES_PER_REQUEST, atBottom: true }); + await ui.setMessages(server, channel, messages, { atTop: messages.length < Globals.MESSAGES_PER_REQUEST, atBottom: true }); }, errorIndicatorAddFunc: async (errorIndicatorElement) => { - await this.ui.setMessagesErrorIndicator(server, channel, errorIndicatorElement); + await ui.setMessagesErrorIndicator(server, channel, errorIndicatorElement); }, errorContainer: q.$('#channel-feed'), errorMessage: 'Error fetching messages' }); } - async fetchAndUpdateMessagesBefore(q: Q, server: ClientController, channel: Channel) { + async fetchAndUpdateMessagesBefore(q: Q, ui: UI, server: ClientController, channel: Channel) { await Util.withPotentialErrorWarnOnCancel(q, { taskFunc: async () => { - if (this.ui.activeServer === null || this.ui.activeServer.id !== server.id) return; - if (this.ui.activeChannel === null || this.ui.activeChannel.id !== channel.id) return; - let topPair = this.ui.getTopMessagePair(); + if (ui.activeServer === null || ui.activeServer.id !== server.id) return; + if (ui.activeChannel === null || ui.activeChannel.id !== channel.id) return; + let topPair = ui.getTopMessagePair(); if (topPair == null) return; let messages = await server.fetchMessagesBefore(channel.id, topPair.message.id, Globals.MESSAGES_PER_REQUEST); if (messages && messages.length > 0) { - await this.ui.addMessagesBefore(server, channel, messages, topPair.message); + await ui.addMessagesBefore(server, channel, messages, topPair.message); } else { - this.ui.messagesAtTop = true; + ui.messagesAtTop = true; } }, errorIndicatorAddFunc: async (errorIndicatorElement) => { - await this.ui.addMessagesErrorIndicatorBefore(server, channel, errorIndicatorElement); + await ui.addMessagesErrorIndicatorBefore(server, channel, errorIndicatorElement); }, errorContainer: q.$('#channel-feed'), errorClasses: [ 'before' ], @@ -106,22 +100,22 @@ export default class Actions { }); } - async fetchAndUpdateMessagesAfter(q: Q, server: ClientController, channel: Channel) { + async fetchAndUpdateMessagesAfter(q: Q, ui: UI, server: ClientController, channel: Channel) { await Util.withPotentialErrorWarnOnCancel(q, { taskFunc: async () => { - if (this.ui.activeServer === null || this.ui.activeServer.id !== server.id) return; - if (this.ui.activeChannel === null || this.ui.activeChannel.id !== channel.id) return; - let bottomPair = this.ui.getBottomMessagePair(); + if (ui.activeServer === null || ui.activeServer.id !== server.id) return; + if (ui.activeChannel === null || ui.activeChannel.id !== channel.id) return; + let bottomPair = ui.getBottomMessagePair(); if (bottomPair == null) return; let messages = await server.fetchMessagesAfter(channel.id, bottomPair.message.id, Globals.MESSAGES_PER_REQUEST); if (messages && messages.length > 0) { - await this.ui.addMessagesAfter(server, channel, messages, bottomPair.message); + await ui.addMessagesAfter(server, channel, messages, bottomPair.message); } else { - this.ui.messagesAtBottom = true; + ui.messagesAtBottom = true; } }, errorIndicatorAddFunc: async (errorIndicatorElement) => { - await this.ui.addMessagesErrorIndicatorAfter(server, channel, errorIndicatorElement); + await ui.addMessagesErrorIndicatorAfter(server, channel, errorIndicatorElement); }, errorContainer: q.$('#channel-feed'), errorClasses: [ 'after' ], diff --git a/client/webapp/elements/channel.ts b/client/webapp/elements/channel.ts index 2c948cb..6704ee5 100644 --- a/client/webapp/elements/channel.ts +++ b/client/webapp/elements/channel.ts @@ -18,7 +18,7 @@ export default function createChannel(document: Document, q: Q, ui: UI, actions: element.addEventListener('click', async () => { if (element.classList.contains('active')) return; await ui.setActiveChannel(server, channel); - await actions.fetchAndUpdateMessagesRecent(q, server, channel); + await actions.fetchAndUpdateMessagesRecent(q, ui, server, channel); q.$('#text-input').focus(); }); diff --git a/client/webapp/elements/events-infinite-scroll.ts b/client/webapp/elements/events-infinite-scroll.ts index 6bb0cce..90455d4 100644 --- a/client/webapp/elements/events-infinite-scroll.ts +++ b/client/webapp/elements/events-infinite-scroll.ts @@ -17,12 +17,12 @@ export default function bindInfiniteScrollEvents(q: Q, ui: UI, actions: Actions) if (!loadingBefore && !ui.messagesAtTop && scrollTop < 600) { // Approaching the unloaded top of the page // Fetch more messages to add above loadingBefore = true; - await actions.fetchAndUpdateMessagesBefore(q, ui.activeServer, ui.activeChannel); + await actions.fetchAndUpdateMessagesBefore(q, ui, ui.activeServer, ui.activeChannel); loadingBefore = false; } else if (!loadingAfter && !ui.messagesAtBottom && scrollHeight - clientHeight - scrollTop < 600) { // Approaching the unloaded bottom of the page // Fetch more messages to add below loadingAfter = true; - await actions.fetchAndUpdateMessagesAfter(q, ui.activeServer, ui.activeChannel); + await actions.fetchAndUpdateMessagesAfter(q, ui, ui.activeServer, ui.activeChannel); loadingAfter = false; } } diff --git a/client/webapp/elements/server-list-server.ts b/client/webapp/elements/server-list-server.ts index bac0584..e70dcc7 100644 --- a/client/webapp/elements/server-list-server.ts +++ b/client/webapp/elements/server-list-server.ts @@ -76,7 +76,7 @@ export default function createServerListServer(document: Document, q: Q, ui: UI, // Connection information (async () => { - await actions.fetchAndUpdateConnection(server); + await actions.fetchAndUpdateConnection(ui, server); })(); // Server Channel Name @@ -93,12 +93,12 @@ export default function createServerListServer(document: Document, q: Q, ui: UI, // Server Channel List (async () => { - await actions.fetchAndUpdateChannels(q, server); + await actions.fetchAndUpdateChannels(q, ui, server); })(); // Server Members (async () => { - await actions.fetchAndUpdateMembers(q, server); + await actions.fetchAndUpdateMembers(q, ui, server); })(); }); diff --git a/client/webapp/script.ts b/client/webapp/script.ts index cfe1b76..dc9f567 100644 --- a/client/webapp/script.ts +++ b/client/webapp/script.ts @@ -53,7 +53,7 @@ window.addEventListener('DOMContentLoaded', () => { const q = new Q(document); const ui = new UI(document, q); - const actions = new Actions(ui); + const actions = new Actions(); LOG.silly('action classes initialized'); @@ -85,33 +85,33 @@ window.addEventListener('DOMContentLoaded', () => { } else if (message.member.id == server.memberId) { // this set of messages will include the new messageserverId LOG.debug('not at bottom, jumping down since message was sent by the current user'); - await actions.fetchAndUpdateMessagesRecent(q, server, message.channel); + await actions.fetchAndUpdateMessagesRecent(q, ui, server, message.channel); } }); controller.on('verified', async (server: ClientController) => { (async () => { // update connection info - await actions.fetchAndUpdateConnection(server); + await actions.fetchAndUpdateConnection(ui, server); })(); (async () => { // refresh members cache if (server.members) { await server.fetchMembers(); } else { - await actions.fetchAndUpdateMembers(q, server); + await actions.fetchAndUpdateMembers(q, ui, server); } })(); (async () => { // refresh channels cache if (server.channels) { await server.fetchChannels(); } else { - await actions.fetchAndUpdateChannels(q, server); + await actions.fetchAndUpdateChannels(q, ui, server); } })(); (async () => { // refresh current channel messages if (ui.activeChannel === null) return; if (ui.messagePairs.size == 0) { // fetch messages again since there are no messages yet - await actions.fetchAndUpdateMessagesRecent(q, server, ui.activeChannel); + await actions.fetchAndUpdateMessagesRecent(q, ui, server, ui.activeChannel); } else { // Just update the infinite scroll. NOTE: this will not remove deleted messages ui.messagesAtTop = false; @@ -123,10 +123,10 @@ window.addEventListener('DOMContentLoaded', () => { controller.on('disconnected', (server: ClientController) => { (async () => { - await actions.fetchAndUpdateConnection(server); + await actions.fetchAndUpdateConnection(ui, server); })(); (async () => { - await actions.fetchAndUpdateMembers(q, server); + await actions.fetchAndUpdateMembers(q, ui, server); })(); }); @@ -159,7 +159,7 @@ window.addEventListener('DOMContentLoaded', () => { ui.activeConnection !== null && data.find(change => change.newMember.id === (ui.activeConnection as ConnectionInfo).id) ) { - await actions.fetchAndUpdateConnection(server); + await actions.fetchAndUpdateConnection(ui, server); } });