From ac4bdebb61acb85083cccbdcbecf230b27747d81 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 10 Mar 2025 22:20:46 +0100
Subject: [PATCH] Extract "chapter thumbnail" into component

---
 .../components/cards/ChapterCardThumbnail.tsx | 50 +++++++++++++++++++
 .../history/components/ChapterHistoryCard.tsx | 34 +++----------
 .../updates/components/ChapterUpdateCard.tsx  | 34 +++----------
 3 files changed, 64 insertions(+), 54 deletions(-)
 create mode 100644 src/modules/chapter/components/cards/ChapterCardThumbnail.tsx

diff --git a/src/modules/chapter/components/cards/ChapterCardThumbnail.tsx b/src/modules/chapter/components/cards/ChapterCardThumbnail.tsx
new file mode 100644
index 00000000..6dd29c1e
--- /dev/null
+++ b/src/modules/chapter/components/cards/ChapterCardThumbnail.tsx
@@ -0,0 +1,50 @@
+/*
+ * 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 { Link } from 'react-router-dom';
+import Avatar from '@mui/material/Avatar';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
+import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
+import { Mangas } from '@/modules/manga/services/Mangas.ts';
+import { MangaIdInfo, MangaThumbnailInfo } from '@/modules/manga/Manga.types.ts';
+import { MangaType } from '@/lib/graphql/generated/graphql.ts';
+
+export const ChapterCardThumbnail = ({
+    mangaId,
+    mangaTitle,
+    thumbnailUrl,
+    thumbnailUrlLastFetched,
+}: MangaThumbnailInfo & {
+    mangaId: MangaIdInfo['id'];
+    mangaTitle: MangaType['title'];
+}) => (
+    <Link to={AppRoutes.manga.path(mangaId)} style={{ textDecoration: 'none' }}>
+        <Avatar
+            variant="rounded"
+            sx={{
+                width: 56,
+                height: 56,
+                flex: '0 0 auto',
+                marginRight: 1,
+                background: 'transparent',
+            }}
+        >
+            <SpinnerImage
+                imgStyle={{
+                    objectFit: 'cover',
+                    width: '100%',
+                    height: '100%',
+                    imageRendering: 'pixelated',
+                }}
+                spinnerStyle={{ small: true }}
+                alt={mangaTitle}
+                src={Mangas.getThumbnailUrl({ thumbnailUrl, thumbnailUrlLastFetched })}
+            />
+        </Avatar>
+    </Link>
+);
diff --git a/src/modules/history/components/ChapterHistoryCard.tsx b/src/modules/history/components/ChapterHistoryCard.tsx
index 8a15e556..7a2c37cb 100644
--- a/src/modules/history/components/ChapterHistoryCard.tsx
+++ b/src/modules/history/components/ChapterHistoryCard.tsx
@@ -9,7 +9,6 @@
 import DownloadIcon from '@mui/icons-material/Download';
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
-import Avatar from '@mui/material/Avatar';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
@@ -20,8 +19,6 @@ 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 { Mangas } from '@/modules/manga/services/Mangas.ts';
-import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -29,6 +26,7 @@ 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';
 
 export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryListFieldsFragment }) => {
     const { manga } = chapter;
@@ -71,30 +69,12 @@ export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryLi
                     }}
                 >
                     <Box sx={{ display: 'flex', flexGrow: 1 }}>
-                        <Link to={AppRoutes.manga.path(chapter.manga.id)} style={{ textDecoration: 'none' }}>
-                            <Avatar
-                                variant="rounded"
-                                sx={{
-                                    width: 56,
-                                    height: 56,
-                                    flex: '0 0 auto',
-                                    marginRight: 1,
-                                    background: 'transparent',
-                                }}
-                            >
-                                <SpinnerImage
-                                    imgStyle={{
-                                        objectFit: 'cover',
-                                        width: '100%',
-                                        height: '100%',
-                                        imageRendering: 'pixelated',
-                                    }}
-                                    spinnerStyle={{ small: true }}
-                                    alt={manga.title}
-                                    src={Mangas.getThumbnailUrl(manga)}
-                                />
-                            </Avatar>
-                        </Link>
+                        <ChapterCardThumbnail
+                            mangaId={manga.id}
+                            mangaTitle={manga.title}
+                            thumbnailUrl={manga.thumbnailUrl}
+                            thumbnailUrlLastFetched={manga.thumbnailUrlLastFetched}
+                        />
                         <Box
                             sx={{
                                 display: 'flex',
diff --git a/src/modules/updates/components/ChapterUpdateCard.tsx b/src/modules/updates/components/ChapterUpdateCard.tsx
index 173ce4c1..498f3523 100644
--- a/src/modules/updates/components/ChapterUpdateCard.tsx
+++ b/src/modules/updates/components/ChapterUpdateCard.tsx
@@ -9,7 +9,6 @@
 import DownloadIcon from '@mui/icons-material/Download';
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
-import Avatar from '@mui/material/Avatar';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
@@ -20,14 +19,13 @@ 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 { Mangas } from '@/modules/manga/services/Mangas.ts';
-import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
 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';
 
 export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateListFieldsFragment }) => {
     const { manga } = chapter;
@@ -71,30 +69,12 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
                     }}
                 >
                     <Box sx={{ display: 'flex', flexGrow: 1 }}>
-                        <Link to={AppRoutes.manga.path(chapter.manga.id)} style={{ textDecoration: 'none' }}>
-                            <Avatar
-                                variant="rounded"
-                                sx={{
-                                    width: 56,
-                                    height: 56,
-                                    flex: '0 0 auto',
-                                    marginRight: 1,
-                                    background: 'transparent',
-                                }}
-                            >
-                                <SpinnerImage
-                                    imgStyle={{
-                                        objectFit: 'cover',
-                                        width: '100%',
-                                        height: '100%',
-                                        imageRendering: 'pixelated',
-                                    }}
-                                    spinnerStyle={{ small: true }}
-                                    alt={manga.title}
-                                    src={Mangas.getThumbnailUrl(manga)}
-                                />
-                            </Avatar>
-                        </Link>
+                        <ChapterCardThumbnail
+                            mangaId={manga.id}
+                            mangaTitle={manga.title}
+                            thumbnailUrl={manga.thumbnailUrl}
+                            thumbnailUrlLastFetched={manga.thumbnailUrlLastFetched}
+                        />
                         <Box
                             sx={{
                                 display: 'flex',