Extract "chapter metadata" into component
This commit is contained in:
schroda
@@ -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}
|
||||
|
||||
64
src/modules/chapter/components/cards/ChapterCardMetadata.tsx
Normal file
64
src/modules/chapter/components/cards/ChapterCardMetadata.tsx
Normal file
@@ -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>
|
||||
);
|
||||
@@ -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 && (
|
||||
|
||||
@@ -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 && (
|
||||
|
||||
Reference in New Issue
Block a user