Extract "add chapter download" button into component

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

@@ -0,0 +1,54 @@
+/*
+ * 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 IconButton from '@mui/material/IconButton';
+import { useTranslation } from 'react-i18next';
+import DownloadIcon from '@mui/icons-material/Download';
+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 ChapterDownloadButton = ({
+    chapterId,
+    isDownloaded,
+}: {
+    chapterId: ChapterIdInfo['id'];
+    isDownloaded: boolean;
+}) => {
+    const { t } = useTranslation();
+    const download = Chapters.useDownloadStatusFromCache(chapterId);
+
+    const downloadChapter = () => {
+        requestManager
+            .addChapterToDownloadQueue(chapterId)
+            .response.catch((e) =>
+                makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
+            );
+    };
+
+    if (download == null && isDownloaded) {
+        return null;
+    }
+
+    return (
+        <CustomTooltip title={t('chapter.action.download.add.label.action')}>
+            <IconButton
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    downloadChapter();
+                }}
+                size="large"
+            >
+                <DownloadIcon />
+            </IconButton>
+        </CustomTooltip>
+    );
+};

src/modules/history/components/ChapterHistoryCard.tsx

@@ -6,7 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import DownloadIcon from '@mui/icons-material/Download';
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
 import Card from '@mui/material/Card';
@@ -27,6 +26,7 @@ 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';
 
 export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryListFieldsFragment }) => {
     const { manga } = chapter;
@@ -42,14 +42,6 @@ export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryLi
         }
     };
 
-    const downloadChapter = () => {
-        requestManager
-            .addChapterToDownloadQueue(chapter.id)
-            .response.catch((e) =>
-                makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
-            );
-    };
-
     return (
         <Card>
             <CardActionArea
@@ -95,20 +87,7 @@ export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryLi
                             </IconButton>
                         </CustomTooltip>
                     )}
-                    {download == null && !chapter.isDownloaded && (
+                    <ChapterDownloadButton chapterId={chapter.id} isDownloaded={chapter.isDownloaded} />
-                        <CustomTooltip title={t('chapter.action.download.add.label.action')}>
-                            <IconButton
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    e.preventDefault();
-                                    downloadChapter();
-                                }}
-                                size="large"
-                            >
-                                <DownloadIcon />
-                            </IconButton>
-                        </CustomTooltip>
-                    )}
                 </CardContent>
             </CardActionArea>
         </Card>

src/modules/updates/components/ChapterUpdateCard.tsx

@@ -6,7 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import DownloadIcon from '@mui/icons-material/Download';
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
 import Card from '@mui/material/Card';
@@ -26,6 +25,7 @@ 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';
 
 export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateListFieldsFragment }) => {
     const { manga } = chapter;
@@ -42,14 +42,6 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
         }
     };
 
-    const downloadChapter = () => {
-        requestManager
-            .addChapterToDownloadQueue(chapter.id)
-            .response.catch((e) =>
-                makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
-            );
-    };
-
     return (
         <Card>
             <CardActionArea
@@ -92,20 +84,7 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
                             </IconButton>
                         </CustomTooltip>
                     )}
-                    {download == null && !chapter.isDownloaded && (
+                    <ChapterDownloadButton chapterId={chapter.id} isDownloaded={chapter.isDownloaded} />
-                        <CustomTooltip title={t('chapter.action.download.add.label.action')}>
-                            <IconButton
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    e.preventDefault();
-                                    downloadChapter();
-                                }}
-                                size="large"
-                            >
-                                <DownloadIcon />
-                            </IconButton>
-                        </CustomTooltip>
-                    )}
                 </CardContent>
             </CardActionArea>
         </Card>