ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract "add chapter download" button into component

Browse Source
This commit is contained in:
schroda
2025-03-10 23:08:13 +01:00
parent 35c2172355
commit 6f6994a433
3 changed files with 58 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/modules/chapter/components/buttons/ChapterDownloadButton.tsx Normal file
View File

@@ -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>
);
};

25
src/modules/history/components/ChapterHistoryCard.tsx
View File

@@ -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 && (
<CustomTooltip title={t('chapter.action.download.add.label.action')}>
<IconButton
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
downloadChapter();
}}
size="large"
>
<DownloadIcon />
</IconButton>
</CustomTooltip>
)}
<ChapterDownloadButton chapterId={chapter.id} isDownloaded={chapter.isDownloaded} />
</CardContent>
</CardActionArea>
</Card>

25
src/modules/updates/components/ChapterUpdateCard.tsx
View File

@@ -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 && (
<CustomTooltip title={t('chapter.action.download.add.label.action')}>
<IconButton
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
downloadChapter();
}}
size="large"
>
<DownloadIcon />
</IconButton>
</CustomTooltip>
)}
<ChapterDownloadButton chapterId={chapter.id} isDownloaded={chapter.isDownloaded} />
</CardContent>
</CardActionArea>
</Card>