Fix the last seen notification logic

Joystream · Sep 14, 2023 · eeef2c5 · eeef2c5
1 parent f9b9a18
commit eeef2c5
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 24 deletions.
diff --git a/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.stories.tsx b/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.stories.tsx
@@ -59,7 +59,6 @@ const Template: StoryFn<any> = (args) => {
     id: 'id',
     type: args.type,
     date: new Date(Date.now() - 10000000),
-    block: 10000,
     read: args.read,
     amount: args.amount,
     price: args.amount,

diff --git a/packages/atlas/src/components/_notifications/NotificationsWidget/NotificationsWidget.tsx b/packages/atlas/src/components/_notifications/NotificationsWidget/NotificationsWidget.tsx
@@ -30,7 +30,7 @@ type NotificationsWidgetProps = {
 
 export const NotificationsWidget: FC<NotificationsWidgetProps> = ({ type, ...rest }) => {
   const popoverRef = useRef<PopoverImperativeHandle>()
-  const { notifications, markNotificationsAsRead, setLastSeenNotificationBlock, pageInfo, fetchMore, loading } =
+  const { notifications, markNotificationsAsRead, setLastSeenNotificationDate, pageInfo, fetchMore, loading } =
     useNotifications()
   const smMatch = useMediaMatch('sm')
   const firstNotification = notifications[0]
@@ -43,8 +43,8 @@ export const NotificationsWidget: FC<NotificationsWidgetProps> = ({ type, ...res
   // set last seen notification block to first notification to manage the badge for notification button
   useEffect(() => {
     if (!firstNotification || !isOpen) return
-    setLastSeenNotificationBlock(firstNotification.block)
-  }, [firstNotification, isOpen, setLastSeenNotificationBlock])
+    setLastSeenNotificationDate(firstNotification.date)
+  }, [firstNotification, isOpen, setLastSeenNotificationDate])
 
   const handleShow = () => {
     rest.onShow?.()

diff --git a/packages/atlas/src/providers/notifications/notifications.hooks.ts b/packages/atlas/src/providers/notifications/notifications.hooks.ts
@@ -25,20 +25,18 @@ export const useNotifications = (opts?: Pick<QueryHookOptions, 'notifyOnNetworkS
   } = useRawNotifications(accountId ?? '', isStudio ? 'ChannelRecipient' : 'MemberRecipient', opts)
 
   const {
-    lastSeenNotificationBlock,
-    actions: { setLastSeenNotificationBlock },
+    lastSeenNotificationDate,
+    actions: { setLastSeenNotificationDate },
   } = useNotificationStore()
 
   const [optimisticRead, setOptimisticRead] = useState<string[]>([])
   const notifications = rawNotifications.flatMap(({ node }): NotificationRecord | [] => {
     const { id, createdAt, status, notificationType } = node.notification
-    const date = new Date(createdAt)
     const specificData = parseNotificationType(notificationType as NotificationType)
     return specificData
       ? {
           id,
-          date: date,
-          block: date.getTime(), // TODO rename this field since it's not block anymore
+          date: new Date(createdAt),
           read: status.__typename === 'Read' || optimisticRead.includes(id),
           ...specificData,
         }
@@ -47,7 +45,7 @@ export const useNotifications = (opts?: Pick<QueryHookOptions, 'notifyOnNetworkS
 
   // those are different from unread notifications!
   const lastSeenNotificationIndex = notifications.findIndex(
-    (notification) => notification.block <= lastSeenNotificationBlock
+    (notification) => notification.date.getTime() <= lastSeenNotificationDate
   )
   const unseenNotificationsCounts = lastSeenNotificationIndex === -1 ? notifications.length : lastSeenNotificationIndex
 
@@ -65,7 +63,7 @@ export const useNotifications = (opts?: Pick<QueryHookOptions, 'notifyOnNetworkS
   return {
     notifications,
     unseenNotificationsCounts,
-    setLastSeenNotificationBlock,
+    setLastSeenNotificationDate,
     markNotificationsAsRead,
     ...rest,
   }

diff --git a/packages/atlas/src/providers/notifications/notifications.store.ts b/packages/atlas/src/providers/notifications/notifications.store.ts
@@ -2,30 +2,30 @@ import { createStore } from '@/utils/store'
 
 export type NotificationsStoreState = {
   // block number of lastly seen (not read) notification
-  lastSeenNotificationBlock: number
+  lastSeenNotificationDate: number
 }
 
 export type NotificationsStoreActions = {
-  setLastSeenNotificationBlock: (block: number) => void
+  setLastSeenNotificationDate: (date: Date) => void
 }
 
 export const useNotificationStore = createStore<NotificationsStoreState, NotificationsStoreActions>(
   {
     state: {
-      lastSeenNotificationBlock: 0,
+      lastSeenNotificationDate: 0,
     },
     actionsFactory: (set) => ({
-      setLastSeenNotificationBlock: (block) => {
+      setLastSeenNotificationDate: (date) => {
         set((state) => {
-          state.lastSeenNotificationBlock = block
+          state.lastSeenNotificationDate = date.getTime()
         })
       },
     }),
   },
   {
     persist: {
       key: 'notifications',
-      whitelist: ['lastSeenNotificationBlock'],
+      whitelist: ['lastSeenNotificationDate'],
       version: 0,
       migrate: (state) => {
         return {

diff --git a/packages/atlas/src/providers/notifications/notifications.types.ts b/packages/atlas/src/providers/notifications/notifications.types.ts
@@ -1,6 +1,6 @@
 import BN from 'bn.js'
 
-export type NotificationRecord = { id: string; date: Date; block: number; read: boolean } & NotificationData
+export type NotificationRecord = { id: string; date: Date; read: boolean } & NotificationData
 export type NotificationData =
   | { type: 'ChannelCreated'; channelId: string; channelTitle: string }
   | { type: 'CommentReply'; memberHandle: string; videoId: string; videoTitle: string }

diff --git a/packages/atlas/src/views/notifications/ChannelNotificationsView.tsx b/packages/atlas/src/views/notifications/ChannelNotificationsView.tsx
@@ -11,13 +11,13 @@ export const ChannelNotificationsView = () => {
     notifyOnNetworkStatusChange: true,
   })
 
-  const { notifications, setLastSeenNotificationBlock } = useNotificationsParams
+  const { notifications, setLastSeenNotificationDate } = useNotificationsParams
   const firstNotification = notifications[0]
   // set last seen notification block to first notification to manage the badge for notification button
   useEffect(() => {
     if (!firstNotification) return
-    setLastSeenNotificationBlock(firstNotification.block)
-  }, [firstNotification, setLastSeenNotificationBlock])
+    setLastSeenNotificationDate(firstNotification.date)
+  }, [firstNotification, setLastSeenNotificationDate])
 
   const unreadNumber = notifications.filter((notification) => !notification.read).length
 

diff --git a/packages/atlas/src/views/notifications/MemberNotificationsView.tsx b/packages/atlas/src/views/notifications/MemberNotificationsView.tsx
@@ -11,13 +11,13 @@ export const MemberNotificationsView = () => {
     notifyOnNetworkStatusChange: true,
   })
 
-  const { notifications, setLastSeenNotificationBlock } = useNotificationsParams
+  const { notifications, setLastSeenNotificationDate } = useNotificationsParams
   const firstNotification = notifications[0]
   // set last seen notification block to first notification to manage the badge for notification button
   useEffect(() => {
     if (!firstNotification) return
-    setLastSeenNotificationBlock(firstNotification.block)
-  }, [firstNotification, setLastSeenNotificationBlock])
+    setLastSeenNotificationDate(firstNotification.date)
+  }, [firstNotification, setLastSeenNotificationDate])
 
   const unreadNumber = notifications.filter((notification) => !notification.read).length