From 35c2172355899c2b0d35a579ff900493f21c65fa Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 10 Mar 2025 22:59:21 +0100
Subject: [PATCH] Extract "chapter metadata" into component

---
 .../chapter/components/cards/ChapterCard.tsx  | 78 +++++++------------
 .../components/cards/ChapterCardMetadata.tsx  | 64 +++++++++++++++
 .../history/components/ChapterHistoryCard.tsx | 23 ++----
 .../updates/components/ChapterUpdateCard.tsx  | 20 +----
 4 files changed, 100 insertions(+), 85 deletions(-)
 create mode 100644 src/modules/chapter/components/cards/ChapterCardMetadata.tsx

diff --git a/src/modules/chapter/components/cards/ChapterCard.tsx b/src/modules/chapter/components/cards/ChapterCard.tsx
index 97b12450..6d955002 100644
--- a/src/modules/chapter/components/cards/ChapterCard.tsx
+++ b/src/modules/chapter/components/cards/ChapterCard.tsx
@@ -15,7 +15,6 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
 import { useTheme } from '@mui/material/styles';
-import Typography from '@mui/material/Typography';
 import React, { memo, MouseEvent, TouchEvent, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -27,7 +26,6 @@ import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateI
 import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
 import { ChapterActionMenuItems } from '@/modules/chapter/components/actions/ChapterActionMenuItems.tsx';
 import { Menu } from '@/modules/core/components/menu/Menu.tsx';
-import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
 import {
     ChapterBookmarkInfo,
     ChapterDownloadInfo,
@@ -39,6 +37,7 @@ import {
     ChapterScanlatorInfo,
 } from '@/modules/chapter/services/Chapters.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
+import { ChapterCardMetadata } from '@/modules/chapter/components/cards/ChapterCardMetadata.tsx';
 
 type TChapter = ChapterIdInfo &
     ChapterMangaInfo &
@@ -138,60 +137,41 @@ export const ChapterCard = memo((props: IProps) => {
                                     '&:last-child': { pb: 1.5 },
                                 }}
                             >
-                                <Stack
-                                    direction="column"
-                                    sx={{
-                                        flex: 1,
-                                    }}
-                                >
-                                    <Stack
-                                        sx={{
-                                            flexDirection: 'row',
-                                            gap: 0.5,
-                                            alignItems: 'center',
-                                        }}
-                                    >
-                                        {chapter.isBookmarked && (
+                                <ChapterCardMetadata
+                                    title={
+                                        showChapterNumber
+                                            ? `${t('chapter.title_one')} ${chapter.chapterNumber}`
+                                            : chapter.name
+                                    }
+                                    secondaryText={chapter.scanlator}
+                                    ternaryText={`${getDateString(Number(chapter.uploadDate ?? 0), true)}${isDownloaded ? ` • ${t('chapter.status.label.downloaded')}` : ''}`}
+                                    infoIcons={
+                                        chapter.isBookmarked && (
                                             <BookmarkIcon
                                                 color={mode === 'reader' && isActiveChapter ? 'secondary' : 'primary'}
                                             />
-                                        )}
-                                        <TypographyMaxLines
-                                            variant="h6"
-                                            component="h4"
-                                            sx={{
-                                                ...applyStyles(mode === 'reader' && isActiveChapter, {
-                                                    color: theme.palette.primary.contrastText,
-                                                }),
-                                            }}
-                                        >
-                                            {showChapterNumber
-                                                ? `${t('chapter.title_one')} ${chapter.chapterNumber}`
-                                                : chapter.name}
-                                        </TypographyMaxLines>
-                                    </Stack>
-                                    <Typography
-                                        variant="caption"
-                                        sx={{
-                                            ...applyStyles(mode === 'reader' && isActiveChapter, {
+                                        )
+                                    }
+                                    slotProps={{
+                                        title: {
+                                            variant: 'h6',
+                                            component: 'h3',
+                                            sx: applyStyles(mode === 'reader' && isActiveChapter, {
                                                 color: theme.palette.primary.contrastText,
                                             }),
-                                        }}
-                                    >
-                                        {chapter.scanlator}
-                                    </Typography>
-                                    <Typography
-                                        variant="caption"
-                                        sx={{
-                                            ...applyStyles(mode === 'reader' && isActiveChapter, {
+                                        },
+                                        secondaryText: {
+                                            sx: applyStyles(mode === 'reader' && isActiveChapter, {
                                                 color: theme.palette.primary.contrastText,
                                             }),
-                                        }}
-                                    >
-                                        {getDateString(Number(chapter.uploadDate ?? 0), true)}
-                                        {isDownloaded && ` • ${t('chapter.status.label.downloaded')}`}
-                                    </Typography>
-                                </Stack>
+                                        },
+                                        ternaryText: {
+                                            sx: applyStyles(mode === 'reader' && isActiveChapter, {
+                                                color: theme.palette.primary.contrastText,
+                                            }),
+                                        },
+                                    }}
+                                />
 
                                 <DownloadStateIndicator
                                     chapterId={chapter.id}
diff --git a/src/modules/chapter/components/cards/ChapterCardMetadata.tsx b/src/modules/chapter/components/cards/ChapterCardMetadata.tsx
new file mode 100644
index 00000000..87268dd3
--- /dev/null
+++ b/src/modules/chapter/components/cards/ChapterCardMetadata.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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 Box from '@mui/material/Box';
+import { ComponentProps, ReactNode } from 'react';
+import Stack from '@mui/material/Stack';
+import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
+
+export const ChapterCardMetadata = ({
+    title,
+    secondaryText,
+    ternaryText,
+    infoIcons,
+    slotProps,
+}: {
+    title: string;
+    secondaryText?: string | null;
+    ternaryText?: string | null;
+    infoIcons?: ReactNode;
+    slotProps?: {
+        title?: ComponentProps<typeof TypographyMaxLines>;
+        secondaryText?: ComponentProps<typeof TypographyMaxLines>;
+        ternaryText?: ComponentProps<typeof TypographyMaxLines>;
+    };
+}) => (
+    <Box
+        sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            flexGrow: 1,
+            flexShrink: 1,
+            wordBreak: 'break-word',
+        }}
+    >
+        <Stack
+            sx={{
+                flexDirection: 'row',
+                gap: 0.5,
+                alignItems: 'center',
+            }}
+        >
+            {infoIcons}
+            <TypographyMaxLines variant="h6" component="h3" {...slotProps?.title}>
+                {title}
+            </TypographyMaxLines>
+        </Stack>
+        {secondaryText && (
+            <TypographyMaxLines variant="caption" display="block" lines={1} {...slotProps?.secondaryText}>
+                {secondaryText}
+            </TypographyMaxLines>
+        )}
+        {ternaryText && (
+            <TypographyMaxLines variant="caption" display="block" lines={1} {...slotProps?.ternaryText}>
+                {ternaryText}
+            </TypographyMaxLines>
+        )}
+    </Box>
+);
diff --git a/src/modules/history/components/ChapterHistoryCard.tsx b/src/modules/history/components/ChapterHistoryCard.tsx
index 7a2c37cb..29388166 100644
--- a/src/modules/history/components/ChapterHistoryCard.tsx
+++ b/src/modules/history/components/ChapterHistoryCard.tsx
@@ -19,7 +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 { 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';
@@ -27,6 +26,7 @@ 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';
 
 export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryListFieldsFragment }) => {
     const { manga } = chapter;
@@ -75,23 +75,10 @@ export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryLi
                             thumbnailUrl={manga.thumbnailUrl}
                             thumbnailUrlLastFetched={manga.thumbnailUrlLastFetched}
                         />
-                        <Box
-                            sx={{
-                                display: 'flex',
-                                flexDirection: 'column',
-                                justifyContent: 'center',
-                                flexGrow: 1,
-                                flexShrink: 1,
-                                wordBreak: 'break-word',
-                            }}
-                        >
-                            <TypographyMaxLines variant="h6" component="h3">
-                                {manga.title}
-                            </TypographyMaxLines>
-                            <TypographyMaxLines variant="caption" display="block" lines={1}>
-                                {`${chapter.name} — ${timeFormatter.format(epochToDate(Number(chapter.lastReadAt)).valueOf())}`}
-                            </TypographyMaxLines>
-                        </Box>
+                        <ChapterCardMetadata
+                            title={manga.title}
+                            secondaryText={`${chapter.name} — ${timeFormatter.format(epochToDate(Number(chapter.lastReadAt)).valueOf())}`}
+                        />
                     </Box>
                     <DownloadStateIndicator chapterId={chapter.id} />
                     {download?.state === DownloadState.Error && (
diff --git a/src/modules/updates/components/ChapterUpdateCard.tsx b/src/modules/updates/components/ChapterUpdateCard.tsx
index 498f3523..658df1cb 100644
--- a/src/modules/updates/components/ChapterUpdateCard.tsx
+++ b/src/modules/updates/components/ChapterUpdateCard.tsx
@@ -19,13 +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 { 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';
+import { ChapterCardMetadata } from '@/modules/chapter/components/cards/ChapterCardMetadata.tsx';
 
 export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateListFieldsFragment }) => {
     const { manga } = chapter;
@@ -75,23 +75,7 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
                             thumbnailUrl={manga.thumbnailUrl}
                             thumbnailUrlLastFetched={manga.thumbnailUrlLastFetched}
                         />
-                        <Box
-                            sx={{
-                                display: 'flex',
-                                flexDirection: 'column',
-                                justifyContent: 'center',
-                                flexGrow: 1,
-                                flexShrink: 1,
-                                wordBreak: 'break-word',
-                            }}
-                        >
-                            <TypographyMaxLines variant="h6" component="h3">
-                                {manga.title}
-                            </TypographyMaxLines>
-                            <TypographyMaxLines variant="caption" display="block" lines={1}>
-                                {chapter.name}
-                            </TypographyMaxLines>
-                        </Box>
+                        <ChapterCardMetadata title={manga.title} secondaryText={chapter.name} />
                     </Box>
                     <DownloadStateIndicator chapterId={chapter.id} />
                     {download?.state === DownloadState.Error && (