tim/autonomous.contact
1
0
Fork 0
forked from andyburke/autonomous.contact
Code Pull requests Activity

refactor: rework the frontend to move topics to the top

Browse source
This commit is contained in:
Andy Burke 2025-09-10 19:38:38 -07:00
parent fac8f409f4
commit 11ecd86bb9
14 changed files with 362 additions and 292 deletions
Download patch file Download diff file Expand all files Collapse all files

125
public/index.html
View file

@ -22,10 +22,121 @@
<body>
<!-- #include file="./signup_login_wall.html" -->
<!-- #include file="./tabs/tabs.html" -->
<main>
<!-- #include file="./sidebar/sidebar.html" -->
<!-- #include file="./tabs/tabs.html" -->
</main>
</body>
<script>
document.addEventListener("DOMContentLoaded", () => {
const HASH_EXTRACTOR = /^\#\/topic\/(?<topic_id>[A-Za-z\-]+)\/?(?<view>\w+)/gm;
function extract_url_hash_info() {
HASH_EXTRACTOR.lastIndex = 0; // ugh, need this to have this work on multiple exec calls
const {
groups: { topic_id, view },
} = HASH_EXTRACTOR.exec(window.location.hash ?? "") ?? {
groups: {},
};
console.dir({
url: window.location.href,
hash: window.location.hash,
topic_id,
view,
});
if ( !document.body.dataset.topic || document.body.dataset.topic !== topic_id ) {
const previous = document.body.dataset.topic;
document.body.dataset.topic = topic_id;
console.dir( {
topic_changed: {
detail: {
previous,
topic: topic_id
}
}
});
document.dispatchEvent(new CustomEvent( "topic_changed", {
detail: {
previous,
topic: topic_id
}
}));
}
if ( !document.body.dataset.view || document.body.dataset.view !== view ) {
const previous = document.body.dataset.view;
document.body.dataset.view = view;
console.dir( {
view_changed: {
detail: {
previous,
view
}
}
});
document.dispatchEvent(new CustomEvent( "view_changed", {
detail: {
previous,
view
}
}));
}
}
window.addEventListener("locationchange", extract_url_hash_info);
document.addEventListener( 'topic_changed', ( {detail: { topic }}) => {
if ( !topic ) {
const first_topic_id = TOPICS?.[0]?.id;
if ( first_topic_id ) {
window.location.hash = `/topic/${ first_topic_id }/chat`;
}
}
})
let TOPICS = [];
let last_topic_update = undefined;
let update_topics_timeout = undefined;
const UPDATE_TOPICS_FREQUENCY = 60_000;
async function update_topics() {
const now = new Date();
const time_since_last_update = now - (last_topic_update ?? 0);
if (time_since_last_update < UPDATE_TOPICS_FREQUENCY / 2) {
return;
}
if ( update_topics_timeout ) {
clearTimeout( update_topics_timeout );
update_topics_timeout = undefined;
}
const topics_response = await api.fetch("/api/topics");
if (topics_response.ok) {
const topic_list = document.getElementById("topic-list");
topic_list.innerHTML = "";
const new_topics = await topics_response.json();
const has_differences = TOPICS.length !== new_topics.length || new_topics.some( (topic, index) => {
return ( TOPICS[ index ]?.id !== topic.id || TOPICS[ index ]?.name !== topic.name );
});
if ( has_differences ) {
TOPICS = new_topics;
document.dispatchEvent(new CustomEvent("topics_updated", { detail: { topics: TOPICS } }));
}
last_topic_update = now;
}
update_topics_timeout = setTimeout( update_topics, UPDATE_TOPICS_FREQUENCY);
}
document.addEventListener("DOMContentLoaded", async () => {
/* check if we are logged in */
(async () => {
try {
@ -46,12 +157,20 @@
document.body.dataset.user = JSON.stringify( user );
document.body.dataset.perms = user.permissions.join(":");
document.dispatchEvent(new CustomEvent("user_logged_in", { detail: { user } }));
} catch (error) {
console.dir({
error,
});
}
})();
});
window.addEventListener("locationchange", update_topics);
await update_topics();
extract_url_hash_info();
});
</script>
</html>