Fix download aggs refresh only on video finished (#800)

frontend/src/api/loader/loadDownloadQueue.ts

@@ -2,8 +2,13 @@ import defaultHeaders from '../../configuration/defaultHeaders';
 import getApiUrl from '../../configuration/getApiUrl';
 import getFetchCredentials from '../../configuration/getFetchCredentials';
 import isDevEnvironment from '../../functions/isDevEnvironment';
+import { DownloadResponseType } from '../../pages/Download';
 
-const loadDownloadQueue = async (page: number, channelId: string | null, showIgnored: boolean) => {
+const loadDownloadQueue = async (
+  page: number,
+  channelId: string | null,
+  showIgnored: boolean,
+): Promise<DownloadResponseType> => {
   const apiUrl = getApiUrl();
 
   const searchParams = new URLSearchParams();

frontend/src/pages/Download.tsx

@@ -65,6 +65,8 @@ const Download = () => {
   const [downloadPending, setDownloadPending] = useState(false);
   const [rescanPending, setRescanPending] = useState(false);
 
+  const [lastVideoCount, setLastVideoCount] = useState(0);
+
   const [downloadQueueText, setDownloadQueueText] = useState('');
 
   const [downloadResponse, setDownloadResponse] = useState<DownloadResponseType>();
@@ -120,10 +122,14 @@ const Download = () => {
         currentPage !== pagination?.current_page
       ) {
         const videos = await loadDownloadQueue(currentPage, channelFilterFromUrl, showIgnored);
-        const downloadAggs = await loadDownloadAggs();
+
+        const videoCount = videos?.paginate?.total_hits;
+
+        if (videoCount && lastVideoCount !== videoCount) {
+          setLastVideoCount(videoCount);
+        }
 
         setDownloadResponse(videos);
-        setDownloadAggsResponse(downloadAggs);
         setRefresh(false);
       }
     })();
@@ -132,6 +138,14 @@ const Download = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [refresh, currentPage, downloadPending]);
 
+  useEffect(() => {
+    (async () => {
+      const downloadAggs = await loadDownloadAggs();
+
+      setDownloadAggsResponse(downloadAggs);
+    })();
+  }, [lastVideoCount]);
+
   useEffect(() => {
     setRefresh(true);
   }, [channelFilterFromUrl]);
@@ -339,7 +353,7 @@ const Download = () => {
           {downloadList &&
             downloadList?.map(download => {
               return (
-                <Fragment key={download.channel_id}>
+                <Fragment key={`${download.channel_id}_${download.timestamp}`}>
                   <DownloadListItem
                     download={download}
                     view={view}