From 003e77ade207f063c5afb77f55b80d1ee582a557 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 10 Mar 2025 23:09:36 +0100
Subject: [PATCH] Extract "retry chapter download" button into component
---
.../buttons/ChapterDownloadRetryButton.tsx | 49 +++++++++++++++++++
.../history/components/ChapterHistoryCard.tsx | 36 ++------------
.../updates/components/ChapterUpdateCard.tsx | 37 ++------------
3 files changed, 55 insertions(+), 67 deletions(-)
create mode 100644 src/modules/chapter/components/buttons/ChapterDownloadRetryButton.tsx
diff --git a/src/modules/chapter/components/buttons/ChapterDownloadRetryButton.tsx b/src/modules/chapter/components/buttons/ChapterDownloadRetryButton.tsx
new file mode 100644
index 00000000..8e1543b8
--- /dev/null
+++ b/src/modules/chapter/components/buttons/ChapterDownloadRetryButton.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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 Refresh from '@mui/icons-material/Refresh';
+import IconButton from '@mui/material/IconButton';
+import { useTranslation } from 'react-i18next';
+import { DownloadState } from '@/lib/graphql/generated/graphql.ts';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
+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';
+
+export const ChapterDownloadRetryButton = ({ chapterId }: { chapterId: ChapterIdInfo['id'] }) => {
+ const { t } = useTranslation();
+ const download = Chapters.useDownloadStatusFromCache(chapterId);
+
+ const handleRetry = async () => {
+ try {
+ await requestManager.addChapterToDownloadQueue(chapterId).response;
+ } catch (e) {
+ makeToast(t('download.queue.error.label.failed_to_retry'), 'error', getErrorMessage(e));
+ }
+ };
+
+ if (download?.state !== DownloadState.Error) {
+ return null;
+ }
+
+ return (
+
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ handleRetry();
+ }}
+ size="large"
+ >
+
+
+
+ );
+};
diff --git a/src/modules/history/components/ChapterHistoryCard.tsx b/src/modules/history/components/ChapterHistoryCard.tsx
index 51ad1a48..508f8b65 100644
--- a/src/modules/history/components/ChapterHistoryCard.tsx
+++ b/src/modules/history/components/ChapterHistoryCard.tsx
@@ -10,37 +10,20 @@ import Box from '@mui/material/Box';
import CardActionArea from '@mui/material/CardActionArea';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
-import IconButton from '@mui/material/IconButton';
import { Link } from 'react-router-dom';
-import Refresh from '@mui/icons-material/Refresh';
-import { useTranslation } from 'react-i18next';
import { memo } from 'react';
-import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
-import { ChapterHistoryListFieldsFragment, DownloadState } from '@/lib/graphql/generated/graphql.ts';
+import { ChapterHistoryListFieldsFragment } from '@/lib/graphql/generated/graphql.ts';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
-import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { makeToast } from '@/modules/core/utils/Toast.ts';
-import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { Chapters } from '@/modules/chapter/services/Chapters.ts';
import { epochToDate, timeFormatter } from '@/util/DateHelper.ts';
import { ChapterCardThumbnail } from '@/modules/chapter/components/cards/ChapterCardThumbnail.tsx';
import { ChapterCardMetadata } from '@/modules/chapter/components/cards/ChapterCardMetadata.tsx';
import { ChapterDownloadButton } from '@/modules/chapter/components/buttons/ChapterDownloadButton.tsx';
+import { ChapterDownloadRetryButton } from '@/modules/chapter/components/buttons/ChapterDownloadRetryButton.tsx';
export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryListFieldsFragment }) => {
const { manga } = chapter;
- const download = Chapters.useDownloadStatusFromCache(chapter.id);
-
- const { t } = useTranslation();
-
- const handleRetry = async () => {
- try {
- await requestManager.addChapterToDownloadQueue(chapter.id).response;
- } catch (e) {
- makeToast(t('download.queue.error.label.failed_to_retry'), 'error', getErrorMessage(e));
- }
- };
return (
@@ -73,20 +56,7 @@ export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryLi
/>
- {download?.state === DownloadState.Error && (
-
- {
- e.preventDefault();
- e.stopPropagation();
- handleRetry();
- }}
- size="large"
- >
-
-
-
- )}
+
diff --git a/src/modules/updates/components/ChapterUpdateCard.tsx b/src/modules/updates/components/ChapterUpdateCard.tsx
index 2d3f08d2..7887f2b3 100644
--- a/src/modules/updates/components/ChapterUpdateCard.tsx
+++ b/src/modules/updates/components/ChapterUpdateCard.tsx
@@ -10,38 +10,20 @@ import Box from '@mui/material/Box';
import CardActionArea from '@mui/material/CardActionArea';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
-import IconButton from '@mui/material/IconButton';
import { Link, useLocation } from 'react-router-dom';
-import Refresh from '@mui/icons-material/Refresh';
-import { useTranslation } from 'react-i18next';
import { memo } from 'react';
-import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
-import { ChapterUpdateListFieldsFragment, DownloadState } from '@/lib/graphql/generated/graphql.ts';
+import { ChapterUpdateListFieldsFragment } from '@/lib/graphql/generated/graphql.ts';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
-import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { makeToast } from '@/modules/core/utils/Toast.ts';
-import { getErrorMessage } from '@/lib/HelperFunctions.ts';
-import { Chapters } from '@/modules/chapter/services/Chapters.ts';
import { ChapterCardThumbnail } from '@/modules/chapter/components/cards/ChapterCardThumbnail.tsx';
import { ChapterCardMetadata } from '@/modules/chapter/components/cards/ChapterCardMetadata.tsx';
import { ChapterDownloadButton } from '@/modules/chapter/components/buttons/ChapterDownloadButton.tsx';
+import { ChapterDownloadRetryButton } from '@/modules/chapter/components/buttons/ChapterDownloadRetryButton.tsx';
export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateListFieldsFragment }) => {
const { manga } = chapter;
- const download = Chapters.useDownloadStatusFromCache(chapter.id);
-
- const { t } = useTranslation();
const location = useLocation();
- const handleRetry = async () => {
- try {
- await requestManager.addChapterToDownloadQueue(chapter.id).response;
- } catch (e) {
- makeToast(t('download.queue.error.label.failed_to_retry'), 'error', getErrorMessage(e));
- }
- };
-
return (
- {download?.state === DownloadState.Error && (
-
- {
- e.preventDefault();
- e.stopPropagation();
- handleRetry();
- }}
- size="large"
- >
-
-
-
- )}
+