forked from andyburke/autonomous.contact
feature: essays
fix: multiple rendering of things when sending
This commit is contained in:
parent
376b7fdc24
commit
b6f661c6ec
10 changed files with 537 additions and 60 deletions
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue