feature: essays

fix: multiple rendering of things when sending
This commit is contained in:
Andy Burke 2025-09-24 13:21:39 -07:00
parent 376b7fdc24
commit b6f661c6ec
10 changed files with 537 additions and 60 deletions

View file

@ -148,14 +148,15 @@
<script>
const blurbs_list = document.getElementById("blurbs-list");
async function render_blurb(blurb) {
async function render_blurb(blurb, position = "afterbegin") {
const creator = await USERS.get(blurb.creator_id);
const existing_element =
document.getElementById(blurb.id) ??
document.getElementById(blurb.meta?.temp_id ?? "");
document.getElementById(blurb.meta?.temp_id ?? "") ??
document.querySelector(`[data-temp_id="${blurb.meta?.temp_id ?? ""}"]`);
const blurb_datetime = datetime_to_local(blurb.timestamps.created);
const html_content = `<div class="blurb-container" data-creator_id="${creator.id}" data-blurb_id="${blurb.id}">
const html_content = `<div class="blurb-container" data-creator_id="${creator.id}" data-blurb_id="${blurb.id}" data-temp_id="${blurb.meta?.temp_id ?? ""}">
<div class="media-preview-container">
${blurb.data?.media?.length ? blurb.data.media.map((url) => `<img src="${url}" />`).join("\n") : ""}
</div>
@ -187,26 +188,7 @@
document.querySelector(
`.blurb-container[data-blurb_id='${blurb.parent_id}'] > .replies-container`,
) ?? blurbs_list;
target_container.insertAdjacentHTML("beforeend", html_content);
}
}
async function append_blurbs(blurbs) {
let last_blurb_id = blurbs_list.dataset.last_blurb_id ?? "";
for await (const blurb of blurbs) {
// if the last blurb is undefined, it becomes this event, otherwise, if this event's id is newer,
// it becomes the latest blurb
last_blurb_id =
blurb.id > last_blurb_id && blurb.id.indexOf("TEMP") !== 0
? blurb.id
: last_blurb_id;
// if the last blurb has been updated, update the content's dataset to reflect that
if (last_blurb_id !== blurbs_list.dataset.last_blurb_id) {
blurbs_list.dataset.last_blurb_id = last_blurb_id;
}
await render_blurb(blurb);
target_container.insertAdjacentHTML(position, html_content);
}
const new_blurb_forms = document.querySelectorAll(".blurb-creation-form");
@ -241,7 +223,22 @@
})
.then(async (new_events_response) => {
const new_events = (await new_events_response.json()) ?? [];
await append_blurbs(new_events.reverse());
for await (const blurb of new_events.reverse()) {
await render_blurb(blurb);
}
const last_blurb_id = new_events.reduce((_last_blurb_id, blurb) => {
return blurb.id > _last_blurb_id && blurb.id.indexOf("TEMP") < 0
? blurb.id
: _last_blurb_id;
}, blurb_list.dataset.last_blurb_id ?? "");
// if the last blurb has been updated, update the content's dataset to reflect that
if (last_blurb_id !== blurbs_list.dataset.last_blurb_id) {
blurbs_list.dataset.last_blurb_id = last_blurb_id;
}
poll_for_new_blurbs(topic_id);
})
.catch((error) => {
@ -289,7 +286,10 @@
const events = await events_response.json();
await append_blurbs(events.reverse());
for await (const blurb of events.reverse()) {
await render_blurb(blurb, "afterbegin");
}
poll_for_new_blurbs();
}
document.addEventListener("topic_changed", load_active_topic_for_blurbs);