diff --git a/src/components/chapter/ChapterList.tsx b/src/components/chapter/ChapterList.tsx index 831845b77b..3cd1ce4c29 100644 --- a/src/components/chapter/ChapterList.tsx +++ b/src/components/chapter/ChapterList.tsx @@ -6,7 +6,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React, { - useState, useEffect, useCallback, useMemo, + useState, useEffect, useCallback, useMemo, useRef, } from 'react'; import { Box, styled } from '@mui/system'; import { Virtuoso } from 'react-virtuoso'; @@ -52,6 +52,7 @@ export default function ChapterList({ id, chaptersData, onRefresh }: IProps) { chapterOptionsReducer, `${id}filterOptions`, defaultChapterOptions, ); + const prevQueueRef = useRef(); const queue = useSubscription('/api/v1/downloads').data?.queue; const downloadStatusStringFor = useCallback((chapter: IChapter) => { @@ -67,6 +68,25 @@ export default function ChapterList({ id, chaptersData, onRefresh }: IProps) { return rtn; }, [queue]); + useEffect(() => { + if (prevQueueRef.current && queue) { + const prevQueue = prevQueueRef.current; + const changedDownloads = queue.filter((cd) => { + const prevChapterDownload = prevQueue + .find((pcd) => cd.chapterIndex === pcd.chapterIndex + && cd.mangaId === pcd.mangaId); + if (!prevChapterDownload) return true; + return cd.state !== prevChapterDownload.state; + }); + + if (changedDownloads.length > 0) { + onRefresh(); + } + } + + prevQueueRef.current = queue; + }, [queue]); + useEffect(() => { const filtered = filterAndSortChapters(chapters, options); setFilteredChapters(filtered);