diff --git a/src/modules/chapter/components/ChapterList.tsx b/src/modules/chapter/components/ChapterList.tsx index 8ce4f2b0..5f4e1cec 100644 --- a/src/modules/chapter/components/ChapterList.tsx +++ b/src/modules/chapter/components/ChapterList.tsx @@ -144,6 +144,11 @@ export const ChapterList = ({ const noChaptersFound = chapters.length === 0; const noChaptersMatchingFilter = !noChaptersFound && visibleChapters.length === 0; + const onSelect = useCallback( + (id: number, selected: boolean, selectRange?: boolean) => handleSelection(id, selected, { selectRange }), + [], + ); + if (isLoading || (noChaptersFound && isRefreshing)) { return ( @@ -238,11 +243,8 @@ export const ChapterList = ({ - handleSelection(chapters[index].id, selected, { selectRange }) - } + onSelect={onSelect} /> )} useWindowScroll={isMobileWidth} diff --git a/src/modules/chapter/components/actions/ChapterActionMenuItems.tsx b/src/modules/chapter/components/actions/ChapterActionMenuItems.tsx index 0d977af0..2704352e 100644 --- a/src/modules/chapter/components/actions/ChapterActionMenuItems.tsx +++ b/src/modules/chapter/components/actions/ChapterActionMenuItems.tsx @@ -38,6 +38,9 @@ import { import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'; import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts'; import { ChapterCard } from '@/modules/chapter/components/cards/ChapterCard.tsx'; +import { requestManager } from '@/lib/requests/RequestManager.ts'; +import { GetChaptersMangaQuery } from '@/lib/graphql/generated/graphql.ts'; +import { GET_CHAPTERS_MANGA } from '@/lib/graphql/queries/ChapterQuery.ts'; type BaseProps = { onClose: () => void; selectable?: boolean }; @@ -50,7 +53,6 @@ type TChapter = ChapterIdInfo & type SingleModeProps = { chapter: TChapter; - allChapters: TChapter[]; handleSelection?: SelectableCollectionReturnType['handleSelection']; canBeDownloaded: boolean; }; @@ -65,7 +67,6 @@ type Props = export const ChapterActionMenuItems = ({ chapter, - allChapters, handleSelection, canBeDownloaded = false, selectedChapters = [], @@ -77,6 +78,16 @@ export const ChapterActionMenuItems = ({ const isSingleMode = !!chapter; const { isDownloaded, isRead, isBookmarked } = chapter ?? {}; + const mangaChaptersResponse = requestManager.useGetMangaChapters( + GET_CHAPTERS_MANGA, + chapter?.mangaId ?? -1, + { + skip: !chapter, + fetchPolicy: 'cache-only', + }, + ); + const allChapters = mangaChaptersResponse.data?.chapters.nodes ?? []; + const { settings: { deleteChaptersWithBookmark }, } = useMetadataServerSettings(); diff --git a/src/modules/chapter/components/cards/ChapterCard.tsx b/src/modules/chapter/components/cards/ChapterCard.tsx index 713a2ba9..287a27ce 100644 --- a/src/modules/chapter/components/cards/ChapterCard.tsx +++ b/src/modules/chapter/components/cards/ChapterCard.tsx @@ -17,7 +17,7 @@ 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, { MouseEvent, TouchEvent, useRef } from 'react'; +import React, { memo, MouseEvent, TouchEvent, useRef } from 'react'; import { Link } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state'; @@ -51,15 +51,14 @@ type TChapter = ChapterIdInfo & interface IProps { mode?: 'manga.page' | 'reader'; chapter: TChapter; - allChapters: TChapter[]; showChapterNumber: boolean; - onSelect: (selected: boolean, isShiftKey?: boolean) => void; + onSelect: (id: number, selected: boolean, isShiftKey?: boolean) => void; selected: boolean | null; selectable?: boolean; isActiveChapter?: boolean; // reader } -export const ChapterCard: React.FC = (props: IProps) => { +export const ChapterCard = memo((props: IProps) => { const { t } = useTranslation(); const theme = useTheme(); @@ -68,7 +67,6 @@ export const ChapterCard: React.FC = (props: IProps) => { const { mode = 'manga.page', chapter, - allChapters, showChapterNumber, onSelect, selected, @@ -84,7 +82,7 @@ export const ChapterCard: React.FC = (props: IProps) => { event.preventDefault(); event.stopPropagation(); - onSelect(!selected, event.shiftKey); + onSelect(chapter.id, !selected, event.shiftKey); }; const handleClickOpenMenu = ( @@ -204,8 +202,7 @@ export const ChapterCard: React.FC = (props: IProps) => { onSelect(true)} + handleSelection={() => onSelect(chapter.id, true)} canBeDownloaded={Chapters.isDownloadable(chapter)} selectable={selectable} /> @@ -216,4 +213,4 @@ export const ChapterCard: React.FC = (props: IProps) => { )} ); -}; +}); diff --git a/src/modules/reader/components/overlay/navigation/ReaderChapterList.tsx b/src/modules/reader/components/overlay/navigation/ReaderChapterList.tsx index dab2494b..a7789650 100644 --- a/src/modules/reader/components/overlay/navigation/ReaderChapterList.tsx +++ b/src/modules/reader/components/overlay/navigation/ReaderChapterList.tsx @@ -11,6 +11,8 @@ import { useMemo } from 'react'; import { ChapterCard } from '@/modules/chapter/components/cards/ChapterCard.tsx'; import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts'; +const onSelectNoop = () => {}; + export const ReaderChapterList = ({ currentChapter, chapters, @@ -35,10 +37,9 @@ export const ReaderChapterList = ({ key={chapters[index].id} mode="reader" chapter={chapters[index]} - allChapters={chapters} showChapterNumber={false} selected={null} - onSelect={() => undefined} + onSelect={onSelectNoop} selectable={false} isActiveChapter={index === currentChapterIndex} />