Mark active wave only as read

__tests__/useWaveRealtimeUpdater.test.ts

@@ -11,9 +11,15 @@ jest.mock("@/services/websocket/useWebSocketMessage", () => ({
 
 jest.mock("@/services/api/common-api", () => ({
   commonApiFetch: jest.fn(),
+  commonApiPostWithoutBodyAndResponse: jest
+    .fn()
+    .mockResolvedValue(undefined),
 }));
 
-const { commonApiFetch } = require("@/services/api/common-api");
+const {
+  commonApiFetch,
+  commonApiPostWithoutBodyAndResponse,
+} = require("@/services/api/common-api");
 
 const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0));
 
@@ -23,6 +29,7 @@ describe("useWaveRealtimeUpdater", () => {
   });
 
   const baseProps = (store: any) => ({
+    activeWaveId: null as string | null,
     getData: (key: any) => store[key],
     updateData: jest.fn((update: any) => {
       store[update.key] = { ...store[update.key], ...update };
@@ -177,4 +184,50 @@ describe("useWaveRealtimeUpdater", () => {
     await act(async () => result.current.processDropRemoved("wave1", "d8"));
     expect(props.removeDrop).toHaveBeenCalledWith("wave1", "d8");
   });
+
+  it("marks active wave as read and removes delivered notifications", async () => {
+    const store = {
+      wave1: { drops: [], latestFetchedSerialNo: 10 },
+    };
+    const props = baseProps(store);
+    props.activeWaveId = "wave1";
+    const { result } = renderHook(() => useWaveRealtimeUpdater(props));
+    const drop: any = { id: "d9", wave: { id: "wave1" }, author: {} };
+
+    await act(async () =>
+      result.current.processIncomingDrop(
+        drop,
+        ProcessIncomingDropType.DROP_INSERT
+      )
+    );
+    await flushPromises();
+
+    expect(props.removeWaveDeliveredNotifications).toHaveBeenCalledWith(
+      "wave1"
+    );
+    expect(commonApiPostWithoutBodyAndResponse).toHaveBeenCalledWith({
+      endpoint: "notifications/wave/wave1/read",
+    });
+  });
+
+  it("does not mark non-active wave as read", async () => {
+    const store = {
+      wave1: { drops: [], latestFetchedSerialNo: 10 },
+    };
+    const props = baseProps(store);
+    props.activeWaveId = "wave2";
+    const { result } = renderHook(() => useWaveRealtimeUpdater(props));
+    const drop: any = { id: "d10", wave: { id: "wave1" }, author: {} };
+
+    await act(async () =>
+      result.current.processIncomingDrop(
+        drop,
+        ProcessIncomingDropType.DROP_INSERT
+      )
+    );
+    await flushPromises();
+
+    expect(props.removeWaveDeliveredNotifications).not.toHaveBeenCalled();
+    expect(commonApiPostWithoutBodyAndResponse).not.toHaveBeenCalled();
+  });
 });

contexts/wave/MyStreamContext.tsx

@@ -1,35 +1,35 @@
 "use client";
 
+import { useNotificationsContext } from "@/components/notifications/NotificationsContext";
+import { ApiDrop } from "@/generated/models/ApiDrop";
+import { ApiLightDrop } from "@/generated/models/ApiLightDrop";
+import { Drop } from "@/helpers/waves/drop.helpers";
+import useCapacitor from "@/hooks/useCapacitor";
+import { useWebsocketStatus } from "@/services/websocket/useWebSocketMessage";
 import React, {
   createContext,
-  useContext,
-  useMemo,
   ReactNode,
+  useContext,
   useEffect,
-  useState,
+  useMemo,
   useRef,
+  useState,
 } from "react";
+import { WaveMessages } from "./hooks/types";
 import { useActiveWaveManager } from "./hooks/useActiveWaveManager";
 import useEnhancedDmWavesList from "./hooks/useEnhancedDmWavesList";
+import useEnhancedWavesList, {
+  MinimalWave,
+} from "./hooks/useEnhancedWavesList";
+import { useWaveDataManager } from "./hooks/useWaveDataManager";
 import useWaveMessagesStore, {
   Listener as WaveMessagesListener,
 } from "./hooks/useWaveMessagesStore";
-import { useWaveDataManager } from "./hooks/useWaveDataManager";
-import { ApiDrop } from "@/generated/models/ApiDrop";
+import { NextPageProps } from "./hooks/useWavePagination";
 import {
   ProcessIncomingDropType,
   useWaveRealtimeUpdater,
 } from "./hooks/useWaveRealtimeUpdater";
-import { Drop } from "@/helpers/waves/drop.helpers";
-import { WaveMessages } from "./hooks/types";
-import { useWebsocketStatus } from "@/services/websocket/useWebSocketMessage";
-import useCapacitor from "@/hooks/useCapacitor";
-import { ApiLightDrop } from "@/generated/models/ApiLightDrop";
-import { NextPageProps } from "./hooks/useWavePagination";
-import useEnhancedWavesList, {
-  MinimalWave,
-} from "./hooks/useEnhancedWavesList";
-import { useNotificationsContext } from "@/components/notifications/NotificationsContext";
 
 // Define nested structures for context data
 interface WavesContextData {
@@ -110,6 +110,7 @@ export const MyStreamProvider: React.FC<MyStreamProviderProps> = ({
 
   // Instantiate the real-time updater hook
   const { processIncomingDrop, processDropRemoved } = useWaveRealtimeUpdater({
+    activeWaveId,
     getData: waveMessagesStore.getData,
     updateData: waveMessagesStore.updateData,
     registerWave: waveDataManager.registerWave,

contexts/wave/hooks/useWaveRealtimeUpdater.ts

@@ -1,19 +1,19 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
-import { useWebSocketMessage } from "@/services/websocket/useWebSocketMessage";
-import { WsDropUpdateMessage, WsMessageType } from "@/helpers/Types";
-import { WaveDataStoreUpdater } from "./types";
 import { ApiDrop } from "@/generated/models/ApiDrop";
+import { WsDropUpdateMessage, WsMessageType } from "@/helpers/Types";
 import { DropSize, ExtendedDrop } from "@/helpers/waves/drop.helpers";
 import {
   commonApiFetch,
   commonApiPostWithoutBodyAndResponse,
 } from "@/services/api/common-api";
+import { useWebSocketMessage } from "@/services/websocket/useWebSocketMessage";
+import { useCallback, useEffect, useRef } from "react";
 import { useWaveEligibility } from "../WaveEligibilityContext";
-import { debounce } from "lodash";
+import { WaveDataStoreUpdater } from "./types";
 
 interface UseWaveRealtimeUpdaterProps extends WaveDataStoreUpdater {
+  readonly activeWaveId: string | null;
   readonly registerWave: (waveId: string) => void;
   readonly syncNewestMessages: (
     waveId: string,
@@ -35,6 +35,7 @@ type ProcessIncomingDropFn = (
 ) => void;
 
 export function useWaveRealtimeUpdater({
+  activeWaveId,
   getData,
   updateData,
   registerWave,
@@ -125,6 +126,14 @@ export function useWaveRealtimeUpdater({
   // WebSocket message handler
   const processIncomingDrop: ProcessIncomingDropFn = useCallback(
     async (drop: ApiDrop, type: ProcessIncomingDropType) => {
+      const markWaveAsRead = (waveId: string) => {
+        void commonApiPostWithoutBodyAndResponse({
+          endpoint: `notifications/wave/${waveId}/read`,
+        }).catch((error) =>
+          console.error("Failed to mark wave as read:", error)
+        );
+      };
+
       if (!drop?.wave?.id) {
         return;
       }
@@ -226,10 +235,19 @@ export function useWaveRealtimeUpdater({
         initiateFetchNewestCycle(waveId, serialNoForFetch);
       }
 
-      void removeWaveDeliveredNotifications(waveId);
-      markWaveAsReadDebounced(waveId);
+      if (activeWaveId === waveId) {
+        void removeWaveDeliveredNotifications(waveId);
+        markWaveAsRead(waveId);
+      }
     },
-    [getData, updateData, registerWave, initiateFetchNewestCycle]
+    [
+      activeWaveId,
+      getData,
+      updateData,
+      registerWave,
+      initiateFetchNewestCycle,
+      removeWaveDeliveredNotifications,
+    ]
   );
 
   const processDropRemoved = useCallback(
@@ -239,12 +257,6 @@ export function useWaveRealtimeUpdater({
     [removeDrop]
   );
 
-  const markWaveAsReadDebounced = debounce((waveId: string) => {
-    void commonApiPostWithoutBodyAndResponse({
-      endpoint: `notifications/wave/${waveId}/read`,
-    }).catch((error) => console.error("Failed to mark wave as read:", error));
-  }, 2000);
-
   useWebSocketMessage<WsDropUpdateMessage["data"]>(
     WsMessageType.DROP_UPDATE,
     (messageData) => {