refactor: update infinite scroll reducer to handle loading state

Author: enesozturk

src/reducers/notifications.ts

@@ -4,6 +4,7 @@ export interface TopicNotificationsState {
   fullNotifications: NotifyClientTypes.NotifyNotification[]
   existingIds: Set<string>
   hasMore: boolean
+  isLoading: boolean
 }
 
 export interface NotificationsState {
@@ -12,11 +13,15 @@ export interface NotificationsState {
 
 export type NotificationsActions =
   | {
-      type: 'FETCH_NOTIFICATIONS'
+      type: 'FETCH_NOTIFICATIONS_DONE'
       notifications: NotifyClientTypes.NotifyNotification[]
       topic: string
       hasMore: boolean
     }
+  | {
+      type: 'FETCH_NOTIFICATIONS_LOADING'
+      topic: string
+    }
   | {
       type: 'UNSHIFT_NEW_NOTIFICATIONS'
       notifications: NotifyClientTypes.NotifyNotification[]
@@ -32,19 +37,42 @@ export const notificationsReducer = (
 ): NotificationsState => {
   const topicState = state[action.topic] as TopicNotificationsState | undefined
 
-  const ids = topicState?.existingIds || new Set<string>()
-  const filteredNotifications = action.notifications.filter(val => !ids.has(val.id))
-  const notificationIds = action.notifications.map(notification => notification.id)
+  function getTopicState(notifications: NotifyClientTypes.NotifyNotification[]) {
+    const ids = topicState?.existingIds || new Set<string>()
+    const filteredNotifications = notifications.filter(val => !ids.has(val.id))
+    const notificationIds = notifications.map(notification => notification.id)
 
-  const fullNotifications = topicState?.fullNotifications || []
-  const newFullIdsSet = new Set(topicState?.existingIds || [])
+    const fullNotifications = topicState?.fullNotifications || []
+    const newFullIdsSet = new Set(topicState?.existingIds || [])
 
-  for (const val of notificationIds) {
-    newFullIdsSet.add(val)
+    for (const val of notificationIds) {
+      newFullIdsSet.add(val)
+    }
+
+    return {
+      filteredNotifications,
+      fullNotifications,
+      newFullIdsSet
+    }
   }
 
   switch (action.type) {
-    case 'UNSHIFT_NEW_NOTIFICATIONS':
+    case 'FETCH_NOTIFICATIONS_LOADING': {
+      if (topicState) {
+        return {
+          ...state,
+          [action.topic]: {
+            ...topicState,
+            isLoading: true
+          }
+        }
+      }
+      return state
+    }
+    case 'UNSHIFT_NEW_NOTIFICATIONS': {
+      const { filteredNotifications, fullNotifications, newFullIdsSet } = getTopicState(
+        action.notifications
+      )
       const unshiftedNotifications = filteredNotifications.concat(fullNotifications)
 
       return {
@@ -53,11 +81,15 @@ export const notificationsReducer = (
           ...topicState,
           existingIds: newFullIdsSet,
           fullNotifications: unshiftedNotifications,
-          hasMore: topicState?.hasMore || false
+          hasMore: topicState?.hasMore || false,
+          isLoading: false
         }
       }
-
-    case 'FETCH_NOTIFICATIONS':
+    }
+    case 'FETCH_NOTIFICATIONS_DONE': {
+      const { filteredNotifications, fullNotifications, newFullIdsSet } = getTopicState(
+        action.notifications
+      )
       const concatenatedNotification = fullNotifications.concat(filteredNotifications)
 
       return {
@@ -66,8 +98,10 @@ export const notificationsReducer = (
           ...topicState,
           existingIds: newFullIdsSet,
           fullNotifications: concatenatedNotification,
-          hasMore: action.hasMore
+          hasMore: action.hasMore,
+          isLoading: false
         }
       }
+    }
   }
 }

src/utils/hooks/useNotificationsInfiniteScroll.tsx

@@ -15,24 +15,23 @@ export const useNotificationsInfiniteScroll = (topic?: string) => {
   const intersectionObserverRef = useRef<HTMLDivElement>(null)
   const { notifyClientProxy } = useContext(W3iContext)
   const [state, dispatch] = useReducer(notificationsReducer, {})
-  const [isLoading, setIsLoading] = useState(false)
 
   const nextPageInternal = useCallback(
     async (lastMessageId?: string) => {
       if (!(notifyClientProxy && topic)) {
         return
       }
 
-      setIsLoading(true)
+      dispatch({ type: 'FETCH_NOTIFICATIONS_LOADING', topic })
+
       const newNotifications = await notifyClientProxy.getNotificationHistory({
         topic,
         limit: NOTIFICATION_BATCH_SIZE,
         startingAfter: lastMessageId
       })
-      setIsLoading(false)
 
       dispatch({
-        type: 'FETCH_NOTIFICATIONS',
+        type: 'FETCH_NOTIFICATIONS_DONE',
         notifications: newNotifications.notifications,
         hasMore: newNotifications.hasMore,
         topic
@@ -61,6 +60,7 @@ export const useNotificationsInfiniteScroll = (topic?: string) => {
 
   const topicState = topic ? state?.[topic] : undefined
   const topicNotifications = topicState ? topicState.fullNotifications : []
+  const isLoading = topicState ? topicState.isLoading : []
   const hasMore = topicState ? topicState.hasMore : false
 
   const lastMessageId = topicNotifications.length