From e13f5299b8027ecdedc462c6e5ff60f3b8e29520 Mon Sep 17 00:00:00 2001
From: sandipndev <hey@sandipan.dev>
Date: Tue, 14 May 2024 16:00:21 +0530
Subject: [PATCH] fix: relay style pagination for notification history screen

---
 app/graphql/cache.ts                          |  5 +++
 app/graphql/generated.gql                     | 36 +++++++++--------
 app/graphql/generated.ts                      | 35 ++++++++--------
 .../notification-history-screen.tsx           | 40 ++++++++++---------
 4 files changed, 65 insertions(+), 51 deletions(-)

diff --git a/app/graphql/cache.ts b/app/graphql/cache.ts
index dbd39c6dc3..9ccf746f44 100644
--- a/app/graphql/cache.ts
+++ b/app/graphql/cache.ts
@@ -109,5 +109,10 @@ export const createCache = () =>
           transactions: relayStylePagination(),
         },
       },
+      User: {
+        fields: {
+          statefulNotificationsWithoutBulletinEnabled: relayStylePagination(),
+        },
+      },
     },
   })
diff --git a/app/graphql/generated.gql b/app/graphql/generated.gql
index 826ac8e18d..6727236bd5 100644
--- a/app/graphql/generated.gql
+++ b/app/graphql/generated.gql
@@ -903,26 +903,30 @@ query SettingsScreen {
 
 query StatefulNotifications($after: String) {
   me {
-    statefulNotificationsWithoutBulletinEnabled(first: 20, after: $after) {
-      nodes {
-        id
-        title
-        body
-        createdAt
-        acknowledgedAt
-        bulletinEnabled
-        icon
-        action {
-          ... on OpenDeepLinkAction {
-            deepLink
-            __typename
-          }
-          ... on OpenExternalLinkAction {
-            url
+    statefulNotificationsWithoutBulletinEnabled(first: 10, after: $after) {
+      edges {
+        node {
+          id
+          title
+          body
+          createdAt
+          acknowledgedAt
+          bulletinEnabled
+          icon
+          action {
+            ... on OpenDeepLinkAction {
+              deepLink
+              __typename
+            }
+            ... on OpenExternalLinkAction {
+              url
+              __typename
+            }
             __typename
           }
           __typename
         }
+        cursor
         __typename
       }
       pageInfo {
diff --git a/app/graphql/generated.ts b/app/graphql/generated.ts
index f7d1a4da62..cadcfe0cf7 100644
--- a/app/graphql/generated.ts
+++ b/app/graphql/generated.ts
@@ -2702,7 +2702,7 @@ export type StatefulNotificationsQueryVariables = Exact<{
 }>;
 
 
-export type StatefulNotificationsQuery = { readonly __typename: 'Query', readonly me?: { readonly __typename: 'User', readonly statefulNotificationsWithoutBulletinEnabled: { readonly __typename: 'StatefulNotificationConnection', readonly nodes: ReadonlyArray<{ readonly __typename: 'StatefulNotification', readonly id: string, readonly title: string, readonly body: string, readonly createdAt: number, readonly acknowledgedAt?: number | null, readonly bulletinEnabled: boolean, readonly icon?: Icon | null, readonly action?: { readonly __typename: 'OpenDeepLinkAction', readonly deepLink: string } | { readonly __typename: 'OpenExternalLinkAction', readonly url: string } | null }>, readonly pageInfo: { readonly __typename: 'PageInfo', readonly endCursor?: string | null, readonly hasNextPage: boolean, readonly hasPreviousPage: boolean, readonly startCursor?: string | null } } } | null };
+export type StatefulNotificationsQuery = { readonly __typename: 'Query', readonly me?: { readonly __typename: 'User', readonly statefulNotificationsWithoutBulletinEnabled: { readonly __typename: 'StatefulNotificationConnection', readonly edges: ReadonlyArray<{ readonly __typename: 'StatefulNotificationEdge', readonly cursor: string, readonly node: { readonly __typename: 'StatefulNotification', readonly id: string, readonly title: string, readonly body: string, readonly createdAt: number, readonly acknowledgedAt?: number | null, readonly bulletinEnabled: boolean, readonly icon?: Icon | null, readonly action?: { readonly __typename: 'OpenDeepLinkAction', readonly deepLink: string } | { readonly __typename: 'OpenExternalLinkAction', readonly url: string } | null } }>, readonly pageInfo: { readonly __typename: 'PageInfo', readonly endCursor?: string | null, readonly hasNextPage: boolean, readonly hasPreviousPage: boolean, readonly startCursor?: string | null } } } | null };
 
 export type StatefulNotificationAcknowledgeMutationVariables = Exact<{
   input: StatefulNotificationAcknowledgeInput;
@@ -4896,23 +4896,26 @@ export type BusinessMapMarkersQueryResult = Apollo.QueryResult<BusinessMapMarker
 export const StatefulNotificationsDocument = gql`
     query StatefulNotifications($after: String) {
   me {
-    statefulNotificationsWithoutBulletinEnabled(first: 20, after: $after) {
-      nodes {
-        id
-        title
-        body
-        createdAt
-        acknowledgedAt
-        bulletinEnabled
-        icon
-        action {
-          ... on OpenDeepLinkAction {
-            deepLink
-          }
-          ... on OpenExternalLinkAction {
-            url
+    statefulNotificationsWithoutBulletinEnabled(first: 10, after: $after) {
+      edges {
+        node {
+          id
+          title
+          body
+          createdAt
+          acknowledgedAt
+          bulletinEnabled
+          icon
+          action {
+            ... on OpenDeepLinkAction {
+              deepLink
+            }
+            ... on OpenExternalLinkAction {
+              url
+            }
           }
         }
+        cursor
       }
       pageInfo {
         endCursor
diff --git a/app/screens/notification-history-screen/notification-history-screen.tsx b/app/screens/notification-history-screen/notification-history-screen.tsx
index 612ba73115..2a00888ebf 100644
--- a/app/screens/notification-history-screen/notification-history-screen.tsx
+++ b/app/screens/notification-history-screen/notification-history-screen.tsx
@@ -12,23 +12,26 @@ import { Notification } from "./notification"
 gql`
   query StatefulNotifications($after: String) {
     me {
-      statefulNotificationsWithoutBulletinEnabled(first: 20, after: $after) {
-        nodes {
-          id
-          title
-          body
-          createdAt
-          acknowledgedAt
-          bulletinEnabled
-          icon
-          action {
-            ... on OpenDeepLinkAction {
-              deepLink
-            }
-            ... on OpenExternalLinkAction {
-              url
+      statefulNotificationsWithoutBulletinEnabled(first: 10, after: $after) {
+        edges {
+          node {
+            id
+            title
+            body
+            createdAt
+            acknowledgedAt
+            bulletinEnabled
+            icon
+            action {
+              ... on OpenDeepLinkAction {
+                deepLink
+              }
+              ... on OpenExternalLinkAction {
+                url
+              }
             }
           }
+          cursor
         }
         pageInfo {
           endCursor
@@ -58,13 +61,12 @@ export const NotificationHistoryScreen = () => {
   const fetchNextNotificationsPage = () => {
     const pageInfo = notifications?.pageInfo
 
-    if (pageInfo?.hasNextPage) {
+    if (pageInfo?.hasNextPage)
       fetchMore({
         variables: {
-          after: pageInfo.endCursor,
+          after: pageInfo?.endCursor,
         },
       })
-    }
   }
 
   return (
@@ -80,7 +82,7 @@ export const NotificationHistoryScreen = () => {
             tintColor={colors.primary} // iOS refresh indicator color
           />
         }
-        data={notifications?.nodes.filter((n) => !n.bulletinEnabled)}
+        data={notifications?.edges.map(({ node }) => node)}
         renderItem={({ item }) => <Notification {...item} />}
         onEndReached={fetchNextNotificationsPage}
         onEndReachedThreshold={0.5}