I have a page to view notifications. My company created a new system for managing these notifications so now when fetching the notifications from the api we have to pull from two sources.

If the limit is set to 25, it grabs 25 from both sources, sorts them by created_at updates two variables called source_1_offset and source_2_offset with the number of each source that is in the first 25 items of the sorted list. For example if 10 items from source I and 15 items from source 2 are in the first 25 sorted items, source_1_offset = 10 source_2_offset = 15.

This works perfectly when stepping ahead one page at a time. The issue is when the user wants to jump pages i.e. from page 4 to page 8. If the notifications were coming from one source I would just do limit * page_num for the offset. But because it is coming from two sources I have no idea how many will have come from source 1 and how many from source two.

The way I am currently handling this is just by making a guess on the offsets by setting them both to limit (25) * page_num (8). This ensures that no row is shown twice and if they step back or forward they can still see all the elements. The issue here is if they are on page 3 and the date for the last notification on the page is 4/19/24 and they want to jump to 03/19/24 if they jump ahead 2 or more pages i.e. page 5, the offset will again be treated as a guess and be set to 5 * 25. This leads to some situations where you are the dates from the two sources are wildly separated. source 1 might be correctly grabbing notifications from around 03/19/24 but source 2 might be grabbing from 05/01/23, in which case only notifications from source 1 will be displayed even if in reality there are notifications from source 2 in March 2024.

Any suggestions on how to handle guessing the offset? I have considered making more specific predictions based on how many notifications from each source we have seen up until the page jump.

Below is the function that sets the offset on a page forward

 newNotificationsArray.sort((a, b) => {
                let aItem = a[sort.column]
                let bItem = b[sort.column]

                if (a.fields) {
                    aItem = a.fields[sort.column]

                    if (sort.column === 'created_at') {
                        aItem = new Date(aItem * 1000).toISOString()
                    }
                }

                if (b.fields) {
                    bItem = b.fields[sort.column]

                    if (sort.column === 'created_at') {
                        bItem = new Date(bItem * 1000).toISOString()
                    }
                }

                if (aItem < bItem) return sort.order === 'desc' ? 1 : -1
                if (aItem > bItem) return sort.order === 'desc' ? -1 : 1
                return 0
            })

            let notificationsCount = 0
            let eventNotificationsCount = 0

            for (var i = 0; i < self.limit; i++) {
                // only source one has property source
                if (newNotificationsArray[i].hasOwnProperty('source')) {
                    notificationsCount += 1
                }
                else {
                    eventNotificationsCount += 1
                }
            }

            self.notificationsOffset += notificationsCount
            self.eventNotificationsOffset += eventNotificationsCount

            return newNotificationsArray.slice(0, self.limit)

This is offset for page jumps

if (self.pageJump) {
               self.notificationsOffset = page * self.limit
               self.eventNotificationsOffset = page * self.limit
            }