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

234
public/tabs/forum/forum.html
View file

@ -103,12 +103,12 @@
.post-container .info-container .datetime-container .long {
font-size: x-small;
text-transform: uppercase;
visibility: hidden;
display: none;
}
.post-container .info-container .datetime-container .short {
font-size: xx-small;
visibility: hidden;
display: none;
}
.post-container .subject-container {
@ -149,165 +149,89 @@
<div class="tab-content forum-container">
<!-- #include file="./README.md" -->
<div id="forum-posts" class="container">
<div id="forum-posts-list"></div>
<div
id="posts-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=post&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'post:able-able-able-able-able-able-able-able-able-able' }"
data-longpolling="true"
data-reverse="true"
data-insert="prepend"
data-autoscroll="true"
>
<script>
const forum_posts_list = document.getElementById("forum-posts-list");
{
const feed = document.currentScript.closest("[data-feed]");
async function render_post(post) {
const creator = await USERS.get(post.creator_id);
const existing_element =
document.getElementById(`post-${post.id.substring(0, 49)}`) ??
document.getElementById(`post-${post.meta?.temp_id}`);
const post_datetime = datetime_to_local(post.timestamps.created);
document.addEventListener("topic_changed", () => {
feed.__reset && feed.__reset();
});
document.addEventListener("user_logged_in", () => {
feed.__reset && feed.__reset();
});
const html_content = `<div class="post-container" data-creator_id="${creator.id}" data-post_id="${post.id}">
<div class="expand-toggle-container">
<label>
<input type="checkbox" name="expanded"/><i class="icon plus"></i><i class="icon minus"></i>
</label>
</div>
<div class="media-preview-container">
<img src="/images/placeholders/${String(post_datetime.ms % 10).padStart(2, "0")}.svg" />
</div>
<div class="info-container">
<div class="avatar-container">
<img src="${creator.meta?.avatar ?? "/images/default_avatar.gif"}" alt="user avatar" />
</div>
<div class="username-container">
<span class="username">${creator.username}</span>
</div>
<div class="datetime-container">
<span class="long">${post_datetime.long}</span>
<span class="short">${post_datetime.short}</span>
</div>
</div>
<div class="subject-container">${post.data.subject}</div>
<div class="content-container">${htmlify(post.data.content)}</div>
<!-- #include file="./new_post.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 =
feed.__target_element = (item) => {
return (
document.querySelector(
`.post-container[data-post_id='${post.parent_id}'] > .replies-container`,
) ?? forum_posts_list;
target_container.insertAdjacentHTML("beforeend", html_content);
}
`.post-container[data-post_id='${item.parent_id}'] > .replies-container`,
) ?? feed
);
};
feed.__context = async (item) => {
const post_datetime = datetime_to_local(item.timestamps.created);
return {
post: item,
creator: await USERS.get(item.creator_id),
post_datetime,
};
};
}
async function append_posts(posts) {
let last_post_id = forum_posts_list.dataset.last_post_id ?? "";
for await (const post of posts) {
// if the last post is undefined, it becomes this event, otherwise, if this event's id is newer,
// it becomes the latest post
last_post_id =
post.id > last_post_id && post.id.indexOf("TEMP") !== 0
? post.id
: last_post_id;
// if the last post has been updated, update the content's dataset to reflect that
if (last_post_id !== forum_posts_list.dataset.last_post_id) {
forum_posts_list.dataset.last_post_id = last_post_id;
}
await render_post(post);
}
const new_post_forms = document.querySelectorAll(".post-creation-form");
for (const new_post_form of new_post_forms) {
new_post_form.action =
"/api/topics/" + document.body.dataset?.topic + "/events";
}
forum_posts_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 post_polling_abort_controller = null;
async function poll_for_new_posts() {
const forum_posts_list = document.getElementById("forum-posts-list");
const topic_id = document.body.dataset.topic;
const last_post_id = forum_posts_list.dataset.last_post_id;
if (!topic_id) {
return;
}
const message_polling_url = `/api/topics/${topic_id}/events?type=post&limit=100&sort=newest&wait=true${last_post_id ? `&after_id=${last_post_id}` : ""}`;
post_polling_abort_controller =
post_polling_abort_controller || new AbortController();
api.fetch(message_polling_url, {
signal: post_polling_abort_controller.signal,
})
.then(async (new_events_response) => {
const new_events = (await new_events_response.json()) ?? [];
await append_posts(new_events.reverse());
poll_for_new_posts(topic_id);
})
.catch((error) => {
// TODO: poll again? back off?
console.error(error);
});
}
async function load_active_topic_for_forum() {
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 forum_posts_list = document.getElementById("forum-posts-list");
if (post_polling_abort_controller) {
post_polling_abort_controller.abort();
post_polling_abort_controller = null;
delete forum_posts_list.dataset.last_post_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();
forum_posts_list.innerHTML = "";
const events_response = await api.fetch(
`/api/topics/${topic_id}/events?type=post&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_posts(events.reverse());
poll_for_new_posts();
}
document.addEventListener("topic_changed", load_active_topic_for_forum);
document.addEventListener("user_logged_in", load_active_topic_for_forum);
</script>
<template>
<div
id="${context.post.id}"
class="post-container"
data-creator_id="${context.creator.id}"
data-post_id="${context.post.id}"
>
<div class="expand-toggle-container">
<label>
<input type="checkbox" name="expanded" /><i class="icon plus"></i
><i class="icon minus"></i>
</label>
</div>
<div class="media-preview-container">
<img
src="/images/placeholders/${String((context.post_datetime.ms % 9) + 1).padStart(2, '0')}.svg"
/>
</div>
<div class="info-container">
<div class="avatar-container">
<img
src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
alt="user avatar"
/>
</div>
<div class="username-container">
<span class="username">${context.creator.username}</span>
</div>
<div class="datetime-container">
<span class="long">${context.post_datetime.long}</span>
<span class="short">${context.post_datetime.short}</span>
</div>
</div>
<div class="subject-container">${context.post.data.subject}</div>
<div class="content-container">
${htmlify(md_to_html(context.post.data.content))}
</div>
<!-- #include file="./new_post.html" -->
<div class="replies-container"></div>
</div>
</template>
</div>
<!-- #include file="./new_post.html" -->