fixed notification infinite scrolling

it actually infinitely scrolls :yippee:
This commit is contained in:
ari melody 2025-01-19 22:28:29 +00:00
parent 975984c4bc
commit a9160a3a8f
Signed by: ari
GPG key ID: CF99829C92678188
3 changed files with 22 additions and 12 deletions

View file

@ -149,6 +149,7 @@ export async function getStreamingHealth(host) {
* @param {string} host - The domain of the target server. * @param {string} host - The domain of the target server.
* @param {string} token - The application token. * @param {string} token - The application token.
* @param {string} min_id - If provided, only shows notifications after this ID. * @param {string} min_id - If provided, only shows notifications after this ID.
* @param {string} max_id - If provided, only shows notifications before this ID.
* @param {string} limit - The maximum number of notifications to retrieve (default 40). * @param {string} limit - The maximum number of notifications to retrieve (default 40).
* @param {string} types - A list of notification types to filter to. * @param {string} types - A list of notification types to filter to.
*/ */

View file

@ -8,6 +8,7 @@ import { parsePost } from '$lib/post.js';
import { parseAccount } from '$lib/account.js'; import { parseAccount } from '$lib/account.js';
const prefix = app_name + '_notif_'; const prefix = app_name + '_notif_';
const notification_limit = 40;
export const notifications = writable([]); export const notifications = writable([]);
export const unread_notif_count = writable(load("unread_count")); export const unread_notif_count = writable(load("unread_count"));
@ -41,29 +42,29 @@ function load(name) {
return data ? data : false; return data ? data : false;
} }
let loading;
export async function getNotifications(min_id, max_id) { export async function getNotifications(min_id, max_id) {
if (loading) return; // no spamming!! const new_notifications = await api.getNotifications(
loading = true;
const notif_data = await api.getNotifications(
get(server).host, get(server).host,
get(app).token, get(app).token,
min_id, min_id,
max_id, max_id,
notification_limit,
); );
if (!notif_data) { if (!new_notifications) {
console.error(`Failed to retrieve notifications.`); console.error(`Failed to retrieve notifications.`);
loading = false; loading = false;
return; return;
} }
for (let i in notif_data) { for (let i in new_notifications) {
let notif = notif_data[i]; let notif = new_notifications[i];
notif.accounts = [ await parseAccount(notif.account) ]; notif.accounts = [ await parseAccount(notif.account) ];
if (get(notifications).length > 0) {
let prev = get(notifications)[get(notifications).length - 1]; const _notifications = get(notifications);
if (_notifications.length > 0) {
let prev = _notifications[_notifications.length - 1];
if (notif.type === prev.type) { if (notif.type === prev.type) {
if (prev.status && notif.status && prev.status.id === notif.status.id) { if (prev.status && notif.status && prev.status.id === notif.status.id) {
notifications.update(notifications => { notifications.update(notifications => {
@ -74,8 +75,8 @@ export async function getNotifications(min_id, max_id) {
} }
} }
} }
notif.status = notif.status ? await parsePost(notif.status, 0, false) : null; notif.status = notif.status ? await parsePost(notif.status, 0, false) : null;
notifications.update(notifications => [...notifications, notif]); notifications.update(notifications => [...notifications, notif]);
} }
loading = false;
} }

View file

@ -13,11 +13,19 @@
} }
unread_notif_count.set(0); unread_notif_count.set(0);
}); });
let notif_lock = true; // `true` means "open"
document.addEventListener("scroll", () => { document.addEventListener("scroll", () => {
if (!notif_lock) return;
if ($account && $page.url.pathname !== "/notifications") return; if ($account && $page.url.pathname !== "/notifications") return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) { if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
let max_id = $notifications.length > 0 ? $notifications[$notifications.length - 1].id : null; let max_id = $notifications.length > 0 ? $notifications[$notifications.length - 1].id : null;
getNotifications(null, max_id);
notif_lock = false;
getNotifications(null, max_id).then(() => {
notif_lock = true;
});
} }
}); });
</script> </script>