forked from andyburke/autonomous.contact
refactor: zones => topics
This commit is contained in:
parent
20a5d1bc88
commit
fac8f409f4
26 changed files with 470 additions and 469 deletions
|
|
@ -257,7 +257,7 @@ let time_tick_tock_class = "time-tock";
|
|||
|
||||
let last_creator_id = null;
|
||||
let user_tick_tock_class = "user-tock";
|
||||
function render_text_event(zone_chat_content, event, creator, existing_element) {
|
||||
function render_text_event(topic_chat_content, event, creator, existing_element) {
|
||||
const event_datetime = datetime_to_local(event.timestamps.created);
|
||||
|
||||
if (event_datetime.value - last_event_datetime_value > time_tick_tock_timeout) {
|
||||
|
|
@ -307,31 +307,31 @@ function render_text_event(zone_chat_content, event, creator, existing_element)
|
|||
template.innerHTML = html_content;
|
||||
existing_element.replaceWith(template.content.firstChild);
|
||||
} else {
|
||||
zone_chat_content.insertAdjacentHTML("beforeend", html_content);
|
||||
topic_chat_content.insertAdjacentHTML("beforeend", html_content);
|
||||
}
|
||||
}
|
||||
|
||||
async function get_new_zone_element() {
|
||||
const existing_new_zone_element = document.getElementById("new-zone");
|
||||
if (existing_new_zone_element) {
|
||||
return existing_new_zone_element;
|
||||
async function get_new_topic_element() {
|
||||
const existing_new_topic_element = document.getElementById("new-topic");
|
||||
if (existing_new_topic_element) {
|
||||
return existing_new_topic_element;
|
||||
}
|
||||
|
||||
const zone_list = document.getElementById("zone-list");
|
||||
zone_list.insertAdjacentHTML(
|
||||
const topic_list = document.getElementById("topic-list");
|
||||
topic_list.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<li id="new-zone" class="zone"><a href="" contenteditable="true">new zone</a></li>`,
|
||||
`<li id="new-topic" class="topic"><a href="" contenteditable="true">new topic</a></li>`,
|
||||
);
|
||||
await new Promise((resolve) => setTimeout(resolve, 1));
|
||||
|
||||
const new_zone_element = document.getElementById("new-zone");
|
||||
return new_zone_element;
|
||||
const new_topic_element = document.getElementById("new-topic");
|
||||
return new_topic_element;
|
||||
}
|
||||
|
||||
const users = {};
|
||||
async function append_zone_events(events) {
|
||||
const zone_chat_content = document.getElementById("zone-chat-content");
|
||||
let last_message_id = zone_chat_content.dataset.last_message_id ?? "";
|
||||
async function append_topic_events(events) {
|
||||
const topic_chat_content = document.getElementById("topic-chat-content");
|
||||
let last_message_id = topic_chat_content.dataset.last_message_id ?? "";
|
||||
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
|
||||
|
|
@ -341,8 +341,8 @@ async function append_zone_events(events) {
|
|||
: last_message_id;
|
||||
|
||||
// if the last message has been updated, update the content's dataset to reflect that
|
||||
if (last_message_id !== zone_chat_content.dataset.last_message_id) {
|
||||
zone_chat_content.dataset.last_message_id = last_message_id;
|
||||
if (last_message_id !== topic_chat_content.dataset.last_message_id) {
|
||||
topic_chat_content.dataset.last_message_id = last_message_id;
|
||||
}
|
||||
|
||||
users[event.creator_id] =
|
||||
|
|
@ -354,37 +354,37 @@ async function append_zone_events(events) {
|
|||
(event.meta?.temp_id
|
||||
? document.getElementById(`chat-${event.meta.temp_id}`)
|
||||
: undefined);
|
||||
render_text_event(zone_chat_content, event, users[event.creator_id], existing_element);
|
||||
render_text_event(topic_chat_content, event, users[event.creator_id], existing_element);
|
||||
}
|
||||
|
||||
zone_chat_content.scrollTop = zone_chat_content.scrollHeight;
|
||||
topic_chat_content.scrollTop = topic_chat_content.scrollHeight;
|
||||
}
|
||||
|
||||
// TODO: we need some abortcontroller handling here or something
|
||||
// similar for when we change zones, this is the most basic
|
||||
// similar for when we change topics, this is the most basic
|
||||
// first pass outline
|
||||
let zone_polling_request_abort_controller = null;
|
||||
let topic_polling_request_abort_controller = null;
|
||||
async function poll_for_new_events() {
|
||||
const zone_chat_content = document.getElementById("zone-chat-content");
|
||||
const zone_id = zone_chat_content.dataset.zone_id;
|
||||
const last_message_id = zone_chat_content.dataset.last_message_id;
|
||||
const topic_chat_content = document.getElementById("topic-chat-content");
|
||||
const topic_id = topic_chat_content.dataset.topic_id;
|
||||
const last_message_id = topic_chat_content.dataset.last_message_id;
|
||||
|
||||
if (!zone_id) {
|
||||
if (!topic_id) {
|
||||
return;
|
||||
}
|
||||
|
||||
const message_polling_url = `/api/zones/${zone_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
|
||||
const message_polling_url = `/api/topics/${topic_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
|
||||
|
||||
zone_polling_request_abort_controller =
|
||||
zone_polling_request_abort_controller || new AbortController();
|
||||
topic_polling_request_abort_controller =
|
||||
topic_polling_request_abort_controller || new AbortController();
|
||||
|
||||
api.fetch(message_polling_url, {
|
||||
signal: zone_polling_request_abort_controller.signal,
|
||||
signal: topic_polling_request_abort_controller.signal,
|
||||
})
|
||||
.then(async (new_events_response) => {
|
||||
const new_events = ((await new_events_response.json()) ?? []).reverse();
|
||||
await append_zone_events(new_events.toReversed());
|
||||
poll_for_new_events(zone_id);
|
||||
await append_topic_events(new_events.toReversed());
|
||||
poll_for_new_events(topic_id);
|
||||
})
|
||||
.catch((error) => {
|
||||
// TODO: poll again? back off?
|
||||
|
|
@ -392,37 +392,37 @@ async function poll_for_new_events() {
|
|||
});
|
||||
}
|
||||
|
||||
async function load_zone(zone_id) {
|
||||
const zone_chat_content = document.getElementById("zone-chat-content");
|
||||
async function load_topic(topic_id) {
|
||||
const topic_chat_content = document.getElementById("topic-chat-content");
|
||||
|
||||
if (zone_polling_request_abort_controller) {
|
||||
zone_polling_request_abort_controller.abort();
|
||||
zone_polling_request_abort_controller = null;
|
||||
delete zone_chat_content.dataset.last_message_id;
|
||||
if (topic_polling_request_abort_controller) {
|
||||
topic_polling_request_abort_controller.abort();
|
||||
topic_polling_request_abort_controller = null;
|
||||
delete topic_chat_content.dataset.last_message_id;
|
||||
}
|
||||
|
||||
const zone_response = await api.fetch(`/api/zones/${zone_id}`);
|
||||
if (!zone_response.ok) {
|
||||
const error = await zone_response.json();
|
||||
const topic_response = await api.fetch(`/api/topics/${topic_id}`);
|
||||
if (!topic_response.ok) {
|
||||
const error = await topic_response.json();
|
||||
alert(error.message ?? JSON.stringify(error));
|
||||
return;
|
||||
}
|
||||
|
||||
const zone = await zone_response.json();
|
||||
const topic = await topic_response.json();
|
||||
|
||||
zone_chat_content.dataset.zone_id = zone.id;
|
||||
zone_chat_content.innerHTML = "";
|
||||
topic_chat_content.dataset.topic_id = topic.id;
|
||||
topic_chat_content.innerHTML = "";
|
||||
|
||||
const zone_selectors = document.querySelectorAll("li.zone");
|
||||
for (const zone_selector of zone_selectors) {
|
||||
zone_selector.classList.remove("active");
|
||||
if (zone_selector.id === `zone-selector-${zone_id}`) {
|
||||
zone_selector.classList.add("active");
|
||||
const topic_selectors = document.querySelectorAll("li.topic");
|
||||
for (const topic_selector of topic_selectors) {
|
||||
topic_selector.classList.remove("active");
|
||||
if (topic_selector.id === `topic-selector-${topic_id}`) {
|
||||
topic_selector.classList.add("active");
|
||||
}
|
||||
}
|
||||
|
||||
const events_response = await api.fetch(
|
||||
`/api/zones/${zone_id}/events?type=chat&limit=100&sort=newest`,
|
||||
`/api/topics/${topic_id}/events?type=chat&limit=100&sort=newest`,
|
||||
);
|
||||
if (!events_response.ok) {
|
||||
const error = await events_response.json();
|
||||
|
|
@ -432,36 +432,36 @@ async function load_zone(zone_id) {
|
|||
|
||||
const events = (await events_response.json()).reverse();
|
||||
|
||||
await append_zone_events(events);
|
||||
poll_for_new_events(zone_id);
|
||||
await append_topic_events(events);
|
||||
poll_for_new_events(topic_id);
|
||||
}
|
||||
|
||||
let last_zone_update = undefined;
|
||||
async function update_chat_zones() {
|
||||
let last_topic_update = undefined;
|
||||
async function update_chat_topics() {
|
||||
const now = new Date();
|
||||
const time_since_last_update = now - (last_zone_update ?? 0);
|
||||
const time_since_last_update = now - (last_topic_update ?? 0);
|
||||
if (time_since_last_update < 5_000) {
|
||||
return;
|
||||
}
|
||||
|
||||
const zones_response = await api.fetch("/api/zones");
|
||||
if (zones_response.ok) {
|
||||
const zone_list = document.getElementById("zone-list");
|
||||
zone_list.innerHTML = "";
|
||||
const zones = await zones_response.json();
|
||||
for (const zone of zones) {
|
||||
zone_list.insertAdjacentHTML(
|
||||
const topics_response = await api.fetch("/api/topics");
|
||||
if (topics_response.ok) {
|
||||
const topic_list = document.getElementById("topic-list");
|
||||
topic_list.innerHTML = "";
|
||||
const topics = await topics_response.json();
|
||||
for (const topic of topics) {
|
||||
topic_list.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<li id="zone-selector-${zone.id}" class="zone"><a href="#/chat/zone/${zone.id}">${zone.name}</a></li>`,
|
||||
`<li id="topic-selector-${topic.id}" class="topic"><a href="#/chat/topic/${topic.id}">${topic.name}</a></li>`,
|
||||
);
|
||||
}
|
||||
|
||||
last_zone_update = now;
|
||||
last_topic_update = now;
|
||||
}
|
||||
}
|
||||
window.addEventListener("locationchange", update_chat_zones);
|
||||
window.addEventListener("locationchange", update_chat_topics);
|
||||
|
||||
function check_for_zone_in_url() {
|
||||
function check_for_topic_in_url() {
|
||||
const user_json = document.body.dataset.user;
|
||||
if (!user_json) {
|
||||
return;
|
||||
|
|
@ -473,28 +473,28 @@ function check_for_zone_in_url() {
|
|||
return;
|
||||
}
|
||||
|
||||
const first_zone_id = document.querySelector("li.zone")?.id.substring(14);
|
||||
const first_topic_id = document.querySelector("li.topic")?.id.substring(14);
|
||||
|
||||
// #/chat/zone/{zone_id}
|
||||
// #/chat/topic/{topic_id}
|
||||
// ^ 12
|
||||
const zone_id = hash.substring(12) || first_zone_id;
|
||||
const topic_id = hash.substring(12) || first_topic_id;
|
||||
|
||||
if (!zone_id) {
|
||||
setTimeout(check_for_zone_in_url, 100);
|
||||
if (!topic_id) {
|
||||
setTimeout(check_for_topic_in_url, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
const zone_chat_container = document.getElementById("zone-chat-container");
|
||||
const topic_chat_container = document.getElementById("topic-chat-container");
|
||||
|
||||
if (zone_chat_container.dataset.zone_id !== zone_id) {
|
||||
window.location.hash = `/chat/zone/${zone_id}`;
|
||||
zone_chat_container.dataset.zone_id = zone_id;
|
||||
load_zone(zone_id);
|
||||
if (topic_chat_container.dataset.topic_id !== topic_id) {
|
||||
window.location.hash = `/chat/topic/${topic_id}`;
|
||||
topic_chat_container.dataset.topic_id = topic_id;
|
||||
load_topic(topic_id);
|
||||
}
|
||||
}
|
||||
window.addEventListener("locationchange", check_for_zone_in_url);
|
||||
window.addEventListener("locationchange", check_for_topic_in_url);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
await update_chat_zones();
|
||||
check_for_zone_in_url();
|
||||
await update_chat_topics();
|
||||
check_for_topic_in_url();
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue