michael/cordis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Actions no longer depends on UI for construction

Browse Source
This commit is contained in:
Michael Peters 2021-11-07 17:08:21 -06:00
parent cf39e3d29c
commit f41c9d4663
5 changed files with 47 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
client/webapp/actions.ts
View File

@ -12,46 +12,40 @@ import { Channel } from './data-types';
import Q from './q-module'; import Q from './q-module';
export default class Actions { export default class Actions {
private ui: UI; async fetchAndUpdateConnection(ui: UI, server: ClientController) {
constructor (ui: UI) {
this.ui = ui;
}
async fetchAndUpdateConnection(server: ClientController) {
// Explicitly not using withPotentialError to make this simpler // Explicitly not using withPotentialError to make this simpler
try { try {
let connection = await server.fetchConnectionInfo(); let connection = await server.fetchConnectionInfo();
this.ui.setActiveConnection(server, connection); ui.setActiveConnection(server, connection);
} catch (e) { } catch (e) {
LOG.error('Error updating current connection', 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, { await Util.withPotentialErrorWarnOnCancel(q, {
taskFunc: async () => { 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(); let members = await server.grabMembers();
await this.ui.setMembers(server, members); await ui.setMembers(server, members);
}, },
errorIndicatorAddFunc: async (errorIndicatorElement) => { errorIndicatorAddFunc: async (errorIndicatorElement) => {
await this.ui.setMembersErrorIndicator(server, errorIndicatorElement); await ui.setMembersErrorIndicator(server, errorIndicatorElement);
}, },
errorContainer: q.$('#server-members'), errorContainer: q.$('#server-members'),
errorMessage: 'Error loading members' errorMessage: 'Error loading members'
}); });
} }
async fetchAndUpdateChannels(q: Q, server: ClientController) { async fetchAndUpdateChannels(q: Q, ui: UI, server: ClientController) {
await Util.withPotentialErrorWarnOnCancel(q, { await Util.withPotentialErrorWarnOnCancel(q, {
taskFunc: async () => { 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(); let channels = await server.grabChannels();
await this.ui.setChannels(this, server, channels); await ui.setChannels(this, server, channels);
if (this.ui.activeServer === null || this.ui.activeServer.id !== server.id) return; if (ui.activeServer === null || ui.activeServer.id !== server.id) return;
if (this.ui.activeChannel === null) { if (ui.activeChannel === null) {
// click on the first channel in the list if no channel is active yet // click on the first channel in the list if no channel is active yet
let element = q.$_('#channel-list .channel'); let element = q.$_('#channel-list .channel');
if (element) { if (element) {
@ -60,45 +54,45 @@ export default class Actions {
} }
}, },
errorIndicatorAddFunc: async (errorIndicatorElement) => { errorIndicatorAddFunc: async (errorIndicatorElement) => {
await this.ui.setChannelsErrorIndicator(server, errorIndicatorElement); await ui.setChannelsErrorIndicator(server, errorIndicatorElement);
}, },
errorContainer: q.$('#channel-list'), errorContainer: q.$('#channel-list'),
errorMessage: 'Error fetching channels' 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, { await Util.withPotentialErrorWarnOnCancel(q, {
taskFunc: async () => { taskFunc: async () => {
if (this.ui.activeServer === null || this.ui.activeServer.id !== server.id) return; if (ui.activeServer === null || ui.activeServer.id !== server.id) return;
if (this.ui.activeChannel === null || this.ui.activeChannel.id !== channel.id) return; if (ui.activeChannel === null || ui.activeChannel.id !== channel.id) return;
let messages = await server.grabRecentMessages(channel.id, Globals.MESSAGES_PER_REQUEST); 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) => { errorIndicatorAddFunc: async (errorIndicatorElement) => {
await this.ui.setMessagesErrorIndicator(server, channel, errorIndicatorElement); await ui.setMessagesErrorIndicator(server, channel, errorIndicatorElement);
}, },
errorContainer: q.$('#channel-feed'), errorContainer: q.$('#channel-feed'),
errorMessage: 'Error fetching messages' 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, { await Util.withPotentialErrorWarnOnCancel(q, {
taskFunc: async () => { taskFunc: async () => {
if (this.ui.activeServer === null || this.ui.activeServer.id !== server.id) return; if (ui.activeServer === null || ui.activeServer.id !== server.id) return;
if (this.ui.activeChannel === null || this.ui.activeChannel.id !== channel.id) return; if (ui.activeChannel === null || ui.activeChannel.id !== channel.id) return;
let topPair = this.ui.getTopMessagePair(); let topPair = ui.getTopMessagePair();
if (topPair == null) return; if (topPair == null) return;
let messages = await server.fetchMessagesBefore(channel.id, topPair.message.id, Globals.MESSAGES_PER_REQUEST); let messages = await server.fetchMessagesBefore(channel.id, topPair.message.id, Globals.MESSAGES_PER_REQUEST);
if (messages && messages.length > 0) { if (messages && messages.length > 0) {
await this.ui.addMessagesBefore(server, channel, messages, topPair.message); await ui.addMessagesBefore(server, channel, messages, topPair.message);
} else { } else {
this.ui.messagesAtTop = true; ui.messagesAtTop = true;
} }
}, },
errorIndicatorAddFunc: async (errorIndicatorElement) => { errorIndicatorAddFunc: async (errorIndicatorElement) => {
await this.ui.addMessagesErrorIndicatorBefore(server, channel, errorIndicatorElement); await ui.addMessagesErrorIndicatorBefore(server, channel, errorIndicatorElement);
}, },
errorContainer: q.$('#channel-feed'), errorContainer: q.$('#channel-feed'),
errorClasses: [ 'before' ], 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, { await Util.withPotentialErrorWarnOnCancel(q, {
taskFunc: async () => { taskFunc: async () => {
if (this.ui.activeServer === null || this.ui.activeServer.id !== server.id) return; if (ui.activeServer === null || ui.activeServer.id !== server.id) return;
if (this.ui.activeChannel === null || this.ui.activeChannel.id !== channel.id) return; if (ui.activeChannel === null || ui.activeChannel.id !== channel.id) return;
let bottomPair = this.ui.getBottomMessagePair(); let bottomPair = ui.getBottomMessagePair();
if (bottomPair == null) return; if (bottomPair == null) return;
let messages = await server.fetchMessagesAfter(channel.id, bottomPair.message.id, Globals.MESSAGES_PER_REQUEST); let messages = await server.fetchMessagesAfter(channel.id, bottomPair.message.id, Globals.MESSAGES_PER_REQUEST);
if (messages && messages.length > 0) { if (messages && messages.length > 0) {
await this.ui.addMessagesAfter(server, channel, messages, bottomPair.message); await ui.addMessagesAfter(server, channel, messages, bottomPair.message);
} else { } else {
this.ui.messagesAtBottom = true; ui.messagesAtBottom = true;
} }
}, },
errorIndicatorAddFunc: async (errorIndicatorElement) => { errorIndicatorAddFunc: async (errorIndicatorElement) => {
await this.ui.addMessagesErrorIndicatorAfter(server, channel, errorIndicatorElement); await ui.addMessagesErrorIndicatorAfter(server, channel, errorIndicatorElement);
}, },
errorContainer: q.$('#channel-feed'), errorContainer: q.$('#channel-feed'),
errorClasses: [ 'after' ], errorClasses: [ 'after' ],

2
client/webapp/elements/channel.ts
View File

@ -18,7 +18,7 @@ export default function createChannel(document: Document, q: Q, ui: UI, actions:
element.addEventListener('click', async () => { element.addEventListener('click', async () => {
if (element.classList.contains('active')) return; if (element.classList.contains('active')) return;
await ui.setActiveChannel(server, channel); await ui.setActiveChannel(server, channel);
await actions.fetchAndUpdateMessagesRecent(q, server, channel); await actions.fetchAndUpdateMessagesRecent(q, ui, server, channel);
q.$('#text-input').focus(); q.$('#text-input').focus();
}); });

4
client/webapp/elements/events-infinite-scroll.ts
View File

@ -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 if (!loadingBefore && !ui.messagesAtTop && scrollTop < 600) { // Approaching the unloaded top of the page
// Fetch more messages to add above // Fetch more messages to add above
loadingBefore = true; loadingBefore = true;
await actions.fetchAndUpdateMessagesBefore(q, ui.activeServer, ui.activeChannel); await actions.fetchAndUpdateMessagesBefore(q, ui, ui.activeServer, ui.activeChannel);
loadingBefore = false; loadingBefore = false;
} else if (!loadingAfter && !ui.messagesAtBottom && scrollHeight - clientHeight - scrollTop < 600) { // Approaching the unloaded bottom of the page } else if (!loadingAfter && !ui.messagesAtBottom && scrollHeight - clientHeight - scrollTop < 600) { // Approaching the unloaded bottom of the page
// Fetch more messages to add below // Fetch more messages to add below
loadingAfter = true; loadingAfter = true;
await actions.fetchAndUpdateMessagesAfter(q, ui.activeServer, ui.activeChannel); await actions.fetchAndUpdateMessagesAfter(q, ui, ui.activeServer, ui.activeChannel);
loadingAfter = false; loadingAfter = false;
} }
} }

6
client/webapp/elements/server-list-server.ts
View File

@ -76,7 +76,7 @@ export default function createServerListServer(document: Document, q: Q, ui: UI,
// Connection information // Connection information
(async () => { (async () => {
await actions.fetchAndUpdateConnection(server); await actions.fetchAndUpdateConnection(ui, server);
})(); })();
// Server Channel Name // Server Channel Name
@ -93,12 +93,12 @@ export default function createServerListServer(document: Document, q: Q, ui: UI,
// Server Channel List // Server Channel List
(async () => { (async () => {
await actions.fetchAndUpdateChannels(q, server); await actions.fetchAndUpdateChannels(q, ui, server);
})(); })();
// Server Members // Server Members
(async () => { (async () => {
await actions.fetchAndUpdateMembers(q, server); await actions.fetchAndUpdateMembers(q, ui, server);
})(); })();
}); });

18
client/webapp/script.ts
View File

@ -53,7 +53,7 @@ window.addEventListener('DOMContentLoaded', () => {
const q = new Q(document); const q = new Q(document);
const ui = new UI(document, q); const ui = new UI(document, q);
const actions = new Actions(ui); const actions = new Actions();
LOG.silly('action classes initialized'); LOG.silly('action classes initialized');
@ -85,33 +85,33 @@ window.addEventListener('DOMContentLoaded', () => {
} else if (message.member.id == server.memberId) { } else if (message.member.id == server.memberId) {
// this set of messages will include the new messageserverId // this set of messages will include the new messageserverId
LOG.debug('not at bottom, jumping down since message was sent by the current user'); 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) => { controller.on('verified', async (server: ClientController) => {
(async () => { // update connection info (async () => { // update connection info
await actions.fetchAndUpdateConnection(server); await actions.fetchAndUpdateConnection(ui, server);
})(); })();
(async () => { // refresh members cache (async () => { // refresh members cache
if (server.members) { if (server.members) {
await server.fetchMembers(); await server.fetchMembers();
} else { } else {
await actions.fetchAndUpdateMembers(q, server); await actions.fetchAndUpdateMembers(q, ui, server);
} }
})(); })();
(async () => { // refresh channels cache (async () => { // refresh channels cache
if (server.channels) { if (server.channels) {
await server.fetchChannels(); await server.fetchChannels();
} else { } else {
await actions.fetchAndUpdateChannels(q, server); await actions.fetchAndUpdateChannels(q, ui, server);
} }
})(); })();
(async () => { // refresh current channel messages (async () => { // refresh current channel messages
if (ui.activeChannel === null) return; if (ui.activeChannel === null) return;
if (ui.messagePairs.size == 0) { if (ui.messagePairs.size == 0) {
// fetch messages again since there are no messages yet // 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 { } else {
// Just update the infinite scroll. NOTE: this will not remove deleted messages // Just update the infinite scroll. NOTE: this will not remove deleted messages
ui.messagesAtTop = false; ui.messagesAtTop = false;
@ -123,10 +123,10 @@ window.addEventListener('DOMContentLoaded', () => {
controller.on('disconnected', (server: ClientController) => { controller.on('disconnected', (server: ClientController) => {
(async () => { (async () => {
await actions.fetchAndUpdateConnection(server); await actions.fetchAndUpdateConnection(ui, server);
})(); })();
(async () => { (async () => {
await actions.fetchAndUpdateMembers(q, server); await actions.fetchAndUpdateMembers(q, ui, server);
})(); })();
}); });
@ -159,7 +159,7 @@ window.addEventListener('DOMContentLoaded', () => {
ui.activeConnection !== null && ui.activeConnection !== null &&
data.find(change => change.newMember.id === (ui.activeConnection as ConnectionInfo).id) data.find(change => change.newMember.id === (ui.activeConnection as ConnectionInfo).id)
) { ) {
await actions.fetchAndUpdateConnection(server); await actions.fetchAndUpdateConnection(ui, server);
} }
}); });