cleaned up notifications functionality, fixed infinite scroll loop

src/lib/api.js

@@ -152,11 +152,12 @@ export async function getStreamingHealth(host) {
  * @param {string} limit - The maximum number of notifications to retrieve (default 40).
  * @param {string} types - A list of notification types to filter to.
  */
-export async function getNotifications(host, token, min_id, limit, types) {
+export async function getNotifications(host, token, min_id, max_id, limit, types) {
     let url = `https://${host}/api/v1/notifications`;
 
     let params = new URLSearchParams();
     if (min_id) params.append("min_id", min_id);
+    if (max_id) params.append("max_id", max_id);
     if (limit) params.append("limit", limit);
     if (types) params.append("types", types.join(','));
     const params_string = params.toString();

src/lib/notifications.js

@@ -42,18 +42,15 @@ function load(name) {
 }
 
 let loading;
-export async function getNotifications(clean) {
+export async function getNotifications(min_id, max_id) {
     if (loading) return; // no spamming!!
     loading = true;
 
-    let last_id = false;
-    if (!clean && get(notifications).length > 0)
-        last_id = get(notifications)[get(notifications).length - 1].id;
-
     const notif_data = await api.getNotifications(
         get(server).host,
         get(app).token,
-        last_id
+        min_id,
+        max_id,
     );
 
     if (!notif_data) {
@@ -62,8 +59,6 @@ export async function getNotifications(clean) {
         return;
     }
 
-    if (clean) notifications.set([]);
-
     for (let i in notif_data) {
         let notif = notif_data[i];
         notif.accounts = [ await parseAccount(notif.account) ];
@@ -82,7 +77,5 @@ export async function getNotifications(clean) {
         notif.status = notif.status ? await parsePost(notif.status, 0, false) : null;
         notifications.update(notifications => [...notifications, notif]);
     }
-    if (!last_id) last_read_notif_id.set(notif_data[0].id);
-    if (!last_id) unread_notif_count.set(0);
     loading = false;
 }

src/lib/ui/Navigation.svelte

@@ -9,7 +9,7 @@
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
     import { createEventDispatcher } from 'svelte';
-    import { unread_notif_count } from '$lib/notifications.js';
+    import { notifications, unread_notif_count } from '$lib/notifications.js';
 
     import Logo from '$lib/../img/campfire-logo.svg';
     import Button from './Button.svelte';
@@ -40,7 +40,8 @@
                 break;
             case "notifications":
                 route = "/notifications";
-                getNotifications(true);
+                notifications.set([]);
+                getNotifications();
                 break;
             case "explore":
             case "lists":

src/routes/notifications/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { notifications, getNotifications } from '$lib/notifications.js';
+    import { notifications, last_read_notif_id, unread_notif_count, getNotifications } from '$lib/notifications.js';
     import { account } from '$lib/stores/account.js';
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
@@ -7,11 +7,17 @@
 
     if (!$account) goto("/");
 
-    getNotifications();
+    getNotifications().then(notif_data => {
+        if (notif_data && notif_data.constructor === Array) {
+            last_read_notif_id.set(notif_data[0].id);
+        }
+        unread_notif_count.set(0);
+    });
     document.addEventListener("scroll", () => {
         if ($account && $page.url.pathname !== "/notifications") return;
         if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
-            getNotifications();
+            let max_id = $notifications.length > 0 ? $notifications[$notifications.length - 1].id : null;
+            getNotifications(null, max_id);
         }
     });
 </script>