2024-07-18 16:36:09 +02:00
import { createReducer , isAnyOf } from '@reduxjs/toolkit' ;
import {
authorizeFollowRequestSuccess ,
blockAccountSuccess ,
muteAccountSuccess ,
rejectFollowRequestSuccess ,
} from 'flavours/glitch/actions/accounts_typed' ;
import { focusApp , unfocusApp } from 'flavours/glitch/actions/app' ;
import { blockDomainSuccess } from 'flavours/glitch/actions/domain_blocks_typed' ;
import { fetchMarkers } from 'flavours/glitch/actions/markers' ;
import {
clearNotifications ,
fetchNotifications ,
fetchNotificationsGap ,
processNewNotificationForGroups ,
loadPending ,
updateScrollPosition ,
markNotificationsAsRead ,
mountNotifications ,
unmountNotifications ,
2024-08-19 17:59:06 +02:00
refreshStaleNotificationGroups ,
2024-08-21 16:41:31 +02:00
pollRecentNotifications ,
2024-10-01 10:22:14 +02:00
shouldGroupNotificationType ,
2024-07-18 16:36:09 +02:00
} from 'flavours/glitch/actions/notification_groups' ;
import {
disconnectTimeline ,
timelineDelete ,
} from 'flavours/glitch/actions/timelines_typed' ;
2024-08-21 16:41:31 +02:00
import type {
ApiNotificationJSON ,
ApiNotificationGroupJSON ,
} from 'flavours/glitch/api_types/notifications' ;
2024-07-18 16:36:09 +02:00
import { compareId } from 'flavours/glitch/compare_id' ;
import { usePendingItems } from 'flavours/glitch/initial_state' ;
import {
NOTIFICATIONS_GROUP_MAX_AVATARS ,
createNotificationGroupFromJSON ,
createNotificationGroupFromNotificationJSON ,
} from 'flavours/glitch/models/notification_group' ;
import type { NotificationGroup } from 'flavours/glitch/models/notification_group' ;
const NOTIFICATIONS_TRIM_LIMIT = 50 ;
export interface NotificationGap {
type : 'gap' ;
maxId? : string ;
sinceId? : string ;
}
interface NotificationGroupsState {
groups : ( NotificationGroup | NotificationGap ) [ ] ;
pendingGroups : ( NotificationGroup | NotificationGap ) [ ] ;
scrolledToTop : boolean ;
isLoading : boolean ;
lastReadId : string ;
2024-08-07 13:12:42 +02:00
readMarkerId : string ;
2024-07-18 16:36:09 +02:00
mounted : number ;
isTabVisible : boolean ;
2024-08-19 17:59:06 +02:00
mergedNotifications : 'ok' | 'pending' | 'needs-reload' ;
2024-07-18 16:36:09 +02:00
}
const initialState : NotificationGroupsState = {
groups : [ ] ,
pendingGroups : [ ] , // holds pending groups in slow mode
scrolledToTop : false ,
isLoading : false ,
2024-08-19 17:59:06 +02:00
// this is used to track whether we need to refresh notifications after accepting requests
mergedNotifications : 'ok' ,
2024-07-18 16:36:09 +02:00
// The following properties are used to track unread notifications
2024-08-07 13:12:42 +02:00
lastReadId : '0' , // used internally for unread notifications
readMarkerId : '0' , // user-facing and updated when focus changes
2024-07-18 16:36:09 +02:00
mounted : 0 , // number of mounted notification list components, usually 0 or 1
isTabVisible : true ,
} ;
function filterNotificationsForAccounts (
groups : NotificationGroupsState [ 'groups' ] ,
accountIds : string [ ] ,
onlyForType? : string ,
) {
groups = groups
. map ( ( group ) = > {
if (
group . type !== 'gap' &&
( ! onlyForType || group . type === onlyForType )
) {
const previousLength = group . sampleAccountIds . length ;
group . sampleAccountIds = group . sampleAccountIds . filter (
( id ) = > ! accountIds . includes ( id ) ,
) ;
const newLength = group . sampleAccountIds . length ;
const removed = previousLength - newLength ;
group . notifications_count -= removed ;
}
return group ;
} )
. filter (
( group ) = > group . type === 'gap' || group . sampleAccountIds . length > 0 ,
) ;
mergeGaps ( groups ) ;
return groups ;
}
function filterNotificationsForStatus (
groups : NotificationGroupsState [ 'groups' ] ,
statusId : string ,
) {
groups = groups . filter (
( group ) = >
group . type === 'gap' ||
! ( 'statusId' in group ) ||
group . statusId !== statusId ,
) ;
mergeGaps ( groups ) ;
return groups ;
}
function removeNotificationsForAccounts (
state : NotificationGroupsState ,
accountIds : string [ ] ,
onlyForType? : string ,
) {
state . groups = filterNotificationsForAccounts (
state . groups ,
accountIds ,
onlyForType ,
) ;
state . pendingGroups = filterNotificationsForAccounts (
state . pendingGroups ,
accountIds ,
onlyForType ,
) ;
}
function removeNotificationsForStatus (
state : NotificationGroupsState ,
statusId : string ,
) {
state . groups = filterNotificationsForStatus ( state . groups , statusId ) ;
state . pendingGroups = filterNotificationsForStatus (
state . pendingGroups ,
statusId ,
) ;
}
function isNotificationGroup (
groupOrGap : NotificationGroup | NotificationGap ,
) : groupOrGap is NotificationGroup {
return groupOrGap . type !== 'gap' ;
}
// Merge adjacent gaps in `groups` in-place
function mergeGaps ( groups : NotificationGroupsState [ 'groups' ] ) {
for ( let i = 0 ; i < groups . length ; i ++ ) {
const firstGroupOrGap = groups [ i ] ;
if ( firstGroupOrGap ? . type === 'gap' ) {
let lastGap = firstGroupOrGap ;
let j = i + 1 ;
for ( ; j < groups . length ; j ++ ) {
const groupOrGap = groups [ j ] ;
if ( groupOrGap ? . type === 'gap' ) lastGap = groupOrGap ;
else break ;
}
if ( j - i > 1 ) {
groups . splice ( i , j - i , {
type : 'gap' ,
maxId : firstGroupOrGap.maxId ,
sinceId : lastGap.sinceId ,
} ) ;
}
}
}
}
// Checks if `groups[index-1]` and `groups[index]` are gaps, and merge them in-place if they are
function mergeGapsAround (
groups : NotificationGroupsState [ 'groups' ] ,
index : number ,
) {
if ( index > 0 ) {
const potentialFirstGap = groups [ index - 1 ] ;
const potentialSecondGap = groups [ index ] ;
if (
potentialFirstGap ? . type === 'gap' &&
potentialSecondGap ? . type === 'gap'
) {
groups . splice ( index - 1 , 2 , {
type : 'gap' ,
maxId : potentialFirstGap.maxId ,
sinceId : potentialSecondGap.sinceId ,
} ) ;
}
}
}
function processNewNotification (
groups : NotificationGroupsState [ 'groups' ] ,
notification : ApiNotificationJSON ,
) {
2024-10-04 14:23:30 +02:00
if ( ! shouldGroupNotificationType ( notification . type ) ) {
notification = {
. . . notification ,
group_key : ` ungrouped- ${ notification . id } ` ,
} ;
}
2024-07-18 16:36:09 +02:00
2024-10-04 14:23:30 +02:00
const existingGroupIndex = groups . findIndex (
( group ) = >
group . type !== 'gap' && group . group_key === notification . group_key ,
) ;
2024-07-18 16:36:09 +02:00
2024-10-04 14:23:30 +02:00
// In any case, we are going to add a group at the top
// If there is currently a gap at the top, now is the time to update it
if ( groups . length > 0 && groups [ 0 ] ? . type === 'gap' ) {
groups [ 0 ] . maxId = notification . id ;
}
2024-07-18 16:36:09 +02:00
2024-10-04 14:23:30 +02:00
if ( existingGroupIndex > - 1 ) {
const existingGroup = groups [ existingGroupIndex ] ;
2024-10-01 10:22:14 +02:00
2024-10-04 14:23:30 +02:00
if (
existingGroup &&
existingGroup . type !== 'gap' &&
! existingGroup . sampleAccountIds . includes ( notification . account . id ) // This can happen for example if you like, then unlike, then like again the same post
) {
// Update the existing group
if (
existingGroup . sampleAccountIds . unshift ( notification . account . id ) >
NOTIFICATIONS_GROUP_MAX_AVATARS
)
existingGroup . sampleAccountIds . pop ( ) ;
2024-07-18 16:36:09 +02:00
2024-10-04 14:23:30 +02:00
existingGroup . most_recent_notification_id = notification . id ;
existingGroup . page_max_id = notification . id ;
existingGroup . latest_page_notification_at = notification . created_at ;
existingGroup . notifications_count += 1 ;
2024-07-18 16:36:09 +02:00
2024-10-04 14:23:30 +02:00
groups . splice ( existingGroupIndex , 1 ) ;
mergeGapsAround ( groups , existingGroupIndex ) ;
2024-07-18 16:36:09 +02:00
2024-10-04 14:23:30 +02:00
groups . unshift ( existingGroup ) ;
2024-07-18 16:36:09 +02:00
}
2024-10-04 14:23:30 +02:00
} else {
// We have not found an existing group, create a new one
groups . unshift ( createNotificationGroupFromNotificationJSON ( notification ) ) ;
2024-07-18 16:36:09 +02:00
}
}
function trimNotifications ( state : NotificationGroupsState ) {
2024-09-02 22:14:04 +02:00
if ( state . scrolledToTop && state . groups . length > NOTIFICATIONS_TRIM_LIMIT ) {
2024-07-18 16:36:09 +02:00
state . groups . splice ( NOTIFICATIONS_TRIM_LIMIT ) ;
2024-09-02 22:14:04 +02:00
ensureTrailingGap ( state . groups ) ;
2024-07-18 16:36:09 +02:00
}
}
function shouldMarkNewNotificationsAsRead (
{
isTabVisible ,
scrolledToTop ,
mounted ,
lastReadId ,
groups ,
} : NotificationGroupsState ,
ignoreScroll = false ,
) {
const isMounted = mounted > 0 ;
const oldestGroup = groups . findLast ( isNotificationGroup ) ;
const hasMore = groups . at ( - 1 ) ? . type === 'gap' ;
const oldestGroupReached =
! hasMore ||
lastReadId === '0' ||
( oldestGroup ? . page_min_id &&
compareId ( oldestGroup . page_min_id , lastReadId ) <= 0 ) ;
return (
isTabVisible &&
( ignoreScroll || scrolledToTop ) &&
isMounted &&
oldestGroupReached
) ;
}
function updateLastReadId (
state : NotificationGroupsState ,
group : NotificationGroup | undefined = undefined ,
) {
if ( shouldMarkNewNotificationsAsRead ( state ) ) {
group = group ? ? state . groups . find ( isNotificationGroup ) ;
if (
group ? . page_max_id &&
compareId ( state . lastReadId , group . page_max_id ) < 0
)
state . lastReadId = group . page_max_id ;
}
}
2024-08-07 13:12:42 +02:00
function commitLastReadId ( state : NotificationGroupsState ) {
if ( shouldMarkNewNotificationsAsRead ( state ) ) {
state . readMarkerId = state . lastReadId ;
}
}
2024-08-21 16:41:31 +02:00
function fillNotificationsGap (
groups : NotificationGroupsState [ 'groups' ] ,
gap : NotificationGap ,
notifications : ApiNotificationGroupJSON [ ] ,
) : NotificationGroupsState [ 'groups' ] {
// find the gap in the existing notifications
const gapIndex = groups . findIndex (
( groupOrGap ) = >
groupOrGap . type === 'gap' &&
groupOrGap . sinceId === gap . sinceId &&
groupOrGap . maxId === gap . maxId ,
) ;
if ( gapIndex < 0 )
// We do not know where to insert, let's return
return groups ;
// Filling a disconnection gap means we're getting historical data
// about groups we may know or may not know about.
// The notifications timeline is split in two by the gap, with
// group information newer than the gap, and group information older
// than the gap.
// Filling a gap should not touch anything before the gap, so any
// information on groups already appearing before the gap should be
// discarded, while any information on groups appearing after the gap
// can be updated and re-ordered.
const oldestPageNotification = notifications . at ( - 1 ) ? . page_min_id ;
// replace the gap with the notifications + a new gap
const newerGroupKeys = groups
. slice ( 0 , gapIndex )
. filter ( isNotificationGroup )
. map ( ( group ) = > group . group_key ) ;
const toInsert : NotificationGroupsState [ 'groups' ] = notifications
. map ( ( json ) = > createNotificationGroupFromJSON ( json ) )
. filter ( ( notification ) = > ! newerGroupKeys . includes ( notification . group_key ) ) ;
const apiGroupKeys = ( toInsert as NotificationGroup [ ] ) . map (
( group ) = > group . group_key ,
) ;
const sinceId = gap . sinceId ;
if (
notifications . length > 0 &&
! (
oldestPageNotification &&
sinceId &&
compareId ( oldestPageNotification , sinceId ) <= 0
)
) {
// If we get an empty page, it means we reached the bottom, so we do not need to insert a new gap
// Similarly, if we've fetched more than the gap's, this means we have completely filled it
toInsert . push ( {
type : 'gap' ,
maxId : notifications.at ( - 1 ) ? . page_max_id ,
sinceId ,
} as NotificationGap ) ;
}
// Remove older groups covered by the API
groups = groups . filter (
( groupOrGap ) = >
groupOrGap . type !== 'gap' && ! apiGroupKeys . includes ( groupOrGap . group_key ) ,
) ;
// Replace the gap with API results (+ the new gap if needed)
groups . splice ( gapIndex , 1 , . . . toInsert ) ;
// Finally, merge any adjacent gaps that could have been created by filtering
// groups earlier
mergeGaps ( groups ) ;
return groups ;
}
// Ensure the groups list starts with a gap, mutating it to prepend one if needed
function ensureLeadingGap (
groups : NotificationGroupsState [ 'groups' ] ,
) : NotificationGap {
if ( groups [ 0 ] ? . type === 'gap' ) {
// We're expecting new notifications, so discard the maxId if there is one
groups [ 0 ] . maxId = undefined ;
return groups [ 0 ] ;
} else {
const gap : NotificationGap = {
type : 'gap' ,
sinceId : groups [ 0 ] ? . page_min_id ,
} ;
groups . unshift ( gap ) ;
return gap ;
}
}
2024-09-02 22:14:04 +02:00
// Ensure the groups list ends with a gap suitable for loading more, mutating it to append one if needed
function ensureTrailingGap (
groups : NotificationGroupsState [ 'groups' ] ,
) : NotificationGap {
const groupOrGap = groups . at ( - 1 ) ;
if ( groupOrGap ? . type === 'gap' ) {
// We're expecting older notifications, so discard sinceId if it's set
groupOrGap . sinceId = undefined ;
return groupOrGap ;
} else {
const gap : NotificationGap = {
type : 'gap' ,
maxId : groupOrGap?.page_min_id ,
} ;
groups . push ( gap ) ;
return gap ;
}
}
2024-07-18 16:36:09 +02:00
export const notificationGroupsReducer = createReducer < NotificationGroupsState > (
initialState ,
( builder ) = > {
builder
. addCase ( fetchNotifications . fulfilled , ( state , action ) = > {
state . groups = action . payload . map ( ( json ) = >
json . type === 'gap' ? json : createNotificationGroupFromJSON ( json ) ,
) ;
state . isLoading = false ;
2024-08-19 17:59:06 +02:00
state . mergedNotifications = 'ok' ;
2024-07-18 16:36:09 +02:00
updateLastReadId ( state ) ;
} )
. addCase ( fetchNotificationsGap . fulfilled , ( state , action ) = > {
2024-08-21 16:41:31 +02:00
state . groups = fillNotificationsGap (
state . groups ,
action . meta . arg . gap ,
action . payload . notifications ,
2024-07-18 16:36:09 +02:00
) ;
2024-08-21 16:41:31 +02:00
state . isLoading = false ;
2024-07-18 16:36:09 +02:00
2024-08-21 16:41:31 +02:00
updateLastReadId ( state ) ;
} )
. addCase ( pollRecentNotifications . fulfilled , ( state , action ) = > {
if ( usePendingItems ) {
const gap = ensureLeadingGap ( state . pendingGroups ) ;
state . pendingGroups = fillNotificationsGap (
state . pendingGroups ,
gap ,
action . payload . notifications ,
) ;
} else {
const gap = ensureLeadingGap ( state . groups ) ;
state . groups = fillNotificationsGap (
state . groups ,
gap ,
action . payload . notifications ,
2024-07-18 16:36:09 +02:00
) ;
}
state . isLoading = false ;
updateLastReadId ( state ) ;
2024-08-21 16:41:31 +02:00
trimNotifications ( state ) ;
2024-07-18 16:36:09 +02:00
} )
. addCase ( processNewNotificationForGroups . fulfilled , ( state , action ) = > {
const notification = action . payload ;
2024-08-12 15:40:29 +02:00
if ( notification ) {
processNewNotification (
usePendingItems ? state.pendingGroups : state.groups ,
notification ,
) ;
updateLastReadId ( state ) ;
trimNotifications ( state ) ;
}
2024-07-18 16:36:09 +02:00
} )
. addCase ( disconnectTimeline , ( state , action ) = > {
if ( action . payload . timeline === 'home' ) {
2024-08-21 16:41:31 +02:00
const groups = usePendingItems ? state.pendingGroups : state.groups ;
if ( groups . length > 0 && groups [ 0 ] ? . type !== 'gap' ) {
groups . unshift ( {
2024-07-18 16:36:09 +02:00
type : 'gap' ,
2024-08-21 16:41:31 +02:00
sinceId : groups [ 0 ] ? . page_min_id ,
2024-07-18 16:36:09 +02:00
} ) ;
}
}
} )
. addCase ( timelineDelete , ( state , action ) = > {
removeNotificationsForStatus ( state , action . payload . statusId ) ;
} )
. addCase ( clearNotifications . pending , ( state ) = > {
state . groups = [ ] ;
state . pendingGroups = [ ] ;
} )
. addCase ( blockAccountSuccess , ( state , action ) = > {
removeNotificationsForAccounts ( state , [ action . payload . relationship . id ] ) ;
} )
. addCase ( muteAccountSuccess , ( state , action ) = > {
if ( action . payload . relationship . muting_notifications )
removeNotificationsForAccounts ( state , [
action . payload . relationship . id ,
] ) ;
} )
. addCase ( blockDomainSuccess , ( state , action ) = > {
removeNotificationsForAccounts (
state ,
action . payload . accounts . map ( ( account ) = > account . id ) ,
) ;
} )
. addCase ( loadPending , ( state ) = > {
// First, remove any existing group and merge data
state . pendingGroups . forEach ( ( group ) = > {
if ( group . type !== 'gap' ) {
const existingGroupIndex = state . groups . findIndex (
( groupOrGap ) = >
isNotificationGroup ( groupOrGap ) &&
groupOrGap . group_key === group . group_key ,
) ;
if ( existingGroupIndex > - 1 ) {
const existingGroup = state . groups [ existingGroupIndex ] ;
if ( existingGroup && existingGroup . type !== 'gap' ) {
group . notifications_count += existingGroup . notifications_count ;
group . sampleAccountIds = group . sampleAccountIds
. concat ( existingGroup . sampleAccountIds )
. slice ( 0 , NOTIFICATIONS_GROUP_MAX_AVATARS ) ;
state . groups . splice ( existingGroupIndex , 1 ) ;
}
}
}
} ) ;
// Then build the consolidated list and clear pending groups
state . groups = state . pendingGroups . concat ( state . groups ) ;
state . pendingGroups = [ ] ;
2024-08-21 16:41:31 +02:00
mergeGaps ( state . groups ) ;
trimNotifications ( state ) ;
2024-07-18 16:36:09 +02:00
} )
2024-08-19 17:59:06 +02:00
. addCase ( updateScrollPosition . fulfilled , ( state , action ) = > {
2024-07-18 16:36:09 +02:00
state . scrolledToTop = action . payload . top ;
updateLastReadId ( state ) ;
trimNotifications ( state ) ;
} )
. addCase ( markNotificationsAsRead , ( state ) = > {
const mostRecentGroup = state . groups . find ( isNotificationGroup ) ;
if (
mostRecentGroup ? . page_max_id &&
compareId ( state . lastReadId , mostRecentGroup . page_max_id ) < 0
)
state . lastReadId = mostRecentGroup . page_max_id ;
2024-08-07 13:12:42 +02:00
commitLastReadId ( state ) ;
2024-07-18 16:36:09 +02:00
} )
. addCase ( fetchMarkers . fulfilled , ( state , action ) = > {
if (
action . payload . markers . notifications &&
compareId (
state . lastReadId ,
action . payload . markers . notifications . last_read_id ,
) < 0
2024-08-08 19:00:05 +02:00
) {
2024-07-18 16:36:09 +02:00
state . lastReadId = action . payload . markers . notifications . last_read_id ;
2024-08-08 19:00:05 +02:00
state . readMarkerId =
action . payload . markers . notifications . last_read_id ;
}
2024-07-18 16:36:09 +02:00
} )
2024-08-19 17:59:06 +02:00
. addCase ( mountNotifications . fulfilled , ( state ) = > {
2024-07-18 16:36:09 +02:00
state . mounted += 1 ;
2024-08-07 13:12:42 +02:00
commitLastReadId ( state ) ;
2024-07-18 16:36:09 +02:00
updateLastReadId ( state ) ;
} )
. addCase ( unmountNotifications , ( state ) = > {
state . mounted -= 1 ;
} )
. addCase ( focusApp , ( state ) = > {
state . isTabVisible = true ;
2024-08-07 13:12:42 +02:00
commitLastReadId ( state ) ;
2024-07-18 16:36:09 +02:00
updateLastReadId ( state ) ;
} )
. addCase ( unfocusApp , ( state ) = > {
state . isTabVisible = false ;
} )
2024-08-19 17:59:06 +02:00
. addCase ( refreshStaleNotificationGroups . fulfilled , ( state , action ) = > {
if ( action . payload . deferredRefresh )
state . mergedNotifications = 'needs-reload' ;
} )
2024-07-18 16:36:09 +02:00
. addMatcher (
isAnyOf ( authorizeFollowRequestSuccess , rejectFollowRequestSuccess ) ,
( state , action ) = > {
removeNotificationsForAccounts (
state ,
[ action . payload . id ] ,
'follow_request' ,
) ;
} ,
)
. addMatcher (
2024-08-21 16:41:31 +02:00
isAnyOf (
fetchNotifications . pending ,
fetchNotificationsGap . pending ,
pollRecentNotifications . pending ,
) ,
2024-07-18 16:36:09 +02:00
( state ) = > {
state . isLoading = true ;
} ,
)
. addMatcher (
2024-08-21 16:41:31 +02:00
isAnyOf (
fetchNotifications . rejected ,
fetchNotificationsGap . rejected ,
pollRecentNotifications . rejected ,
) ,
2024-07-18 16:36:09 +02:00
( state ) = > {
state . isLoading = false ;
} ,
) ;
} ,
) ;