Optionally clear source browse cache when opening component

At least e-hentai is not able to handle out of order pagination requests. The revalidation logic will cause exactly this. Due to this, the revalidation for these sources is disabled. To prevent an out of date cache, it gets cleared when routing to the source component
Suwayomi · Nov 11, 2023 · 826bf37 · 826bf37
1 parent fa3eb72
commit 826bf37
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 14 deletions.
diff --git a/src/components/SourceCard.tsx b/src/components/SourceCard.tsx
@@ -55,7 +55,11 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
                 margin: '10px',
             }}
         >
-            <CardActionArea component={Link} to={`/sources/${id}`} state={{ contentType: SourceContentType.POPULAR }}>
+            <CardActionArea
+                component={Link}
+                to={`/sources/${id}`}
+                state={{ contentType: SourceContentType.POPULAR, clearCache: true }}
+            >
                 <CardContent
                     sx={{
                         display: 'flex',
@@ -105,7 +109,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
                                     variant="outlined"
                                     component={Link}
                                     to={`/sources/${id}`}
-                                    state={{ contentType: SourceContentType.LATEST }}
+                                    state={{ contentType: SourceContentType.LATEST, clearCache: true }}
                                 >
                                     {t('global.button.latest')}
                                 </Button>
@@ -117,7 +121,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
                                     variant="outlined"
                                     component={Link}
                                     to={`/sources/${id}`}
-                                    state={{ contentType: SourceContentType.LATEST }}
+                                    state={{ contentType: SourceContentType.LATEST, clearCache: true }}
                                 >
                                     {t('global.button.latest')}
                                 </Button>
@@ -126,7 +130,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
                                 variant="outlined"
                                 component={Link}
                                 to={`/sources/${id}`}
-                                state={{ contentType: SourceContentType.POPULAR }}
+                                state={{ contentType: SourceContentType.POPULAR, clearCache: true }}
                             >
                                 {t('global.button.popular')}
                             </Button>

diff --git a/src/lib/requests/CustomCache.ts b/src/lib/requests/CustomCache.ts
@@ -43,6 +43,21 @@ export class CustomCache {
         return this.keyToResponseMap.get(key) as Response;
     }
 
+    public getAllKeys(): string[] {
+        return [...this.keyToResponseMap.keys()];
+    }
+
+    public getMatchingKeys(regex: RegExp): string[] {
+        return this.getAllKeys().filter((key) => !!regex.exec(key));
+    }
+
+    public clearFor(...keys: string[]) {
+        keys.forEach((key) => {
+            this.keyToResponseMap.delete(key);
+            this.keyToFetchTimestampMap.delete(key);
+        });
+    }
+
     public clear(): void {
         this.keyToResponseMap.clear();
         this.keyToFetchTimestampMap.clear();

diff --git a/src/lib/requests/RequestManager.ts b/src/lib/requests/RequestManager.ts
@@ -293,6 +293,10 @@ export type AbortableApolloMutationResponse<Data = any> = { response: Promise<Fe
 
 const EXTENSION_LIST_CACHE_KEY = 'useExtensionListFetch';
 
+const CACHE_INITIAL_PAGES_FETCHING_KEY = 'GET_SOURCE_MANGAS_FETCH_FETCHING_INITIAL_PAGES';
+const CACHE_PAGES_KEY = 'GET_SOURCE_MANGAS_FETCH_PAGES';
+const CACHE_RESULTS_KEY = 'GET_SOURCE_MANGAS_FETCH';
+
 export const SPECIAL_ED_SOURCES = {
     REVALIDATION: [
         '57122881048805941', // e-hentai
@@ -326,6 +330,14 @@ export class RequestManager {
         return `${this.getBaseUrl()}${apiVersion}${endpoint}`;
     }
 
+    public clearBrowseCacheFor(sourceId: string) {
+        const cacheKeys = this.cache.getMatchingKeys(
+            new RegExp(`${CACHE_INITIAL_PAGES_FETCHING_KEY}|${CACHE_PAGES_KEY}|${CACHE_RESULTS_KEY}.*${sourceId}`),
+        );
+
+        this.cache.clearFor(...cacheKeys);
+    }
+
     private createAbortController(): { signal: AbortSignal } & AbortableRequest {
         const abortController = new AbortController();
         const abortRequest = (reason?: any): void => {
@@ -968,10 +980,6 @@ export class RequestManager {
             },
         });
 
-        const CACHE_INITIAL_PAGES_FETCHING_KEY = 'GET_SOURCE_MANGAS_FETCH_FETCHING_INITIAL_PAGES';
-        const CACHE_PAGES_KEY = 'GET_SOURCE_MANGAS_FETCH_PAGES';
-        const CACHE_RESULTS_KEY = 'GET_SOURCE_MANGAS_FETCH';
-
         const isRevalidationDoneRef = useRef(false);
         const activeRevalidationRef = useRef<
             | [

diff --git a/src/screens/SourceMangas.tsx b/src/screens/SourceMangas.tsx
@@ -18,7 +18,11 @@ import FavoriteIcon from '@mui/icons-material/Favorite';
 import NewReleasesIcon from '@mui/icons-material/NewReleases';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import { TPartialManga, TranslationKey } from '@/typings';
-import { requestManager, AbortableApolloUseMutationPaginatedResponse } from '@/lib/requests/RequestManager.ts';
+import {
+    requestManager,
+    AbortableApolloUseMutationPaginatedResponse,
+    SPECIAL_ED_SOURCES,
+} from '@/lib/requests/RequestManager.ts';
 import { useDebounce } from '@/components/manga/hooks';
 import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
 import { SourceGridLayout } from '@/components/source/GridLayouts';
@@ -203,11 +207,12 @@ export function SourceMangas() {
     const {
         contentType: currentLocationContentType = SourceContentType.POPULAR,
         filtersToApply: currentLocationFiltersToApply = [],
-    } =
-        useLocation<{
-            contentType: SourceContentType;
-            filtersToApply: IPos[];
-        }>().state ?? {};
+        clearCache = false,
+    } = useLocation<{
+        contentType: SourceContentType;
+        filtersToApply: IPos[];
+        clearCache: boolean;
+    }>().state ?? {};
 
     const { options } = useLibraryOptionsContext();
     const [query] = useQueryParam('query', StringParam);
@@ -288,6 +293,23 @@ export function SourceMangas() {
         setResetScrollPosition(true);
     }, [sourceId, contentType]);
 
+    useEffect(() => {
+        if (!clearCache) {
+            return;
+        }
+
+        const requiresClear = SPECIAL_ED_SOURCES.REVALIDATION.includes(sourceId);
+        if (!requiresClear) {
+            return;
+        }
+
+        requestManager.clearBrowseCacheFor(sourceId);
+        navigate('', {
+            replace: true,
+            state: { contentType: currentLocationContentType, filters: currentLocationFiltersToApply },
+        });
+    }, [clearCache]);
+
     useEffect(
         () => () => {
             if (contentType !== SourceContentType.SEARCH) {