From 3fe44fd76d148053ac8a6832e65b319a0f7fbf2b Mon Sep 17 00:00:00 2001
From: ikprk <168457495+ikprk@users.noreply.github.com>
Date: Mon, 22 Jul 2024 14:02:01 +0200
Subject: [PATCH] :1st_place_medal: Notification dispatch block (#6427)

* Add new variable and regen graphql

* Add dispatch block to the notification handler
---
 packages/atlas/src/api/hooks/notifications.ts     |  9 ++++++++-
 .../__generated__/notifications.generated.tsx     | 13 ++++++++++---
 .../atlas/src/api/queries/notifications.graphql   | 11 ++++++++---
 .../notifications/notifications.manager.tsx       | 15 ++++++++++++++-
 4 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/packages/atlas/src/api/hooks/notifications.ts b/packages/atlas/src/api/hooks/notifications.ts
index b6e9b2e2d3..0d479d2290 100644
--- a/packages/atlas/src/api/hooks/notifications.ts
+++ b/packages/atlas/src/api/hooks/notifications.ts
@@ -1,4 +1,5 @@
 import { QueryHookOptions } from '@apollo/client'
+import { useRef } from 'react'
 
 import {
   GetNftActivitiesCountQuery,
@@ -10,6 +11,7 @@ import {
   useGetNotificationsConnectionQuery,
   useMarkNotificationsAsReadMutation,
 } from '@/api/queries/__generated__/notifications.generated'
+import { useJoystreamStore } from '@/providers/joystream/joystream.store'
 
 import { NftActivityOrderByInput, RecipientTypeWhereInput } from '../queries/__generated__/baseTypes.generated'
 
@@ -17,8 +19,13 @@ 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,
   })
diff --git a/packages/atlas/src/api/queries/__generated__/notifications.generated.tsx b/packages/atlas/src/api/queries/__generated__/notifications.generated.tsx
index aab739006e..eb8e5eca80 100644
--- a/packages/atlas/src/api/queries/__generated__/notifications.generated.tsx
+++ b/packages/atlas/src/api/queries/__generated__/notifications.generated.tsx
@@ -22,6 +22,7 @@ export type GetNotificationsConnectionQueryVariables = Types.Exact<{
   recipient: Types.RecipientTypeWhereInput
   first: Types.Scalars['Int']
   after?: Types.InputMaybe<Types.Scalars['String']>
+  dispatchBlock: Types.Scalars['Int']
 }>
 
 export type GetNotificationsConnectionQuery = {
@@ -3183,12 +3184,17 @@ export type GetNotificationsCountQueryResult = Apollo.QueryResult<
   GetNotificationsCountQueryVariables
 >
 export const GetNotificationsConnectionDocument = gql`
-  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
@@ -3412,6 +3418,7 @@ export const GetNotificationsConnectionDocument = gql`
  *      recipient: // value for 'recipient'
  *      first: // value for 'first'
  *      after: // value for 'after'
+ *      dispatchBlock: // value for 'dispatchBlock'
  *   },
  * });
  */
diff --git a/packages/atlas/src/api/queries/notifications.graphql b/packages/atlas/src/api/queries/notifications.graphql
index 7e53ebb68c..56915957e7 100644
--- a/packages/atlas/src/api/queries/notifications.graphql
+++ b/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
diff --git a/packages/atlas/src/providers/notifications/notifications.manager.tsx b/packages/atlas/src/providers/notifications/notifications.manager.tsx
index c1fe05bb97..a7f62f3a59 100644
--- a/packages/atlas/src/providers/notifications/notifications.manager.tsx
+++ b/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