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

feature/refactor: smartfeeds to reduce the client complexity

Browse source
This commit is contained in:
Andy Burke 2025-10-10 16:39:44 -07:00
parent 46090d944a
commit f6cd05beac
19 changed files with 782 additions and 800 deletions
Download patch file Download diff file Expand all files Collapse all files

182
public/tabs/blurbs/blurbs.html
View file

@ -150,158 +150,66 @@
<!-- #include file="./new_blurb.html" -->
<div id="blurbs-list"></div>
<script>
const blurbs_list = document.getElementById("blurbs-list");
<div
id="blurbs-list"
data-feed
data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'topics.blurbs.read' ) !== -1"
data-source="/api/topics/${ document.body.dataset.topic }/events?type=blurb&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'blurb:able-able-able-able-able-able-able-able-able-able' }"
data-longpolling="true"
data-reverse="true"
data-insert="prepend"
data-autoscroll="true"
>
<script>
{
const feed = document.currentScript.closest("[data-feed]");
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.querySelector(`[data-temp_id="${blurb.meta?.temp_id ?? ""}"]`);
const blurb_datetime = datetime_to_local(blurb.timestamps.created);
document.addEventListener("topic_changed", () => { feed.__reset && feed.__reset(); });
document.addEventListener("user_logged_in", () => { feed.__reset && feed.__reset(); });
const html_content = `<div class="blurb-container" data-creator_id="${creator.id}" data-blurb_id="${blurb.id}" data-temp_id="${blurb.meta?.temp_id ?? ""}">
feed.__target_element = (item) => {
return (
document.querySelector(
`.blurb-container[data-blurb_id='${item.parent_id}'] > .replies-container`,
) ?? feed
);
};
feed.__context = async (item) => {
const blurb_datetime = datetime_to_local(item.timestamps.created);
return {
blurb: item,
creator: await USERS.get(item.creator_id),
blurb_datetime
};
};
}
</script>
<template>
<div id="${ context.blurb.id }" class="blurb-container" data-creator_id="${context.creator.id}" data-blurb_id="${context.blurb.id}" data-temp_id="${context.blurb.meta?.temp_id ?? ""}">
<div class="media-preview-container">
${blurb.data?.media?.length ? blurb.data.media.map((url) => `<img src="${url}" />`).join("\n") : ""}
${context.blurb.data?.media?.length ? context.blurb.data.media.map(function(url) { return `<img src='${url}' />`; }).join('\n') : ''}
</div>
<div class="info-container">
<div class="avatar-container">
<img src="${creator.meta?.avatar ?? "/images/default_avatar.gif"}" alt="user avatar" />
<img src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}" alt="user avatar" />
</div>
<div class="username-container">
<span class="username">${creator.username}</span>
<span class="username">${context.creator.username}</span>
</div>
<div class="datetime-container">
<span class="long">${blurb_datetime.long}</span>
<span class="short">${blurb_datetime.short}</span>
<span class="long">${context.blurb_datetime.long}</span>
<span class="short">${context.blurb_datetime.short}</span>
</div>
</div>
<div class="content-container">${md_to_html(blurb.data.blurb)}</div>
<div class="content-container">${htmlify(md_to_html(context.blurb.data.blurb))}</div>
<!-- #include file="./new_blurb.html" -->
<div class="replies-container"></div>
</div>`;
if (existing_element) {
const template = document.createElement("template");
template.innerHTML = html_content;
existing_element.replaceWith(template.content.firstChild);
existing_element.classList.remove("sending");
} else {
const target_container =
document.querySelector(
`.blurb-container[data-blurb_id='${blurb.parent_id}'] > .replies-container`,
) ?? blurbs_list;
target_container.insertAdjacentHTML(position, html_content);
}
const new_blurb_forms = document.querySelectorAll(".blurb-creation-form");
for (const new_blurb_form of new_blurb_forms) {
new_blurb_form.action =
"/api/topics/" + document.body.dataset?.topic + "/events";
}
blurbs_list.scrollTop = 0;
}
// TODO: we need some abortcontroller handling here or something
// similar for when we change topics, this is the most basic
// first pass outline
let blurb_polling_abort_controller = null;
async function poll_for_new_blurbs() {
const blurbs_list = document.getElementById("blurbs-list");
const topic_id = document.body.dataset.topic;
const last_blurb_id = blurbs_list.dataset.last_blurb_id;
if (!topic_id) {
return;
}
const message_polling_url = `/api/topics/${topic_id}/events?type=blurb&limit=100&sort=newest&wait=true${last_blurb_id ? `&after_id=${last_blurb_id}` : ""}`;
blurb_polling_abort_controller =
blurb_polling_abort_controller || new AbortController();
api.fetch(message_polling_url, {
signal: blurb_polling_abort_controller.signal,
})
.then(async (new_events_response) => {
const new_events = (await new_events_response.json()) ?? [];
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;
}, blurbs_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) => {
// TODO: poll again? back off?
console.error(error);
});
}
async function load_active_topic_for_blurbs(event) {
const topic_id = event?.detail?.topic_id ?? document.body.dataset.topic;
if (!topic_id) return;
const user = document.body.dataset.user
? JSON.parse(document.body.dataset.user)
: null;
if (!user) return;
const blurbs_list = document.getElementById("blurbs-list");
if (blurb_polling_abort_controller) {
blurb_polling_abort_controller.abort();
blurb_polling_abort_controller = null;
delete blurbs_list.dataset.last_blurb_id;
}
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 topic = await topic_response.json();
blurbs_list.innerHTML = "";
const events_response = await api.fetch(
`/api/topics/${topic_id}/events?type=blurb&limit=100&sort=newest`,
);
if (!events_response.ok) {
const error = await events_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const events = await events_response.json();
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);
document.addEventListener("user_logged_in", load_active_topic_for_blurbs);
</script>
</div>
</template>
</div>
</div>
</div>
</div>