ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix download queue related TypeErrors

Browse Source 
With the changes from df006bb348, the requested download queue data changed not matching the previously used type.
The unnecessary cast then hid the tsc issues during compilation
This commit is contained in:
schroda
2024-07-11 17:41:38 +02:00
parent f33b0d70ba
commit bc01a945db
7 changed files with 49 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/chapter/ChapterCard.tsx
View File

@@ -24,13 +24,14 @@ import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
import { useLongPress } from 'use-long-press';
import { getDateString } from '@/util/date.ts';
import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator.tsx';
import { ChapterType, DownloadType } from '@/lib/graphql/generated/graphql.ts';
import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
import { ChapterActionMenuItems } from '@/components/chapter/ChapterActionMenuItems.tsx';
import { Menu } from '@/components/menu/Menu.tsx';
import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
import {
ChapterBookmarkInfo,
ChapterDownloadInfo,
ChapterDownloadStatus,
ChapterIdInfo,
ChapterMangaInfo,
ChapterNumberInfo,
@@ -50,7 +51,7 @@ type TChapter = ChapterIdInfo &
interface IProps {
chapter: TChapter;
allChapters: TChapter[];
downloadChapter: DownloadType | undefined;
downloadChapter: ChapterDownloadStatus | undefined;
showChapterNumber: boolean;
onSelect: (selected: boolean, isShiftKey?: boolean) => void;
selected: boolean | null;

24
src/components/chapter/ChapterList.tsx
View File

@@ -11,7 +11,7 @@ import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import React, { useMemo } from 'react';
import { ComponentProps, useMemo } from 'react';
import { Virtuoso } from 'react-virtuoso';
import { useTranslation } from 'react-i18next';
import IconButton from '@mui/material/IconButton';
@@ -28,7 +28,6 @@ import { ChaptersToolbarMenu } from '@/components/chapter/ChaptersToolbarMenu.ts
import { SelectionFAB } from '@/components/collection/SelectionFAB.tsx';
import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab.tsx';
import {
DownloadType,
GetChaptersMangaQuery,
GetChaptersMangaQueryVariables,
MangaScreenFieldsFragment,
@@ -36,7 +35,7 @@ import {
import { useSelectableCollection } from '@/components/collection/useSelectableCollection.ts';
import { SelectableCollectionSelectAll } from '@/components/collection/SelectableCollectionSelectAll.tsx';
import { Chapters } from '@/lib/data/Chapters.ts';
import { ChaptersWithMeta } from '@/lib/data/ChaptersWithMeta.ts';
import { ChaptersWithMeta, ChapterWithMetaType } from '@/lib/data/ChaptersWithMeta.ts';
import { ChapterActionMenuItems } from '@/components/chapter/ChapterActionMenuItems.tsx';
import { ChaptersDownloadActionMenuItems } from '@/components/chapter/ChaptersDownloadActionMenuItems.tsx';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
@@ -65,25 +64,24 @@ const StyledVirtuoso = styled(Virtuoso)(({ theme }) => ({
},
}));
export interface IChapterWithMeta {
chapter: React.ComponentProps<typeof ChapterCard>['chapter'];
downloadChapter: DownloadType | undefined;
export interface IChapterWithMeta extends ChapterWithMetaType<ComponentProps<typeof ChapterCard>['chapter']> {
selected: boolean | null;
}
interface IProps {
export const ChapterList = ({
manga,
isRefreshing,
}: {
manga: Pick<
MangaScreenFieldsFragment,
'id' | 'firstUnreadChapter' | 'chapters' | 'latestReadChapter' | 'unreadCount' | 'downloadCount'
>;
isRefreshing: boolean;
}
export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
}) => {
const { t } = useTranslation();
const { data: downloaderData } = requestManager.useGetDownloadStatus();
const queue = (downloaderData?.downloadStatus.queue as DownloadType[]) ?? [];
const queue = downloaderData?.downloadStatus.queue ?? [];
const [options, dispatch] = useChapterOptions(manga.id);
const {
@@ -117,9 +115,7 @@ export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
const chaptersWithMeta: IChapterWithMeta[] = useMemo(
() =>
visibleChapters.map((chapter) => {
const downloadChapter = queue?.find(
(cd) => cd.chapter.sourceOrder === chapter.sourceOrder && cd.chapter.manga.id === chapter.mangaId,
);
const downloadChapter = queue?.find((cd) => cd.chapter.id === chapter.id);
const selected = !areNoItemsSelected ? selectedItemIds.includes(chapter.id) : null;
return {
chapter,

10
src/components/molecules/DownloadStateIndicator.tsx
View File

@@ -9,14 +9,10 @@
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { TranslationKey } from '@/typings';
import { DownloadState, DownloadType } from '@/lib/graphql/generated/graphql.ts';
interface DownloadStateIndicatorProps {
download: DownloadType;
}
import { DownloadState } from '@/lib/graphql/generated/graphql.ts';
import { ChapterDownloadStatus } from '@/lib/data/Chapters.ts';
const DOWNLOAD_STATE_TO_TRANSLATION_KEY_MAP: { [state in DownloadState]: TranslationKey } = {
DOWNLOADING: 'download.state.label.downloading',
@@ -25,7 +21,7 @@ const DOWNLOAD_STATE_TO_TRANSLATION_KEY_MAP: { [state in DownloadState]: Transla
QUEUED: 'download.state.label.queued',
} as const;
export const DownloadStateIndicator: React.FC<DownloadStateIndicatorProps> = ({ download }) => {
export const DownloadStateIndicator = ({ download }: { download: ChapterDownloadStatus }) => {
const { t } = useTranslation();
return (

8
src/lib/data/Chapters.ts
View File

@@ -13,7 +13,11 @@ import { ChapterOffset, TranslationKey } from '@/typings.ts';
import { makeToast } from '@/components/util/Toast.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { getMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { ChapterListFieldsFragment, ChapterType } from '@/lib/graphql/generated/graphql.ts';
import {
ChapterListFieldsFragment,
ChapterType,
DownloadStatusFieldsFragment,
} from '@/lib/graphql/generated/graphql.ts';
import { CHAPTER_LIST_FIELDS } from '@/lib/graphql/fragments/ChapterFragments.ts';
import { MangaIdInfo } from '@/lib/data/Mangas.ts';
@@ -79,6 +83,8 @@ export const actionToTranslationKey: {
},
};
export type ChapterDownloadStatus = DownloadStatusFieldsFragment['queue'][number];
export type ChapterIdInfo = Pick<ChapterType, 'id'>;
export type ChapterMangaInfo = Pick<ChapterType, 'mangaId'>;
export type ChapterDownloadInfo = ChapterIdInfo & Pick<ChapterType, 'isDownloaded'>;

19
src/lib/data/ChaptersWithMeta.ts
View File

@@ -6,12 +6,21 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { DownloadType } from '@/lib/graphql/generated/graphql.ts';
import { ChapterBookmarkInfo, ChapterDownloadInfo, ChapterReadInfo, Chapters } from '@/lib/data/Chapters.ts';
import {
ChapterBookmarkInfo,
ChapterDownloadInfo,
ChapterDownloadStatus,
ChapterReadInfo,
Chapters,
} from '@/lib/data/Chapters.ts';
export type ChapterWithMetaType = {
chapter: ChapterDownloadInfo & ChapterReadInfo & ChapterBookmarkInfo;
downloadChapter: DownloadType | undefined;
export type ChapterWithMetaType<
Chapter extends ChapterDownloadInfo & ChapterReadInfo & ChapterBookmarkInfo = ChapterDownloadInfo &
ChapterReadInfo &
ChapterBookmarkInfo,
> = {
chapter: Chapter;
downloadChapter: ChapterDownloadStatus | undefined;
};
export class ChaptersWithMeta {

19
src/screens/DownloadQueue.tsx
View File

@@ -28,11 +28,10 @@ import { StrictModeDroppable } from '@/lib/StrictModeDroppable';
import { makeToast } from '@/components/util/Toast';
import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator';
import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
import { ChapterType, DownloadType } from '@/lib/graphql/generated/graphql.ts';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
import { ChapterIdInfo } from '@/lib/data/Chapters.ts';
import { ChapterDownloadStatus, ChapterIdInfo } from '@/lib/data/Chapters.ts';
const HeightPreservingItem = ({ children, ...props }: BoxProps) => (
// the height is necessary to prevent the item container from collapsing, which confuses Virtuoso measurements
@@ -48,9 +47,9 @@ const DownloadChapterItem = ({
handleDelete,
}: {
provided: DraggableProvided;
item: DownloadType;
item: ChapterDownloadStatus;
isDragging: boolean;
handleDelete: (chapter: ChapterType) => void;
handleDelete: (chapter: ChapterIdInfo) => void;
}) => {
const { t } = useTranslation();
@@ -63,7 +62,7 @@ const DownloadChapterItem = ({
>
<CardActionArea
component={Link}
to={`/manga/${item.chapter.manga.id}`}
to={`/manga/${item.manga.id}`}
sx={{
display: 'flex',
alignItems: 'center',
@@ -74,7 +73,7 @@ const DownloadChapterItem = ({
<DragHandle />
</IconButton>
<Stack sx={{ flex: 1, ml: 1 }} direction="column">
<Typography variant="h6">{item.chapter.manga.title}</Typography>
<Typography variant="h6">{item.manga.title}</Typography>
<Typography variant="caption" display="block" gutterBottom>
{item.chapter.name}
</Typography>
@@ -111,7 +110,7 @@ export const DownloadQueue: React.FC = () => {
} = requestManager.useGetDownloadStatus({ notifyOnNetworkStatusChange: true });
const downloaderData = downloadStatusData?.downloadStatus;
const queue = (downloaderData?.queue as DownloadType[]) ?? [];
const queue = downloaderData?.queue ?? [];
const status = downloaderData?.state ?? 'STARTED';
const isQueueEmpty = !queue.length;
@@ -174,7 +173,7 @@ export const DownloadQueue: React.FC = () => {
return () => window.removeEventListener('error', ignoreError);
}, []);
const categoryReorder = (list: DownloadType[], from: number, to: number) => {
const categoryReorder = (list: ChapterDownloadStatus[], from: number, to: number) => {
if (from === to) {
return;
}
@@ -262,8 +261,8 @@ export const DownloadQueue: React.FC = () => {
}}
itemContent={(index, item) => (
<Draggable
key={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`}
draggableId={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`}
key={`${item.manga.id}-${item.chapter.sourceOrder}`}
draggableId={`${item.manga.id}-${item.chapter.sourceOrder}`}
index={index}
>
{(draggableProvided) => (

6
src/screens/Updates.tsx
View File

@@ -22,7 +22,7 @@ import { requestManager } from '@/lib/requests/RequestManager.ts';
import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator';
import { ChapterType, DownloadType } from '@/lib/graphql/generated/graphql.ts';
import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { UpdateChecker } from '@/components/library/UpdateChecker.tsx';
import { StyledGroupedVirtuoso } from '@/components/virtuoso/StyledGroupedVirtuoso.tsx';
@@ -70,7 +70,7 @@ export const Updates: React.FC = () => {
const groupedUpdates = useMemo(() => groupByDate(updateEntries), [updateEntries]);
const groupCounts: number[] = useMemo(() => groupedUpdates.map((group) => group[1]), [groupedUpdates]);
const { data: downloaderData } = requestManager.useGetDownloadStatus();
const queue = (downloaderData?.downloadStatus.queue as DownloadType[]) ?? [];
const queue = downloaderData?.downloadStatus.queue ?? [];
const lastUpdateTimestampCompRef = useRef<HTMLElement>(null);
const [lastUpdateTimestampCompHeight, setLastUpdateTimestampCompHeight] = useState(0);
@@ -98,7 +98,7 @@ export const Updates: React.FC = () => {
const downloadForChapter = (chapter: Pick<ChapterType, 'sourceOrder'> & ChapterMangaInfo) => {
const { sourceOrder, mangaId } = chapter;
return queue.find((q) => sourceOrder === q.chapter.sourceOrder && mangaId === q.chapter.manga.id);
return queue.find((q) => sourceOrder === q.chapter.sourceOrder && mangaId === q.manga.id);
};
const downloadChapter = (chapter: ChapterIdInfo) => {