🥇 Notification dispatch block (Joystream#6427)

* Add new variable and regen graphql

* Add dispatch block to the notification handler

packages/atlas/src/api/hooks/notifications.ts

@@ -1,4 +1,5 @@
 import { QueryHookOptions } from '@apollo/client'
+import { useRef } from 'react'
 
 import {
   GetNftActivitiesCountQuery,
@@ -10,15 +11,21 @@ import {
   useGetNotificationsConnectionQuery,
   useMarkNotificationsAsReadMutation,
 } from '@/api/queries/__generated__/notifications.generated'
+import { useJoystreamStore } from '@/providers/joystream/joystream.store'
 
 import { NftActivityOrderByInput, RecipientTypeWhereInput } from '../queries/__generated__/baseTypes.generated'
 
 export const useRawNotifications = (
   recipient: RecipientTypeWhereInput | undefined,
   opts?: Pick<QueryHookOptions, 'notifyOnNetworkStatusChange'>
 ) => {
+  const currentBlockRef = useRef(useJoystreamStore((store) => store.currentBlock))
   const { data, ...rest } = useGetNotificationsConnectionQuery({
-    variables: { first: 10, recipient: recipient as RecipientTypeWhereInput },
+    variables: {
+      first: 10,
+      recipient: recipient as RecipientTypeWhereInput,
+      dispatchBlock: currentBlockRef.current ?? 0,
+    },
     ...opts,
     skip: !recipient,
   })

packages/atlas/src/api/queries/notifications.graphql

@@ -4,12 +4,17 @@ query GetNotificationsCount($where: NotificationWhereInput!) {
   }
 }
 
-query GetNotificationsConnection($recipient: RecipientTypeWhereInput!, $first: Int!, $after: String) {
+query GetNotificationsConnection(
+  $recipient: RecipientTypeWhereInput!
+  $first: Int!
+  $after: String
+  $dispatchBlock: Int!
+) {
   notificationsConnection(
     first: $first
     after: $after
-    orderBy: createdAt_DESC
-    where: { inApp_eq: true, recipient: $recipient }
+    orderBy: [dispatchBlock_DESC, id_DESC]
+    where: { inApp_eq: true, recipient: $recipient, dispatchBlock_lte: $dispatchBlock }
   ) {
     pageInfo {
       hasNextPage

packages/atlas/src/providers/notifications/notifications.manager.tsx

@@ -1,11 +1,21 @@
-import { FC, useEffect } from 'react'
+import { FC, useEffect, useRef } from 'react'
 
 import { atlasConfig } from '@/config'
 
 import { useNotifications } from './notifications.hooks'
 
+import { useJoystreamStore } from '../joystream/joystream.store'
+
 export const NotificationsManager: FC = () => {
   const { fetchMore, unseenNotificationsCounts, recipient } = useNotifications()
+  const { currentBlock } = useJoystreamStore()
+  const currentBlockRef = useRef(currentBlock)
+
+  useEffect(() => {
+    if (currentBlock) {
+      currentBlockRef.current = currentBlock
+    }
+  }, [currentBlock])
 
   useEffect(() => {
     const id = setInterval(() => {
@@ -15,6 +25,9 @@ export const NotificationsManager: FC = () => {
 
       unseenNotificationsCounts.fetchMore()
       fetchMore({
+        variables: {
+          dispatchBlock: currentBlockRef.current,
+        },
         updateQuery: (prev, { fetchMoreResult }) => {
           if (!Object.keys(prev).length) {
             return fetchMoreResult