Cleanup DownloadQueue

src/modules/chapter/components/buttons/ChapterDownloadRetryButton.tsx

@@ -15,6 +15,7 @@ import { ChapterIdInfo, Chapters } from '@/modules/chapter/services/Chapters.ts'
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { MUIUtil } from '@/lib/mui/MUI.util.ts';
 
 export const ChapterDownloadRetryButton = ({ chapterId }: { chapterId: ChapterIdInfo['id'] }) => {
     const { t } = useTranslation();
@@ -35,6 +36,7 @@ export const ChapterDownloadRetryButton = ({ chapterId }: { chapterId: ChapterId
     return (
         <CustomTooltip title={t('global.button.retry')}>
             <IconButton
+                {...MUIUtil.preventRippleProp()}
                 onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();

src/modules/downloads/components/DownloadQueueChapterCard.tsx

@@ -0,0 +1,97 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import DeleteIcon from '@mui/icons-material/Delete';
+import DragHandle from '@mui/icons-material/DragHandle';
+import Card from '@mui/material/Card';
+import CardActionArea from '@mui/material/CardActionArea';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import { memo, useCallback } from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
+import { ChapterDownloadRetryButton } from '@/modules/chapter/components/buttons/ChapterDownloadRetryButton.tsx';
+import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
+import { ChapterCardMetadata } from '@/modules/chapter/components/cards/ChapterCardMetadata.tsx';
+import { MUIUtil } from '@/lib/mui/MUI.util.ts';
+import { ListCardContent } from '@/modules/core/components/cards/list/ListCardContent.tsx';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { makeToast } from '@/modules/core/utils/Toast.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { DownloaderState } from '@/lib/graphql/generated/graphql.ts';
+import { ChapterDownloadStatus, ChapterIdInfo } from '@/modules/chapter/services/Chapters.ts';
+
+export const DownloadQueueChapterCard = memo(
+    ({ item, status }: { item: ChapterDownloadStatus; status: DownloaderState }) => {
+        const { t } = useTranslation();
+
+        const handleDelete = useCallback(
+            async (chapter: ChapterIdInfo) => {
+                const isRunning = status === DownloaderState.Started;
+
+                try {
+                    if (isRunning) {
+                        // required to stop before deleting otherwise the download kept going. Server issue?
+                        await requestManager.stopDownloads().response;
+                    }
+
+                    await Promise.all([
+                        // remove from download queue
+                        requestManager.removeChapterFromDownloadQueue(chapter.id).response,
+                        // delete partial download, should be handle server side?
+                        // bug: The folder and the last image downloaded are not deleted
+                        requestManager.deleteDownloadedChapter(chapter.id).response,
+                    ]);
+                } catch (e) {
+                    makeToast(t('download.queue.error.label.failed_to_remove'), 'error', getErrorMessage(e));
+                }
+
+                if (!isRunning) {
+                    return;
+                }
+
+                requestManager
+                    .startDownloads()
+                    .response.catch(defaultPromiseErrorHandler('DownloadQueue::startDownloads'));
+            },
+            [status],
+        );
+
+        return (
+            <Box sx={{ p: 1, pb: 0 }}>
+                <Card>
+                    <CardActionArea component={Link} to={AppRoutes.manga.path(item.manga.id)}>
+                        <ListCardContent>
+                            <IconButton {...MUIUtil.preventRippleProp()} sx={{ pointerEvents: 'none' }}>
+                                <DragHandle />
+                            </IconButton>
+                            <ChapterCardMetadata title={item.manga.title} secondaryText={item.chapter.name} />
+                            <DownloadStateIndicator chapterId={item.chapter.id} />
+                            <ChapterDownloadRetryButton chapterId={item.chapter.id} />
+                            <CustomTooltip title={t('chapter.action.download.delete.label.action')}>
+                                <IconButton
+                                    {...MUIUtil.preventRippleProp()}
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        handleDelete(item.chapter);
+                                    }}
+                                >
+                                    <DeleteIcon />
+                                </IconButton>
+                            </CustomTooltip>
+                        </ListCardContent>
+                    </CardActionArea>
+                </Card>
+            </Box>
+        );
+    },
+);

src/modules/downloads/screens/DownloadQueue.tsx

@@ -6,115 +6,30 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import DeleteIcon from '@mui/icons-material/Delete';
-import DragHandle from '@mui/icons-material/DragHandle';
 import PauseIcon from '@mui/icons-material/Pause';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import Card from '@mui/material/Card';
-import CardActionArea from '@mui/material/CardActionArea';
-import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
-import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
-import Typography from '@mui/material/Typography';
-import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
 import { Virtuoso } from 'react-virtuoso';
-import CardContent from '@mui/material/CardContent';
-import Refresh from '@mui/icons-material/Refresh';
 import { closestCenter, DndContext, DragEndEvent } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
-import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
-import { ChapterDownloadStatus, ChapterIdInfo } from '@/modules/chapter/services/Chapters.ts';
+import { ChapterDownloadStatus } from '@/modules/chapter/services/Chapters.ts';
-import { DownloaderState, DownloadState } from '@/lib/graphql/generated/graphql.ts';
+import { DownloaderState } from '@/lib/graphql/generated/graphql.ts';
-import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
-import { getErrorMessage, noOp } from '@/lib/HelperFunctions.ts';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
-import { MUIUtil } from '@/lib/mui/MUI.util.ts';
 import { DndSortableItem } from '@/lib/dnd-kit/DndSortableItem.tsx';
 import { DndKitUtil } from '@/lib/dnd-kit/DndKitUtil.ts';
 import { DndOverlayItem } from '@/lib/dnd-kit/DndOverlayItem.tsx';
-
+import { DownloadQueueChapterCard } from '@/modules/downloads/components/DownloadQueueChapterCard.tsx';
-const DownloadChapterItem = memo(
-    ({
-        item,
-        handleDelete,
-        handleRetry,
-    }: {
-        item: ChapterDownloadStatus;
-        handleDelete: (chapter: ChapterIdInfo) => void;
-        handleRetry: (chapter: ChapterIdInfo) => void;
-    }) => {
-        const { t } = useTranslation();
-
-        return (
-            <Box sx={{ p: 1, pb: 0 }}>
-                <Card>
-                    <CardActionArea component={Link} to={AppRoutes.manga.path(item.manga.id)}>
-                        <CardContent
-                            sx={{
-                                display: 'flex',
-                                alignItems: 'center',
-                                p: 1.5,
-                            }}
-                        >
-                            <IconButton {...MUIUtil.preventRippleProp()} sx={{ pointerEvents: 'none' }}>
-                                <DragHandle />
-                            </IconButton>
-                            <Stack sx={{ flex: 1, ml: 1 }} direction="column">
-                                <Typography variant="h6" component="h3">
-                                    {item.manga.title}
-                                </Typography>
-                                <Typography
-                                    variant="caption"
-                                    sx={{
-                                        display: 'block',
-                                    }}
-                                >
-                                    {item.chapter.name}
-                                </Typography>
-                            </Stack>
-                            <DownloadStateIndicator chapterId={item.chapter.id} />
-                            {item.state === DownloadState.Error && (
-                                <CustomTooltip title={t('global.button.retry')}>
-                                    <IconButton
-                                        {...MUIUtil.preventRippleProp()}
-                                        onClick={(e) => {
-                                            e.preventDefault();
-                                            e.stopPropagation();
-                                            handleRetry(item.chapter);
-                                        }}
-                                    >
-                                        <Refresh />
-                                    </IconButton>
-                                </CustomTooltip>
-                            )}
-                            <CustomTooltip title={t('chapter.action.download.delete.label.action')}>
-                                <IconButton
-                                    {...MUIUtil.preventRippleProp()}
-                                    onClick={(e) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        handleDelete(item.chapter);
-                                    }}
-                                >
-                                    <DeleteIcon />
-                                </IconButton>
-                            </CustomTooltip>
-                        </CardContent>
-                    </CardActionArea>
-                </Card>
-            </Box>
-        );
-    },
-);
 
 export const DownloadQueue: React.FC = () => {
     const { t } = useTranslation();
@@ -130,7 +45,7 @@ export const DownloadQueue: React.FC = () => {
     const downloaderData = downloadStatusData?.downloadStatus;
 
     const queue = downloaderData?.queue ?? [];
-    const status = downloaderData?.state ?? 'STARTED';
+    const status = downloaderData?.state ?? DownloaderState.Started;
     const isQueueEmpty = !queue.length;
 
     const { setTitle, setAction } = useNavBarContext();
@@ -155,6 +70,31 @@ export const DownloadQueue: React.FC = () => {
         }
     };
 
+    const categoryReorder = (list: ChapterDownloadStatus[], from: number, to: number) => {
+        if (from === to) {
+            return;
+        }
+
+        reorderDownload({ variables: { input: { chapterId: list[from].chapter.id, to } } }).catch(() => {
+            revertReorder();
+        });
+    };
+
+    const onDragEnd = (event: DragEndEvent) => {
+        const { active, over } = event;
+
+        setDndActiveDownload(null);
+
+        if (!over || active.id === over.id) {
+            return;
+        }
+
+        const oldIndex = queue.findIndex((download) => download.chapter.id === active.id);
+        const newIndex = queue.findIndex((download) => download.chapter.id === over.id);
+
+        categoryReorder(queue, oldIndex, newIndex);
+    };
+
     useLayoutEffect(() => {
         setTitle(t('download.queue.title'));
         setAction(
@@ -199,66 +139,6 @@ export const DownloadQueue: React.FC = () => {
         return () => window.removeEventListener('error', ignoreError);
     }, []);
 
-    const categoryReorder = (list: ChapterDownloadStatus[], from: number, to: number) => {
-        if (from === to) {
-            return;
-        }
-
-        reorderDownload({ variables: { input: { chapterId: list[from].chapter.id, to } } }).catch(() => {
-            revertReorder();
-        });
-    };
-
-    const onDragEnd = (event: DragEndEvent) => {
-        const { active, over } = event;
-
-        setDndActiveDownload(null);
-
-        if (!over || active.id === over.id) {
-            return;
-        }
-
-        const oldIndex = queue.findIndex((download) => download.chapter.id === active.id);
-        const newIndex = queue.findIndex((download) => download.chapter.id === over.id);
-
-        categoryReorder(queue, oldIndex, newIndex);
-    };
-
-    const handleRetry = useCallback(async (chapter: ChapterIdInfo) => {
-        try {
-            await requestManager.addChapterToDownloadQueue(chapter.id).response;
-        } catch (e) {
-            makeToast(t('download.queue.error.label.failed_to_remove'), 'error', getErrorMessage(e));
-        }
-    }, []);
-
-    const handleDelete = useCallback(async (chapter: ChapterIdInfo) => {
-        const isRunning = status === DownloaderState.Started;
-
-        try {
-            if (isRunning) {
-                // required to stop before deleting otherwise the download kept going. Server issue?
-                await requestManager.stopDownloads().response;
-            }
-
-            await Promise.all([
-                // remove from download queue
-                requestManager.removeChapterFromDownloadQueue(chapter.id).response,
-                // delete partial download, should be handle server side?
-                // bug: The folder and the last image downloaded are not deleted
-                requestManager.deleteDownloadedChapter(chapter.id).response,
-            ]);
-        } catch (e) {
-            makeToast(t('download.queue.error.label.failed_to_remove'), 'error', getErrorMessage(e));
-        }
-
-        if (!isRunning) {
-            return;
-        }
-
-        requestManager.startDownloads().response.catch(defaultPromiseErrorHandler('DownloadQueue::startDownloads'));
-    }, []);
-
     if (isLoading) {
         return <LoadingPlaceholder />;
     }
@@ -278,39 +158,37 @@ export const DownloadQueue: React.FC = () => {
     }
 
     return (
-        <DndContext
+        <Box sx={{ pb: 1 }}>
-            sensors={dndSensors}
+            <DndContext
-            collisionDetection={closestCenter}
+                sensors={dndSensors}
-            onDragStart={(event) =>
+                collisionDetection={closestCenter}
-                setDndActiveDownload(queue.find((download) => download.chapter.id === event.active.id) ?? null)
+                onDragStart={(event) =>
-            }
+                    setDndActiveDownload(queue.find((download) => download.chapter.id === event.active.id) ?? null)
-            onDragEnd={onDragEnd}
+                }
-            onDragCancel={() => setDndActiveDownload(null)}
+                onDragEnd={onDragEnd}
-            onDragAbort={() => setDndActiveDownload(null)}
+                onDragCancel={() => setDndActiveDownload(null)}
-        >
+                onDragAbort={() => setDndActiveDownload(null)}
-            <SortableContext items={dndItems} strategy={verticalListSortingStrategy}>
+            >
-                <Virtuoso
+                <SortableContext items={dndItems} strategy={verticalListSortingStrategy}>
-                    useWindowScroll
+                    <Virtuoso
-                    overscan={window.innerHeight * 0.5}
+                        useWindowScroll
-                    totalCount={queue.length}
+                        overscan={window.innerHeight * 0.5}
-                    computeItemKey={(index) => queue[index].chapter.id}
+                        totalCount={queue.length}
-                    itemContent={(index) => (
+                        computeItemKey={(index) => queue[index].chapter.id}
-                        <DndSortableItem
+                        itemContent={(index) => (
-                            id={queue[index].chapter.id}
+                            <DndSortableItem
-                            isDragging={queue[index].chapter.id === dndActiveDownload?.chapter.id}
+                                id={queue[index].chapter.id}
-                        >
+                                isDragging={queue[index].chapter.id === dndActiveDownload?.chapter.id}
-                            <DownloadChapterItem
+                            >
-                                item={queue[index]}
+                                <DownloadQueueChapterCard item={queue[index]} status={status} />
-                                handleDelete={handleDelete}
+                            </DndSortableItem>
-                                handleRetry={handleRetry}
+                        )}
-                            />
+                    />
-                        </DndSortableItem>
+                </SortableContext>
-                    )}
+                <DndOverlayItem isActive={!!dndActiveDownload}>
-                />
+                    <DownloadQueueChapterCard item={dndActiveDownload!} status={status} />
-            </SortableContext>
+                </DndOverlayItem>
-            <DndOverlayItem isActive={!!dndActiveDownload}>
+            </DndContext>
-                <DownloadChapterItem item={dndActiveDownload!} handleDelete={noOp} handleRetry={noOp} />
+        </Box>
-            </DndOverlayItem>
-        </DndContext>
     );
 };