chore: use params object for swr cache clearing functions (#10692)

With three and four different parameters (of which two are strings that
are easily interchanged), it makes sense to rewrite these two functions
to take named parameters instead. This is a follow-up to
https://github.com/Unleash/unleash/pull/10689 based on one of the review
comments.

frontend/src/hooks/api/getters/useChangeRequestSearch/useChangeRequestSearch.ts

@@ -69,7 +69,11 @@ const createChangeRequestSearch = () => {
         const { KEY, fetcher } = getChangeRequestSearchFetcher(params);
         const swrKey = `${cachePrefix}${KEY}`;
         const cacheId = 'global';
-        useClearSWRCache(swrKey, PATH, SWR_CACHE_SIZE);
+        useClearSWRCache({
+            currentKey: swrKey,
+            clearPrefix: PATH,
+            cacheSize: SWR_CACHE_SIZE,
+        });
 
         useEffect(() => {
             initCache(cacheId);

frontend/src/hooks/api/getters/useEventSearch/useEventSearch.ts

@@ -60,7 +60,11 @@ const createEventSearch = () => {
         const { KEY, fetcher } = getEventSearchFetcher(params);
         const swrKey = `${cachePrefix}${KEY}`;
         const cacheId = params.project || '';
-        useClearSWRCache(swrKey, PATH, SWR_CACHE_SIZE);
+        useClearSWRCache({
+            currentKey: swrKey,
+            clearPrefix: PATH,
+            cacheSize: SWR_CACHE_SIZE,
+        });
 
         useEffect(() => {
             initCache(params.project || '');

frontend/src/hooks/api/getters/useFeatureSearch/useFeatureSearch.ts

@@ -60,7 +60,11 @@ const createFeatureSearch = () => {
         const { KEY, fetcher } = getFeatureSearchFetcher(params);
         const swrKey = `${cachePrefix}${KEY}`;
         const cacheId = params.project || '';
-        useClearSWRCache(swrKey, PATH, SWR_CACHE_SIZE);
+        useClearSWRCache({
+            currentKey: swrKey,
+            clearPrefix: PATH,
+            cacheSize: SWR_CACHE_SIZE,
+        });
 
         useEffect(() => {
             initCache(cacheId);

frontend/src/hooks/api/getters/usePaginatedData/usePaginatedData.ts

@@ -29,7 +29,10 @@ export function createPaginatedHook<T extends { total?: number }>(
 
         const prefix = dynamicPrefixKey || defaultPrefixKey;
         const KEY = `${prefix}${urlSearchParams}`;
-        useClearSWRCache(KEY, prefix);
+        useClearSWRCache({
+            currentKey: KEY,
+            clearPrefix: prefix,
+        });
 
         const fetcher = async () => {
             return fetch(formatApiPath(KEY), {

frontend/src/hooks/api/getters/useSignalQuery/useSignalQuery.ts

@@ -61,7 +61,11 @@ const createSignalQuery = () => {
 
         const { KEY, fetcher } = getSignalQueryFetcher(params);
         const swrKey = `${cachePrefix}${KEY}`;
-        useClearSWRCache(swrKey, PATH, SWR_CACHE_SIZE);
+        useClearSWRCache({
+            currentKey: swrKey,
+            clearPrefix: PATH,
+            cacheSize: SWR_CACHE_SIZE,
+        });
 
         const { data, error, mutate, isLoading } =
             useConditionalSWR<SignalQueryResponse>(

frontend/src/hooks/useClearSWRCache.test.ts

@@ -7,7 +7,11 @@ describe('manageCacheEntries', () => {
         cacheMock.set('prefix-2', {});
         cacheMock.set('prefix-3', {});
 
-        clearCacheEntries(cacheMock, 'prefix-3', 'prefix-');
+        clearCacheEntries({
+            cache: cacheMock,
+            currentKey: 'prefix-3',
+            clearPrefix: 'prefix-',
+        });
 
         expect(cacheMock.has('prefix-1')).toBe(false);
         expect(cacheMock.has('prefix-2')).toBe(false);
@@ -21,7 +25,12 @@ describe('manageCacheEntries', () => {
         cacheMock.set('prefix-3', {});
         cacheMock.set('prefix-4', {});
 
-        clearCacheEntries(cacheMock, 'prefix-4', 'prefix-', 2);
+        clearCacheEntries({
+            cache: cacheMock,
+            currentKey: 'prefix-4',
+            clearPrefix: 'prefix-',
+            cacheSize: 2,
+        });
 
         expect([...cacheMock.keys()]).toStrictEqual(['prefix-3', 'prefix-4']);
     });
@@ -33,7 +42,12 @@ describe('manageCacheEntries', () => {
         cacheMock.set('prefix-3', {});
         cacheMock.set('prefix-4', {});
 
-        clearCacheEntries(cacheMock, 'prefix-2', 'prefix-', 2);
+        clearCacheEntries({
+            cache: cacheMock,
+            currentKey: 'prefix-2',
+            clearPrefix: 'prefix-',
+            cacheSize: 2,
+        });
 
         expect([...cacheMock.keys()]).toStrictEqual(['prefix-2', 'prefix-4']);
     });
@@ -43,7 +57,12 @@ describe('manageCacheEntries', () => {
         cacheMock.set('prefix-1', {});
         cacheMock.set('prefix-2', {});
 
-        clearCacheEntries(cacheMock, 'prefix-2', 'prefix-', 5);
+        clearCacheEntries({
+            cache: cacheMock,
+            currentKey: 'prefix-2',
+            clearPrefix: 'prefix-',
+            cacheSize: 5,
+        });
 
         expect(cacheMock.has('prefix-1')).toBe(true);
         expect(cacheMock.has('prefix-2')).toBe(true);
@@ -55,7 +74,12 @@ describe('manageCacheEntries', () => {
         cacheMock.set('other-2', {});
         cacheMock.set('prefix-3', {});
 
-        clearCacheEntries(cacheMock, 'prefix-3', 'prefix-', 2);
+        clearCacheEntries({
+            cache: cacheMock,
+            currentKey: 'prefix-3',
+            clearPrefix: 'prefix-',
+            cacheSize: 2,
+        });
 
         expect(cacheMock.has('prefix-1')).toBe(true);
         expect(cacheMock.has('other-2')).toBe(true);
@@ -69,7 +93,12 @@ describe('manageCacheEntries', () => {
         cacheMock.set('prefix-3', {});
         cacheMock.set('prefix-4', {});
 
-        clearCacheEntries(cacheMock, 'prefix-3', 'prefix-', -1);
+        clearCacheEntries({
+            cache: cacheMock,
+            currentKey: 'prefix-3',
+            clearPrefix: 'prefix-',
+            cacheSize: -1,
+        });
 
         expect([...cacheMock.keys()]).toStrictEqual(['prefix-3']);
     });

frontend/src/hooks/useClearSWRCache.ts

@@ -2,19 +2,26 @@ import { useSWRConfig } from 'swr';
 
 type Cache = ReturnType<typeof useSWRConfig>['cache'];
 
-export const clearCacheEntries = (
+type ClearCacheEntriesProps = {
-    cache: Cache,
+    cache: Cache;
-    currentKey: string,
+    currentKey: string;
-    clearPrefix: string,
+    clearPrefix: string;
-    SWR_CACHE_SIZE = 1,
+    cacheSize?: number;
-) => {
+};
+
+export const clearCacheEntries = ({
+    cache,
+    currentKey,
+    clearPrefix,
+    cacheSize = 1,
+}: ClearCacheEntriesProps) => {
     const keys = [...cache.keys()];
 
     const filteredKeys = keys.filter(
         (key) => key.startsWith(clearPrefix) && key !== currentKey,
     );
 
-    const entriesToLeave = SWR_CACHE_SIZE - 1;
+    const entriesToLeave = cacheSize - 1;
     const keysToDelete =
         entriesToLeave <= 0
             ? filteredKeys
@@ -23,16 +30,27 @@ export const clearCacheEntries = (
     keysToDelete.forEach((key) => cache.delete(key));
 };
 
+type UseClearSWRCacheProps = {
+    currentKey: string;
+    clearPrefix: string;
+    cacheSize?: number;
+};
+
 /**
  With dynamic search and filter parameters we want to prevent cache from growing extensively.
  We only keep the latest cache key `currentKey` and remove all other entries identified
  by the `clearPrefix`
  */
-export const useClearSWRCache = (
+export const useClearSWRCache = ({
-    currentKey: string,
+    currentKey,
-    clearPrefix: string,
+    clearPrefix,
-    SWR_CACHE_SIZE = 1,
+    cacheSize = 1,
-) => {
+}: UseClearSWRCacheProps) => {
     const { cache } = useSWRConfig();
-    clearCacheEntries(cache, currentKey, clearPrefix, SWR_CACHE_SIZE);
+    clearCacheEntries({
+        cache,
+        currentKey,
+        clearPrefix,
+        cacheSize,
+    });
 };