@times-components/ts-components 1.172.0 → 1.172.1

package/src/components/opta/football/opta-match-stats/__tests__/useFetchFeed.test.tsx

@@ -399,4 +399,66 @@ describe('useFetchFeed', () => {
     // 1 initial + 1 poll = 2
     expect(global.fetch).toHaveBeenCalledTimes(2);
   });
+
+  it('stops polling when the only polling subscriber unsubscribes', async () => {
+    const mockData = { data: 'test' };
+    global.fetch = jest.fn(() => mockJsonResponse(mockData));
+
+    const url = uniqueUrl('unsub-poll');
+
+    // Wrapper that lets us toggle the polling subscriber on/off.
+    const Wrapper: React.FC<{ showPoller: boolean }> = ({ showPoller }) => (
+      <>
+        {/* Non-polling subscriber — always mounted */}
+        <HookRenderer
+          hook={() => useFetchFeed(url)}
+          onState={() => {
+            /* noop */
+          }}
+        />
+        {/* Polling subscriber — conditionally mounted */}
+        {showPoller && (
+          <HookRenderer
+            hook={() => useFetchFeed(url, { pollingInterval: 5000 })}
+            onState={() => {
+              /* noop */
+            }}
+          />
+        )}
+      </>
+    );
+
+    let result: any;
+    await act(async () => {
+      result = render(<Wrapper showPoller={true} />);
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+
+    // Confirm polling is active.
+    await act(async () => {
+      jest.advanceTimersByTime(5000);
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(global.fetch).toHaveBeenCalledTimes(2);
+
+    // Unmount the polling subscriber.
+    await act(async () => {
+      result.rerender(<Wrapper showPoller={false} />);
+    });
+
+    // Advance timers — no more fetches should happen.
+    await act(async () => {
+      jest.advanceTimersByTime(15000);
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(global.fetch).toHaveBeenCalledTimes(2);
+  });
 });

package/src/components/opta/football/opta-match-stats/useFetchFeed.ts

@@ -35,8 +35,8 @@ type CacheEntry = {
   pollTimer: ReturnType<typeof setInterval> | null;
   /** The polling interval (ms) requested by subscribers. Uses the shortest. */
   pollInterval: number | undefined;
-  /** Set of setState dispatchers so every subscriber re-renders on update. */
-  listeners: Set<(s: FetchState<any>) => void>;
+  /** Map of setState dispatchers → polling interval (undefined = no polling). */
+  listeners: Map<(s: FetchState<any>) => void, number | undefined>;
 };
 
 const cache = new Map<string, CacheEntry>();
@@ -53,7 +53,7 @@ function getOrCreateEntry(url: string): CacheEntry {
       subscribers: 0,
       pollTimer: null,
       pollInterval: undefined,
-      listeners: new Set()
+      listeners: new Map()
     };
     cache.set(url, entry);
   }
@@ -67,7 +67,7 @@ function notify(entry: CacheEntry): void {
     loading: entry.fetching,
     error: entry.error
   };
-  entry.listeners.forEach(fn => fn(snapshot));
+  entry.listeners.forEach((_, fn) => fn(snapshot));
 }
 
 /** Execute a single fetch for `url`, de-duplicating in-flight requests. */
@@ -184,7 +184,7 @@ export const useFetchFeed = <T>(
       // Stable listener wrapper that always calls the latest setState.
       const listener = (s: FetchState<any>) =>
         setStateRef.current(s as FetchState<T>);
-      entry.listeners.add(listener);
+      entry.listeners.set(listener, pollingInterval);
 
       // If another subscriber already has data, sync immediately.
       if (entry.data !== undefined) {
@@ -195,14 +195,16 @@ export const useFetchFeed = <T>(
         });
       }
 
-      // Configure polling — use the shortest interval requested.
-      if (pollingInterval && pollingInterval > 0) {
-        const needsRestart =
-          entry.pollInterval === undefined ||
-          pollingInterval < entry.pollInterval;
-        if (needsRestart) {
+      // Recalculate polling from all listeners.
+      {
+        const intervals = Array.from(entry.listeners.values()).filter(
+          (v): v is number => v != null && v > 0
+        );
+        const shortest =
+          intervals.length > 0 ? Math.min(...intervals) : undefined;
+        if (shortest !== entry.pollInterval) {
           stopPolling(entry);
-          entry.pollInterval = pollingInterval;
+          entry.pollInterval = shortest;
         }
       }
 
@@ -217,10 +219,25 @@ export const useFetchFeed = <T>(
         if (entry.subscribers <= 0) {
           // Last subscriber unmounted — clean up everything.
           stopPolling(entry);
+          entry.pollInterval = undefined;
           if (entry.controller) {
             entry.controller.abort();
           }
           cache.delete(url);
+        } else {
+          // Recalculate polling from remaining subscribers.
+          const remaining = Array.from(entry.listeners.values()).filter(
+            (v): v is number => v != null && v > 0
+          );
+          const shortest =
+            remaining.length > 0 ? Math.min(...remaining) : undefined;
+          if (shortest !== entry.pollInterval) {
+            stopPolling(entry);
+            entry.pollInterval = shortest;
+            if (shortest) {
+              ensurePolling(url);
+            }
+          }
         }
       };
     },