fixed notification infinite scrolling
it actually infinitely scrolls :yippee:
This commit is contained in:
		
							parent
							
								
									975984c4bc
								
							
						
					
					
						commit
						a9160a3a8f
					
				
					 3 changed files with 22 additions and 12 deletions
				
			
		|  | @ -149,6 +149,7 @@ export async function getStreamingHealth(host) { | |||
|  * @param {string} host - The domain of the target server. | ||||
|  * @param {string} token - The application token. | ||||
|  * @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} types - A list of notification types to filter to. | ||||
|  */ | ||||
|  |  | |||
|  | @ -8,6 +8,7 @@ import { parsePost } from '$lib/post.js'; | |||
| import { parseAccount } from '$lib/account.js'; | ||||
| 
 | ||||
| const prefix = app_name + '_notif_'; | ||||
| const notification_limit = 40; | ||||
| 
 | ||||
| export const notifications = writable([]); | ||||
| export const unread_notif_count = writable(load("unread_count")); | ||||
|  | @ -41,29 +42,29 @@ function load(name) { | |||
|     return data ? data : false; | ||||
| } | ||||
| 
 | ||||
| let loading; | ||||
| export async function getNotifications(min_id, max_id) { | ||||
|     if (loading) return; // no spamming!!
 | ||||
|     loading = true; | ||||
| 
 | ||||
|     const notif_data = await api.getNotifications( | ||||
|     const new_notifications = await api.getNotifications( | ||||
|         get(server).host, | ||||
|         get(app).token, | ||||
|         min_id, | ||||
|         max_id, | ||||
|         notification_limit, | ||||
|     ); | ||||
| 
 | ||||
|     if (!notif_data) { | ||||
|     if (!new_notifications) { | ||||
|         console.error(`Failed to retrieve notifications.`); | ||||
|         loading = false; | ||||
|         return; | ||||
|     } | ||||
| 
 | ||||
|     for (let i in notif_data) { | ||||
|         let notif = notif_data[i]; | ||||
|     for (let i in new_notifications) { | ||||
|         let notif = new_notifications[i]; | ||||
|         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 (prev.status && notif.status && prev.status.id === notif.status.id) { | ||||
|                     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; | ||||
|         notifications.update(notifications => [...notifications, notif]); | ||||
|     } | ||||
|     loading = false; | ||||
| } | ||||
|  |  | |||
|  | @ -13,11 +13,19 @@ | |||
|         } | ||||
|         unread_notif_count.set(0); | ||||
|     }); | ||||
| 
 | ||||
|     let notif_lock = true; // `true` means "open" | ||||
|     document.addEventListener("scroll", () => { | ||||
|         if (!notif_lock) return; | ||||
|         if ($account && $page.url.pathname !== "/notifications") return; | ||||
| 
 | ||||
|         if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) { | ||||
|             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> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue