fix: fix dangling download notification (#386)

Author: x1unix

web/src/store/dispatchers/build.ts

@@ -121,16 +121,19 @@ const fetchWasmWithProgress = async (dispatch: DispatchFn, fileName: string) =>
       cancelAnimationFrame(prevRafID)
       prevRafID = requestAnimationFrame(() => {
         dispatch(
-          newAddNotificationAction({
-            id: NotificationIDs.WASMAppDownload,
-            type: NotificationType.Info,
-            title: 'Downloading compiled application',
-            canDismiss: false,
-            progress: {
-              total: totalBytes,
-              current: currentBytes,
+          newAddNotificationAction(
+            {
+              id: NotificationIDs.WASMAppDownload,
+              type: NotificationType.Info,
+              title: 'Downloading compiled application',
+              canDismiss: false,
+              progress: {
+                total: totalBytes,
+                current: currentBytes,
+              },
             },
-          }),
+            true,
+          ),
         )
       })
     })

web/src/store/notifications/actions.ts

@@ -3,13 +3,20 @@ import { type Notification } from './state'
 export enum ActionType {
   NEW_NOTIFICATION = 'NEW_NOTIFICATION',
   ADD_NOTIFICATIONS = 'ADD_NOTIFICATIONS',
+  UPDATE_NOTIFICATION = 'UPDATE_NOTIFICATION',
   REMOVE_NOTIFICATION = 'REMOVE_NOTIFICATION',
 }
 
 export const newNotificationId = () => `${Date.now().toString(36)}_${Math.random().toString(36).substring(2)}`
 
-export const newAddNotificationAction = (notification: Notification) => ({
-  type: ActionType.NEW_NOTIFICATION,
+/**
+ * Returns an action to create or update a notification by ID.
+ *
+ * @param notification Notification body.
+ * @param updateOnly Skip if notification ID doesn't exist
+ */
+export const newAddNotificationAction = (notification: Notification, updateOnly = false) => ({
+  type: updateOnly ? ActionType.UPDATE_NOTIFICATION : ActionType.NEW_NOTIFICATION,
   payload: notification,
 })
 

web/src/store/notifications/reducers.ts

@@ -13,6 +13,13 @@ const reducers = mapByAction<NotificationsState>(
       ...s,
       ...Object.fromEntries(payload.map((n) => [n.id, n])),
     }),
+    [ActionType.UPDATE_NOTIFICATION]: (s: NotificationsState, { payload }: Action<Notification>) => {
+      if (!s[payload.id]) {
+        return s
+      }
+
+      return { ...s, [payload.id]: payload }
+    },
     [ActionType.REMOVE_NOTIFICATION]: (s: NotificationsState, { payload }: Action<string>) => {
       const newNotifications = { ...s }
       delete newNotifications[payload]