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

202
public/tabs/essays/essays.html
View file

@ -119,157 +119,83 @@
<!-- #include file="./README.md" -->
<!-- #include file="./new_essay.html" -->
<div id="essays-list"></div>
<script>
const essays_list = document.getElementById("essays-list");
<div
id="essays-list"
data-feed
data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'topics.essays.read' ) !== -1"
data-source="/api/topics/${ document.body.dataset.topic }/events?type=essay&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'essay: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_essay(essay, position = "beforeend") {
const creator = await USERS.get(essay.creator_id);
const existing_element =
document.getElementById(essay.id) ??
document.getElementById(essay.meta?.temp_id ?? "") ??
document.querySelector(`[data-temp_id="${essay.meta?.temp_id ?? ""}"]`);
const essay_datetime = datetime_to_local(essay.timestamps.created);
document.addEventListener("topic_changed", () => {
feed.__reset && feed.__reset();
});
document.addEventListener("user_logged_in", () => {
feed.__reset && feed.__reset();
});
const html_content = `<div class="essay-container" data-creator_id="${creator.id}" data-essay_id="${essay.id}" data-temp_id="${essay.meta?.temp_id ?? ""}">
feed.__target_element = (item) => {
return (
document.querySelector(
`.essay-container[data-essay_id='${item.parent_id}'] > .replies-container`,
) ?? feed
);
};
feed.__context = async (item) => {
const essay_datetime = datetime_to_local(item.timestamps.created);
return {
essay: item,
creator: await USERS.get(item.creator_id),
essay_datetime,
};
};
}
</script>
<template>
<div
id="${context.essay.id}"
class="essay-container"
data-creator_id="${context.creator.id}"
data-essay_id="${context.essay.id}"
data-temp_id="${context.essay.meta?.temp_id ?? ''}"
>
<div class="media-preview-container">
${essay.data?.media?.length ? essay.data.media.map((url) => `<img src="${url}" />`).join("\n") : ""}
${context.essay.data?.media?.length ?
context.essay.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">${essay_datetime.long}</span>
<span class="short">${essay_datetime.short}</span>
<span class="long">${context.essay_datetime.long}</span>
<span class="short">${context.essay_datetime.short}</span>
</div>
</div>
<div class="title-container">${essay.data.title}</div>
<div class="content-container">${htmlify(md_to_html(essay.data.essay))}</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(
`.essay-container[data-essay_id='${essay.parent_id}'] > .replies-container`,
) ?? essays_list;
target_container.insertAdjacentHTML(position, html_content);
}
}
async function append_essays(essays) {
let last_essay_id = essays_list.dataset.last_essay_id ?? "";
for await (const essay of essays) {
// if the last essay is undefined, it becomes this event, otherwise, if this event's id is newer,
// it becomes the latest essay
last_essay_id =
essay.id > last_essay_id && essay.id.indexOf("TEMP") !== 0
? essay.id
: last_essay_id;
// if the last essay has been updated, update the content's dataset to reflect that
if (last_essay_id !== essays_list.dataset.last_essay_id) {
essays_list.dataset.last_essay_id = last_essay_id;
}
await render_essay(essay);
}
const new_essay_forms = document.querySelectorAll(".essay-creation-form");
for (const new_essay_form of new_essay_forms) {
new_essay_form.action =
"/api/topics/" + document.body.dataset?.topic + "/events";
}
essays_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 essay_polling_abort_controller = null;
async function poll_for_new_essays() {
const essays_list = document.getElementById("essays-list");
const topic_id = document.body.dataset.topic;
const last_essay_id = essays_list.dataset.last_essay_id;
if (!topic_id) {
return;
}
const message_polling_url = `/api/topics/${topic_id}/events?type=essay&limit=100&sort=newest&wait=true${last_essay_id ? `&after_id=${last_essay_id}` : ""}`;
essay_polling_abort_controller =
essay_polling_abort_controller || new AbortController();
api.fetch(message_polling_url, {
signal: essay_polling_abort_controller.signal,
})
.then(async (new_events_response) => {
const new_events = (await new_events_response.json()) ?? [];
await append_essays(new_events.reverse(), "afterbegin");
poll_for_new_essays(topic_id);
})
.catch((error) => {
// TODO: poll again? back off?
console.error(error);
});
}
async function load_active_topic_for_essays() {
const 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 essays_list = document.getElementById("essays-list");
if (essay_polling_abort_controller) {
essay_polling_abort_controller.abort();
essay_polling_abort_controller = null;
delete essays_list.dataset.last_essay_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();
essays_list.innerHTML = "";
const events_response = await api.fetch(
`/api/topics/${topic_id}/events?type=essay&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();
await append_essays(events);
poll_for_new_essays();
}
document.addEventListener("topic_changed", load_active_topic_for_essays);
document.addEventListener("user_logged_in", load_active_topic_for_essays);
</script>
<div class="title-container">${context.essay.data.title}</div>
<div class="content-container">
${htmlify(md_to_html(context.essay.data.essay))}
</div>
</div>
</template>
</div>
</div>
</div>
</div>

5
public/tabs/essays/new_essay.html
View file

@ -32,13 +32,14 @@
data-smart="true"
method="POST"
class="essay-creation-form collapsible"
url="/api/topics/${ document.body.dataset.topic }/events"
style="
margin-top: 1rem
width: 100%;
transition: all 0.5s;
"
on_reply="async (essay) => { await render_essay(essay, 'afterbegin'); document.getElementById(essay.id)?.classList.remove('sending'); }"
on_parsed="async (essay) => { await render_essay(essay, 'afterbegin'); document.getElementById(essay.id)?.classList.add('sending'); }"
on_reply="async (event) => { await document.getElementById( 'essays-list' ).__render(event); document.getElementById(event.id)?.classList.remove('sending'); }"
on_parsed="async (event) => { await document.getElementById( 'essays-list' ).__render(event); document.getElementById(event.id)?.classList.add('sending'); }"
>
<input type="hidden" name="type" value="essay" />