refactor: first pass on getting the client back into working order

(still broken, but loading as a baseline)
This commit is contained in:
Andy Burke 2025-11-08 17:15:26 -08:00
parent a5707e2f81
commit afeb6f75e8
23 changed files with 358 additions and 322 deletions

View file

@ -1,5 +1,5 @@
const HASH_EXTRACTOR = /^\#\/topic\/(?<topic_id>[A-Za-z\-]+)\/?(?<view>\w+)?/gm;
const UPDATE_TOPICS_FREQUENCY = 60_000;
const HASH_EXTRACTOR = /^\#\/(?<view>\w+)(?:\/channel\/(?<channel_id>[A-Za-z\-]+)\/?)?/gm;
const UPDATE_CHANNELS_FREQUENCY = 60_000;
const APP = {
user: undefined,
@ -52,7 +52,7 @@ const APP = {
extract_url_hash_info: async function () {
HASH_EXTRACTOR.lastIndex = 0; // ugh, need this to have this work on multiple exec calls
const {
groups: { topic_id, view },
groups: { view, channel_id },
} = HASH_EXTRACTOR.exec(window.location.hash ?? "") ?? {
groups: {},
};
@ -61,36 +61,36 @@ const APP = {
console.dir({
url: window.location.href,
hash: window.location.hash,
topic_id,
view,
channel_id,
});
*/
if (!document.body.dataset.topic || document.body.dataset.topic !== topic_id) {
const previous = document.body.dataset.topic;
if (!document.body.dataset.channel || document.body.dataset.channel !== channel_id) {
const previous = document.body.dataset.channel;
/*
console.dir({
topic_changed: {
channel_changed: {
detail: {
previous,
topic_id,
channel_id,
},
},
});
*/
document.body.dataset.topic = topic_id;
document.body.dataset.channel = channel_id;
this._emit( 'topic_changed', {
this._emit( 'channel_changed', {
previous,
topic_id
channel_id
});
if (!topic_id) {
const first_topic_id = this.TOPICS.TOPIC_LIST[0]?.id;
if (first_topic_id) {
window.location.hash = `/topic/${first_topic_id}/chat`; // TODO: allow a different default than chat
if (!channel_id) {
const first_channel_id = this.CHANNELS.CHANNEL_LIST[0]?.id;
if (first_channel_id) {
window.location.hash = `/chat/channel/${first_channel_id}`; // TODO: allow a different default than chat
}
}
}
@ -149,7 +149,7 @@ const APP = {
}
window.addEventListener("locationchange", this.extract_url_hash_info.bind( this ));
window.addEventListener("locationchange", this.TOPICS.update );
window.addEventListener("locationchange", this.CHANNELS.update );
this.check_if_logged_in();
this.extract_url_hash_info();
@ -162,7 +162,7 @@ const APP = {
document.body.dataset.user = JSON.stringify(user);
document.body.dataset.perms = user.permissions.join(":");
this.TOPICS.update();
this.CHANNELS.update();
this.user_servers = [];
try {
@ -231,56 +231,56 @@ const APP = {
},
},
TOPICS: {
_last_topic_update: undefined,
_update_topics_timeout: undefined,
TOPIC_LIST: [],
CHANNELS: {
_last_channel_update: undefined,
_update_channels_timeout: undefined,
CHANNEL_LIST: [],
update: async () => {
const now = new Date();
const time_since_last_update = now - (APP.TOPICS._last_topic_update ?? 0);
if (time_since_last_update < UPDATE_TOPICS_FREQUENCY / 2) {
const time_since_last_update = now - (APP.CHANNELS._last_channel_update ?? 0);
if (time_since_last_update < UPDATE_CHANNELS_FREQUENCY / 2) {
return;
}
if (APP.TOPICS._update_topics_timeout) {
clearTimeout(APP.TOPICS._update_topics_timeout);
APP.TOPICS._update_topics_timeout = undefined;
if (APP.CHANNELS._update_channels_timeout) {
clearTimeout(APP.CHANNELS._update_channels_timeout);
APP.CHANNELS._update_channels_timeout = undefined;
}
try {
const topics_response = await api.fetch("/api/topics");
if (topics_response.ok) {
const new_topics = await topics_response.json();
const channels_response = await api.fetch("/api/channels");
if (channels_response.ok) {
const new_channels = await channels_response.json();
const has_differences =
APP.TOPICS.TOPIC_LIST.length !== new_topics.length ||
new_topics.some((topic, index) => {
APP.CHANNELS.CHANNEL_LIST.length !== new_channels.length ||
new_channels.some((channel, index) => {
return (
APP.TOPICS.TOPIC_LIST[index]?.id !== topic.id ||
APP.TOPICS.TOPIC_LIST[index]?.name !== topic.name
APP.CHANNELS.CHANNEL_LIST[index]?.id !== channel.id ||
APP.CHANNELS.CHANNEL_LIST[index]?.name !== channel.name
);
});
if (has_differences) {
APP.TOPICS.TOPIC_LIST = [...new_topics];
APP.CHANNELS.CHANNEL_LIST = [...new_channels];
APP._emit( 'topics_updated', {
topics: APP.TOPICS.TOPIC_LIST
APP._emit( 'channels_updated', {
channels: APP.CHANNELS.CHANNEL_LIST
});
}
APP.TOPICS._last_topic_update = now;
APP.CHANNELS._last_channel_update = now;
}
} catch (error) {
console.error(error);
}
APP.TOPICS._update_topics_timeout = setTimeout(
APP.TOPICS.update,
UPDATE_TOPICS_FREQUENCY,
APP.CHANNELS._update_channels_timeout = setTimeout(
APP.CHANNELS.update,
UPDATE_CHANNELS_FREQUENCY,
);
// now that we have topics, make sure our url is all good
// now that we have channels, make sure our url is all good
APP.extract_url_hash_info();
},
},