Add since=<date> to notifcations fetching

specifyweb/frontend/js_src/lib/components/Header/Notifications.tsx

@@ -15,6 +15,7 @@ import { icons } from '../Atoms/Icons';
 import { ErrorBoundary } from '../Errors/ErrorBoundary';
 import { DateElement } from '../Molecules/DateElement';
 import { Dialog, dialogClassNames, LoadingScreen } from '../Molecules/Dialog';
+import { formatUrl } from '../Router/queryString';
 import { MenuButton } from './index';
 import type { GenericNotification } from './NotificationRenderers';
 import { notificationRenderers } from './NotificationRenderers';
@@ -42,16 +43,52 @@ export function Notifications({
 
   React.useEffect(() => {
     let pullInterval = INITIAL_INTERVAL;
+    let lastFetchedTimestamp: Date | undefined;
+
     const handler = (): void => {
-      if (timeout !== undefined) globalThis.clearTimeout(timeout);
+      if (timeout !== undefined) {
+        globalThis.clearTimeout(timeout);
+      }
       pullInterval = INITIAL_INTERVAL;
-      if (document.visibilityState === 'visible') doFetch();
+      if (document.visibilityState === 'visible') {
+        doFetch();
+      }
     };
+
     document.addEventListener('visibilitychange', handler);
 
     let timeout: NodeJS.Timeout | undefined = undefined;
 
-    function doFetch(): void {
+    function doFetch(since?: Date): void {
+      const startFetchTimestamp = new Date();
+
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = now.getMonth().toString();
+      const day = now.getDate().toString();
+      const hours = now.getHours().toString();
+      const minutes = now.getMinutes().toString();
+      const seconds = now.getSeconds().toString();
+
+      const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+
+      const sinceDate = since;
+      const sinceYear = sinceDate?.getFullYear();
+      const sinceMonth = sinceDate?.getMonth().toString();
+      const sinceDay = sinceDate?.getDate().toString();
+      const sinceHours = sinceDate?.getHours().toString();
+      const sinceMinutes = sinceDate?.getMinutes().toString();
+      const sinceSeconds = sinceDate?.getSeconds().toString();
+
+      const formattedSince = `${sinceYear}-${sinceMonth}-${sinceDay} ${sinceHours}:${sinceMinutes}:${sinceSeconds}`;
+
+      const queryString = since ? formattedSince : formattedDate;
+      const url = formatUrl(`/notifications/messages/`, {
+        since: queryString,
+      });
+
+      lastFetchedTimestamp = new Date();
+
       /*
        * Poll interval is scaled exponentially to reduce requests if the tab is
        * left open.
@@ -69,8 +106,8 @@ export function Notifications({
               }
             >
           >(
-            `/notifications/messages/`,
-
+            url,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             {
               headers: { Accept: 'application/json' },
               /*
@@ -85,11 +122,20 @@ export function Notifications({
             }
           )
         )
-        .then(({ data: notifications }) => {
+        .then(({ data: newNotifications }) => {
           if (destructorCalled) return undefined;
-          setNotifications(
-            notifications
-              .map(
+          setNotifications((existingNotifications) => {
+            const filteredNewNotifications = newNotifications.filter(
+              (newNotification) =>
+                !existingNotifications?.some(
+                  (existingNotification) =>
+                    existingNotification.messageId ===
+                    newNotification.message_id
+                )
+            );
+            return [
+              ...(existingNotifications ?? []),
+              ...filteredNewNotifications.map(
                 // eslint-disable-next-line @typescript-eslint/naming-convention
                 ({ message_id, read, timestamp, type, ...rest }) => ({
                   messageId: message_id,
@@ -98,21 +144,24 @@ export function Notifications({
                   type,
                   payload: rest as IR<LocalizedString>,
                 })
-              )
+              ),
               // Make most recent notification first
-              .sort(
-                sortFunction(
-                  ({ timestamp }) => new Date(timestamp).getTime(),
-                  true
-                )
+            ].sort(
+              sortFunction(
+                ({ timestamp }) => new Date(timestamp).getTime(),
+                true
               )
-          );
+            );
+          });
+          lastFetchedTimestamp = startFetchTimestamp;
           // Stop updating if tab is hidden
           timeout =
             document.visibilityState === 'hidden'
               ? undefined
-              : globalThis.setTimeout(doFetch, pullInterval);
-          return undefined;
+              : globalThis.setTimeout(
+                  () => doFetch(lastFetchedTimestamp),
+                  pullInterval
+                );
         })
         .catch(console.error);
     }