Extract "chapter thumbnail" into component

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>
+);

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' }}>
+                        <ChapterCardThumbnail
-                            <Avatar
+                            mangaId={manga.id}
-                                variant="rounded"
+                            mangaTitle={manga.title}
-                                sx={{
+                            thumbnailUrl={manga.thumbnailUrl}
-                                    width: 56,
+                            thumbnailUrlLastFetched={manga.thumbnailUrlLastFetched}
-                                    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>
                         <Box
                             sx={{
                                 display: 'flex',

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' }}>
+                        <ChapterCardThumbnail
-                            <Avatar
+                            mangaId={manga.id}
-                                variant="rounded"
+                            mangaTitle={manga.title}
-                                sx={{
+                            thumbnailUrl={manga.thumbnailUrl}
-                                    width: 56,
+                            thumbnailUrlLastFetched={manga.thumbnailUrlLastFetched}
-                                    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>
                         <Box
                             sx={{
                                 display: 'flex',