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';
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' ],

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 () => {
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();
});

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
// 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;
}
}

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
(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);
})();
});

18
client/webapp/script.ts
View File

@ -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);
}
});