andyburke/autonomous.contact
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: some work to get initial page load working a bit better

Browse source
This commit is contained in:
Andy Burke 2025-07-04 13:08:00 -07:00
parent 200b89954b
commit f276fe74da
3 changed files with 98 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

8
public/tabs/tabs.html
View file

@ -2,7 +2,13 @@
window.addEventListener("locationchange", () => {
const hash = window.location.hash?.slice(1);
if (hash) {
const target_tab = document.querySelector(`[data-hash="${hash}"]`);
const target_tab_url = hash.slice(0, hash.slice(1).indexOf("/"));
const target_tab = document.querySelector(`[data-hash="${target_tab_url}"]`);
console.dir({
hash,
target_tab_url,
target_tab,
});
if (target_tab) {
target_tab.click();
}

98
public/tabs/talk.html
View file

@ -193,7 +193,22 @@
async function append_room_events(events) {
const room_chat_content = document.getElementById("room-chat-content");
const users = {};
let last_message_id = undefined;
for (const event of events) {
// if the last message is undefined, it becomes this event, otherwise, if this event's id is newer,
// it becomes the latest message
last_message_id =
last_message_id === undefined
? event.id
: event.id > last_message_id
? event.id
: last_message_id;
// if the last message has been updated, update the content's dataset to reflect that
if (last_message_id !== room_chat_content.dataset.last_message_id) {
room_chat_content.dataset.last_message_id = last_message_id;
}
users[event.creator_id] =
users[event.creator_id] ??
(await api.fetch(`/users/${event.creator_id}`));
@ -203,13 +218,11 @@
render_text_event(event, users[event.creator_id]),
);
}
console.dir({
users,
events,
room_chat_content,
});
}
// TODO: we need some abortcontroller handling here or something
// similar for when we change rooms, this is the most basic
// first pass outline
let room_polling_request_abort_controller = null;
async function poll_for_new_events() {
const room_chat_content = document.getElementById("room-chat-content");
@ -222,7 +235,6 @@
signal: room_polling_request_abort_controller.signal,
})
.then((new_events) => {
const room;
append_room_events(new_events);
poll_for_new_events(room_id);
})
@ -236,7 +248,7 @@
if (room_polling_request_abort_controller) {
room_polling_request_abort_controller.abort();
room_polling_request_abort_controller = null;
last_message_id = null;
delete room_chat_content.dataset.last_message_id;
}
const room_response = await api.fetch(`/rooms/${room_id}`);
@ -249,8 +261,17 @@
const room = await room_response.json();
const room_chat_content = document.getElementById("room-chat-content");
room_chat_content.dataset.room_id = room.id;
room_chat_content.innerHTML = "";
const room_selectors = document.querySelectorAll("li.room");
for (const room_selector of room_selectors) {
room_selector.classList.remove("active");
if (room_selector.id === `room-selector-${room_id}`) {
room_selector.classList.add("active");
}
}
const events_response = await api.fetch(
`/rooms/${room_id}/events?type=chat&limit=100&sort=newest`,
);
@ -265,32 +286,17 @@
append_room_events(events);
last_message_id = events.length ? events[events.length - 1].id : null;
room_polling_request_abort_controller = new AbortController();
poll_for_new_events(room_id);
}
// TODO: one place to handle switching rooms
// TODO: load events when we switch rooms and clear and update the chat
// TODO: try to select immediate siblings from the same user and hide avatars
function check_for_room_in_url() {
const hash = window.location.hash;
const room_id =
hash.indexOf("#/talk/room/") === 0 ? hash.substring(12) : "";
const room_chat_container = document.getElementById("room-chat-container");
room_chat_container.dataset.room_id = room_id;
const room_selectors = document.querySelectorAll("li.room");
for (const room_selector of room_selectors) {
room_selector.classList.remove("active");
let last_room_update = undefined;
async function update_chat_rooms() {
const now = new Date();
const time_since_last_update = now - (last_room_update ?? 0);
if (time_since_last_update < 5_000) {
return;
}
const room_selector = document.getElementById(`room-selector-${room_id}`);
room_selector.classList.add("active");
load_room(room_id);
}
window.addEventListener("locationchange", check_for_room_in_url);
document.addEventListener("DOMContentLoaded", async () => {
const rooms_response = await api.fetch("/rooms");
if (rooms_response.ok) {
const room_list = document.getElementById("room-list");
@ -302,8 +308,44 @@
`<li id="room-selector-${room.id}" class="room"><a href="#/talk/room/${room.id}">${room.name}</a></li>`,
);
}
last_room_update = now;
}
}
window.addEventListener("locationchange", update_chat_rooms);
function check_for_room_in_url() {
const hash = window.location.hash;
const talk_in_url = hash.indexOf("#/talk") === 0;
if (!talk_in_url) {
return;
}
const first_room_id = document.querySelector("li.room")?.id.substring(14);
// #/talk/room/{room_id}
// ^ 12
const room_id = hash.substring(12) || first_room_id;
if (!room_id) {
alert("failed to load chat room!");
return;
}
const room_chat_container = document.getElementById("room-chat-container");
room_chat_container.dataset.room_id = room_id;
load_room(room_id);
}
window.addEventListener("locationchange", check_for_room_in_url);
document.addEventListener("DOMContentLoaded", async () => {
await update_chat_rooms();
check_for_room_in_url();
});
// TODO: this should be moved to be handled by a smartform
document.addEventListener("DOMContentLoaded", async () => {
const chat_input = document.getElementById("room-chat-input");
async function on_send_message(event) {
event.preventDefault();