Show notifications from cache and track client-side read status

Author: markerikson

src/app/Navbar.js

@@ -3,17 +3,23 @@ import { useDispatch, useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 
 import {
-  fetchNotifications,
-  selectAllNotifications,
+  fetchNotificationsWebsocket,
+  selectNotificationsMetadata,
+  useGetNotificationsQuery,
 } from '../features/notifications/notificationsSlice'
 
 export const Navbar = () => {
   const dispatch = useDispatch()
-  const notifications = useSelector(selectAllNotifications)
-  const numUnreadNotifications = notifications.filter((n) => !n.read).length
+
+  // Trigger initial fetch of notifications and keep the websocket open to receive updates
+  useGetNotificationsQuery()
+
+  const notificationsMetadata = useSelector(selectNotificationsMetadata)
+  const numUnreadNotifications = notificationsMetadata.filter((n) => !n.read)
+    .length
 
   const fetchNewNotifications = () => {
-    dispatch(fetchNotifications())
+    dispatch(fetchNotificationsWebsocket())
   }
 
   let unreadNotificationsBadge

src/features/notifications/NotificationsList.js

@@ -6,13 +6,15 @@ import classnames from 'classnames'
 import { selectAllUsers } from '../users/usersSlice'
 
 import {
-  selectAllNotifications,
+  useGetNotificationsQuery,
   allNotificationsRead,
+  selectMetadataEntities,
 } from './notificationsSlice'
 
 export const NotificationsList = () => {
   const dispatch = useDispatch()
-  const notifications = useSelector(selectAllNotifications)
+  const { data: notifications = [] } = useGetNotificationsQuery()
+  const notificationsMetadata = useSelector(selectMetadataEntities)
   const users = useSelector(selectAllUsers)
 
   useLayoutEffect(() => {
@@ -26,8 +28,10 @@ export const NotificationsList = () => {
       name: 'Unknown User',
     }
 
+    const metadata = notificationsMetadata[notification.id]
+
     const notificationClassname = classnames('notification', {
-      new: notification.isNew,
+      new: metadata.isNew,
     })
 
     return (

src/features/notifications/notificationsSlice.js

@@ -1,22 +1,25 @@
 import {
+  createAction,
   createSlice,
-  createAsyncThunk,
   createEntityAdapter,
   createSelector,
+  isAnyOf,
 } from '@reduxjs/toolkit'
 
-import { client } from '../../api/client'
 import { forceGenerateNotifications } from '../../api/server'
 import { apiSlice } from '../api/apiSlice'
 
+const notificationsReceived = createAction(
+  'notifications/notificationsReceived'
+)
+
 export const extendedApi = apiSlice.injectEndpoints({
   endpoints: (builder) => ({
     getNotifications: builder.query({
       query: () => '/notifications',
-      transformResponse: (res) => res.notifications,
       async onCacheEntryAdded(
         arg,
-        { updateCachedData, cacheDataLoaded, cacheEntryRemoved }
+        { updateCachedData, cacheDataLoaded, cacheEntryRemoved, dispatch }
       ) {
         // create a websocket connection when the cache subscription starts
         const ws = new WebSocket('ws://localhost')
@@ -36,6 +39,8 @@ export const extendedApi = apiSlice.injectEndpoints({
                   draft.push(...message.payload)
                   draft.sort((a, b) => b.date.localeCompare(a.date))
                 })
+                // Dispatch an additional action so we can track "read" state
+                dispatch(notificationsReceived(message.payload))
                 break
               }
               default:
@@ -76,21 +81,11 @@ export const fetchNotificationsWebsocket = () => (dispatch, getState) => {
   forceGenerateNotifications(latestTimestamp)
 }
 
-const notificationsAdapter = createEntityAdapter({
-  sortComparer: (a, b) => b.date.localeCompare(a.date),
-})
+const notificationsAdapter = createEntityAdapter()
 
-export const fetchNotifications = createAsyncThunk(
-  'notifications/fetchNotifications',
-  async (_, { getState }) => {
-    const allNotifications = selectAllNotifications(getState())
-    const [latestNotification] = allNotifications
-    const latestTimestamp = latestNotification ? latestNotification.date : ''
-    const response = await client.get(
-      `/fakeApi/notifications?since=${latestTimestamp}`
-    )
-    return response.data
-  }
+const matchNotificationsReceived = isAnyOf(
+  notificationsReceived,
+  extendedApi.endpoints.getNotifications.matchFulfilled
 )
 
 const notificationsSlice = createSlice({
@@ -104,10 +99,10 @@ const notificationsSlice = createSlice({
     },
   },
   extraReducers(builder) {
-    builder.addCase(fetchNotifications.fulfilled, (state, action) => {
+    builder.addMatcher(matchNotificationsReceived, (state, action) => {
       // Add client-side metadata for tracking new notifications
-      const notificationsWithMetadata = action.payload.map((notification) => ({
-        ...notification,
+      const notificationsMetadata = action.payload.map((notification) => ({
+        id: notification.id,
         read: false,
         isNew: true,
       }))
@@ -117,7 +112,7 @@ const notificationsSlice = createSlice({
         notification.isNew = !notification.read
       })
 
-      notificationsAdapter.upsertMany(state, notificationsWithMetadata)
+      notificationsAdapter.upsertMany(state, notificationsMetadata)
     })
   },
 })
@@ -127,5 +122,6 @@ export const { allNotificationsRead } = notificationsSlice.actions
 export default notificationsSlice.reducer
 
 export const {
-  selectAll: selectAllNotifications,
+  selectAll: selectNotificationsMetadata,
+  selectEntities: selectMetadataEntities,
 } = notificationsAdapter.getSelectors((state) => state.notifications)