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

Update typings

Browse Source
This commit is contained in:
schroda
2023-10-15 16:03:08 +02:00
parent 16ebfcb51f
commit b3a432ed2e
25 changed files with 124 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ExtensionCard.tsx
View File

@@ -14,11 +14,11 @@ import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import { Box } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { Extension, TranslationKey } from '@/typings';
import { PartialExtension, TranslationKey } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
interface IProps {
extension: Extension;
extension: PartialExtension;
}
enum ExtensionAction {

8
src/components/MangaCard.tsx
View File

@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
import requestManager from '@/lib/requests/RequestManager.ts';
import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
import SpinnerImage from '@/components/util/SpinnerImage';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
import { TPartialManga } from '@/typings.ts';
const BottomGradient = styled('div')({
position: 'absolute',
@@ -66,7 +66,7 @@ const BadgeContainer = styled('div')({
});
interface IProps {
manga: MangaType;
manga: TPartialManga;
gridLayout?: GridLayout;
inLibraryIndicator?: boolean;
}
@@ -120,10 +120,10 @@ const MangaCard = (props: IProps) => {
{t('manga.button.in_library')}
</Typography>
)}
{showUnreadBadge && unread! > 0 && (
{showUnreadBadge && (unread ?? 0) > 0 && (
<Typography sx={{ backgroundColor: 'primary.dark' }}>{unread}</Typography>
)}
{showDownloadBadge && downloadCount! > 0 && (
{showDownloadBadge && (downloadCount ?? 0) > 0 && (
<Typography
sx={{
backgroundColor: 'success.dark',

8
src/components/MangaGrid.tsx
View File

@@ -16,7 +16,7 @@ import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
import MangaCard from '@/components/MangaCard';
import { GridLayout } from '@/components/context/LibraryOptionsContext';
import useLocalStorage from '@/util/useLocalStorage';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
import { TPartialManga } from '@/typings.ts';
const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({ children, ...props }, ref) => (
<Grid {...props} ref={ref} container sx={{ paddingLeft: '5px', paddingRight: '13px' }}>
@@ -40,13 +40,13 @@ const GridItemContainerWithDimension = (
);
};
const createMangaCard = (manga: MangaType, gridLayout?: GridLayout, inLibraryIndicator?: boolean) => (
const createMangaCard = (manga: TPartialManga, gridLayout?: GridLayout, inLibraryIndicator?: boolean) => (
<MangaCard key={manga.id} manga={manga} gridLayout={gridLayout} inLibraryIndicator={inLibraryIndicator} />
);
type DefaultGridProps = {
isLoading: boolean;
mangas: MangaType[];
mangas: TPartialManga[];
inLibraryIndicator?: boolean;
GridItemContainer: (props: GridTypeMap['props'] & Partial<GridItemProps>) => JSX.Element;
gridLayout?: GridLayout;
@@ -150,7 +150,7 @@ const VerticalGrid = ({
};
export interface IMangaGridProps {
mangas: MangaType[];
mangas: TPartialManga[];
isLoading: boolean;
message?: string;
messageExtra?: JSX.Element;

29
src/components/library/LibraryMangaGrid.tsx
View File

@@ -9,13 +9,12 @@
import React, { useEffect, useMemo } from 'react';
import { StringParam, useQueryParam } from 'use-query-params';
import { useTranslation } from 'react-i18next';
import { LibrarySortMode, NullAndUndefined } from '@/typings';
import { LibrarySortMode, NullAndUndefined, TManga } from '@/typings';
import { useSearchSettings } from '@/util/searchSettings';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
import MangaGrid from '@/components/MangaGrid';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
const unreadFilter = (unread: NullAndUndefined<boolean>, { unreadCount }: MangaType): boolean => {
const unreadFilter = (unread: NullAndUndefined<boolean>, { unreadCount }: TManga): boolean => {
switch (unread) {
case true:
return !!unreadCount && unreadCount >= 1;
@@ -26,7 +25,7 @@ const unreadFilter = (unread: NullAndUndefined<boolean>, { unreadCount }: MangaT
}
};
const downloadedFilter = (downloaded: NullAndUndefined<boolean>, { downloadCount }: MangaType): boolean => {
const downloadedFilter = (downloaded: NullAndUndefined<boolean>, { downloadCount }: TManga): boolean => {
switch (downloaded) {
case true:
return !!downloadCount && downloadCount >= 1;
@@ -37,24 +36,24 @@ const downloadedFilter = (downloaded: NullAndUndefined<boolean>, { downloadCount
}
};
const queryFilter = (query: NullAndUndefined<string>, { title }: MangaType): boolean => {
const queryFilter = (query: NullAndUndefined<string>, { title }: TManga): boolean => {
if (!query) return true;
return title.toLowerCase().includes(query.toLowerCase());
};
const queryGenreFilter = (query: NullAndUndefined<string>, { genre }: MangaType): boolean => {
const queryGenreFilter = (query: NullAndUndefined<string>, { genre }: TManga): boolean => {
if (!query) return true;
const queries = query.split(',').map((str) => str.toLowerCase().trim());
return queries.every((element) => genre.map((el) => el.toLowerCase()).includes(element));
};
const filterManga = (
mangas: MangaType[],
mangas: TManga[],
query: NullAndUndefined<string>,
unread: NullAndUndefined<boolean>,
downloaded: NullAndUndefined<boolean>,
ignoreFilters: boolean,
): MangaType[] =>
): TManga[] =>
mangas.filter((manga) => {
const ignoreFiltersWhileSearching = ignoreFilters && query?.length;
const matchesSearch = queryFilter(query, manga) || queryGenreFilter(query, manga);
@@ -64,20 +63,20 @@ const filterManga = (
return matchesSearch && matchesFilters;
});
const sortByUnread = (a: MangaType, b: MangaType): number => (a.unreadCount ?? 0) - (b.unreadCount ?? 0);
const sortByUnread = (a: TManga, b: TManga): number => (a.unreadCount ?? 0) - (b.unreadCount ?? 0);
const sortByTitle = (a: MangaType, b: MangaType): number => a.title.localeCompare(b.title);
const sortByTitle = (a: TManga, b: TManga): number => a.title.localeCompare(b.title);
const sortByDateAdded = (a: MangaType, b: MangaType): number => Number(a.inLibraryAt) - Number(b.inLibraryAt);
const sortByDateAdded = (a: TManga, b: TManga): number => Number(a.inLibraryAt) - Number(b.inLibraryAt);
const sortByLastRead = (a: MangaType, b: MangaType): number =>
const sortByLastRead = (a: TManga, b: TManga): number =>
Number(b.lastReadChapter?.lastReadAt ?? 0) - Number(a.lastReadChapter?.lastReadAt ?? 0);
const sortManga = (
manga: MangaType[],
manga: TManga[],
sort: NullAndUndefined<LibrarySortMode>,
desc: NullAndUndefined<boolean>,
): MangaType[] => {
): TManga[] => {
const result = [...manga];
switch (sort) {
@@ -105,7 +104,7 @@ const sortManga = (
};
interface LibraryMangaGridProps {
mangas: MangaType[];
mangas: TManga[];
isLoading: boolean;
message?: string;
}

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

@@ -30,10 +30,11 @@ import { useTranslation } from 'react-i18next';
import requestManager from '@/lib/requests/RequestManager.ts';
import { getUploadDateString } from '@/util/date';
import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
import { ChapterType, DownloadType, UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
import { DownloadType, UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
import { TChapter } from '@/typings.ts';
interface IProps {
chapter: ChapterType;
chapter: TChapter;
chapterIds: number[];
downloadChapter: DownloadType | undefined;
showChapterNumber: boolean;

13
src/components/manga/ChapterList.tsx
View File

@@ -11,7 +11,7 @@ import Typography from '@mui/material/Typography';
import React, { ComponentProps, useEffect, useMemo, useRef, useState } from 'react';
import { Virtuoso } from 'react-virtuoso';
import { useTranslation } from 'react-i18next';
import { TranslationKey } from '@/typings';
import { TChapter, TManga, TranslationKey } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import ChapterCard from '@/components/manga/ChapterCard';
import ResumeFab from '@/components/manga/ResumeFAB';
@@ -21,7 +21,7 @@ import makeToast from '@/components/util/Toast';
import ChaptersToolbarMenu from '@/components/manga/ChaptersToolbarMenu';
import SelectionFAB from '@/components/manga/SelectionFAB';
import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab';
import { ChapterType, DownloadType, MangaType, UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
import { DownloadType, UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
const StyledVirtuoso = styled(Virtuoso)(({ theme }) => ({
listStyle: 'none',
@@ -68,13 +68,13 @@ const actionsStrings: {
};
export interface IChapterWithMeta {
chapter: ChapterType;
chapter: TChapter;
downloadChapter: DownloadType | undefined;
selected: boolean | null;
}
interface IProps {
manga: MangaType;
manga: TManga;
isRefreshing: boolean;
}
@@ -88,10 +88,7 @@ const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
const [options, dispatch] = useChapterOptions(manga.id);
const { data: chaptersData, loading: isLoading, refetch } = requestManager.useGetMangaChapters(manga.id);
const chapters = useMemo(
() => (chaptersData?.chapters.nodes as ChapterType[]) ?? [],
[chaptersData?.chapters.nodes],
);
const chapters = useMemo(() => chaptersData?.chapters.nodes ?? [], [chaptersData?.chapters.nodes]);
const mangaChapterIds = useMemo(() => chapters.map((chapter) => chapter.id), [chapters]);
useEffect(() => {

5
src/components/manga/MangaDetails.tsx
View File

@@ -14,10 +14,9 @@ import React, { useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { t as translate } from 'i18next';
import Button from '@mui/material/Button';
import { ISource } from '@/typings';
import { ISource, TManga } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import makeToast from '@/components/util/Toast';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
const DetailsWrapper = styled('div')(({ theme }) => ({
width: '100%',
@@ -151,7 +150,7 @@ const OpenSourceButton = ({ url }: { url?: string | null }) => {
};
interface IProps {
manga: MangaType;
manga: TManga;
}
function getSourceName(source?: ISource | null) {

4
src/components/manga/MangaToolbarMenu.tsx
View File

@@ -22,10 +22,10 @@ import {
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import CategorySelect from '@/components/navbar/action/CategorySelect';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
import { TManga } from '@/typings.ts';
interface IProps {
manga: MangaType;
manga: TManga;
onRefresh: () => any;
refreshing: boolean;
}

10
src/components/manga/util.tsx
View File

@@ -12,10 +12,10 @@ import {
ChapterOptionsReducerAction,
ChapterSortMode,
NullAndUndefined,
TChapter,
TranslationKey,
} from '@/typings';
import { useReducerLocalStorage } from '@/util/useLocalStorage';
import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
const defaultChapterOptions: ChapterListOptions = {
active: false,
@@ -46,7 +46,7 @@ function chapterOptionsReducer(state: ChapterListOptions, actions: ChapterOption
}
}
export function unreadFilter(unread: NullAndUndefined<boolean>, { isRead: isChapterRead }: ChapterType) {
export function unreadFilter(unread: NullAndUndefined<boolean>, { isRead: isChapterRead }: TChapter) {
switch (unread) {
case true:
return !isChapterRead;
@@ -57,7 +57,7 @@ export function unreadFilter(unread: NullAndUndefined<boolean>, { isRead: isChap
}
}
function downloadFilter(downloaded: NullAndUndefined<boolean>, { isDownloaded: chapterDownload }: ChapterType) {
function downloadFilter(downloaded: NullAndUndefined<boolean>, { isDownloaded: chapterDownload }: TChapter) {
switch (downloaded) {
case true:
return chapterDownload;
@@ -68,7 +68,7 @@ function downloadFilter(downloaded: NullAndUndefined<boolean>, { isDownloaded: c
}
}
function bookmarkedFilter(bookmarked: NullAndUndefined<boolean>, { isBookmarked: chapterBookmarked }: ChapterType) {
function bookmarkedFilter(bookmarked: NullAndUndefined<boolean>, { isBookmarked: chapterBookmarked }: TChapter) {
switch (bookmarked) {
case true:
return chapterBookmarked;
@@ -79,7 +79,7 @@ function bookmarkedFilter(bookmarked: NullAndUndefined<boolean>, { isBookmarked:
}
}
export function filterAndSortChapters(chapters: ChapterType[], options: ChapterListOptions): ChapterType[] {
export function filterAndSortChapters(chapters: TChapter[], options: ChapterListOptions): TChapter[] {
const filtered = options.active
? chapters.filter(
(chp) =>

7
src/components/navbar/ReaderNavBar.tsx
View File

@@ -24,9 +24,8 @@ import ListItemText from '@mui/material/ListItemText';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import Collapse from '@mui/material/Collapse';
import { useTranslation } from 'react-i18next';
import { ChapterOffset, IReaderSettings } from '@/typings';
import { ChapterOffset, IReaderSettings, TChapter, TManga } from '@/typings';
import ReaderSettingsOptions from '@/components/reader/ReaderSettingsOptions';
import { ChapterType, MangaType } from '@/lib/graphql/generated/graphql.ts';
const Root = styled('div')(({ theme }) => ({
top: 0,
@@ -115,8 +114,8 @@ const OpenDrawerButton = styled(IconButton)(({ theme }) => ({
interface IProps {
settings: IReaderSettings;
setSettingValue: (key: keyof IReaderSettings, value: string | boolean) => void;
manga: MangaType;
chapter: ChapterType;
manga: TManga;
chapter: TChapter;
curPage: number;
scrollToPage: (page: number) => void;
openNextChapter: (offset: ChapterOffset, setHistory: (nextChapterIndex: number) => void) => Promise<void>;

4
src/components/source/SourceMangaGrid.tsx
View File

@@ -8,9 +8,9 @@
import { useTranslation } from 'react-i18next';
import MangaGrid, { IMangaGridProps } from '@/components/MangaGrid';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
import { TPartialManga } from '@/typings.ts';
function filterManga(mangas: MangaType[]): MangaType[] {
function filterManga(mangas: TPartialManga[]): TPartialManga[] {
return mangas;
}

5
src/screens/DownloadQueue.tsx
View File

@@ -25,7 +25,8 @@ import { NavbarToolbar } from '@/components/navbar/DefaultNavBar';
import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
import EmptyView from '@/components/util/EmptyView';
import NavbarContext from '@/components/context/NavbarContext';
import { ChapterType, DownloadType } from '@/lib/graphql/generated/graphql.ts';
import { DownloadType } from '@/lib/graphql/generated/graphql.ts';
import { TChapter } from '@/typings.ts';
const DownloadQueue: React.FC = () => {
const { t } = useTranslation();
@@ -55,7 +56,7 @@ const DownloadQueue: React.FC = () => {
return <EmptyView message={t('download.queue.label.no_downloads')} />;
}
const handleDelete = async (chapter: ChapterType) => {
const handleDelete = async (chapter: TChapter) => {
const isRunning = status === 'STARTED';
try {

8
src/screens/Extensions.tsx
View File

@@ -30,12 +30,12 @@ import { makeToaster } from '@/components/util/Toast';
import LangSelect from '@/components/navbar/action/LangSelect';
import NavbarContext from '@/components/context/NavbarContext';
import ExtensionCard from '@/components/ExtensionCard';
import { Extension } from '@/typings.ts';
import { PartialExtension } from '@/typings.ts';
const LANGUAGE = 0;
const EXTENSIONS = 1;
function getExtensionsInfo(extensions: Extension[]): {
function getExtensionsInfo(extensions: PartialExtension[]): {
allLangs: string[];
groupedExtensions: GroupedExtensionsResult;
} {
@@ -132,7 +132,7 @@ export default function MangaExtensions() {
[shownLangs, groupedExtensions],
);
const flatRenderItems: (Extension | string)[] = filteredGroupedExtensions.flat(2);
const flatRenderItems: (PartialExtension | string)[] = filteredGroupedExtensions.flat(2);
const [toasts, makeToast] = makeToaster(useState<React.ReactElement[]>([]));
@@ -229,7 +229,7 @@ export default function MangaExtensions() {
</Typography>
);
}
const item = flatRenderItems[index] as Extension;
const item = flatRenderItems[index] as PartialExtension;
return <ExtensionCard key={item.apkName} extension={item} />;
}}

5
src/screens/Library.tsx
View File

@@ -7,7 +7,7 @@
*/
import { Chip, Tab, Tabs, styled, Box } from '@mui/material';
import React, { useContext, useEffect, useMemo, useRef } from 'react';
import React, { useContext, useEffect, useMemo } from 'react';
import { useQueryParam, NumberParam } from 'use-query-params';
import { useTranslation } from 'react-i18next';
import requestManager from '@/lib/requests/RequestManager.ts';
@@ -20,7 +20,6 @@ import LibraryMangaGrid from '@/components/library/LibraryMangaGrid';
import AppbarSearch from '@/components/util/AppbarSearch';
import UpdateChecker from '@/components/library/UpdateChecker';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
const StyledGridWrapper = styled(Box)(({ theme }) => ({
// TabsMenu height + TabsMenu bottom padding - grid item top padding
@@ -85,7 +84,7 @@ export default function Library() {
error: mangaError,
loading: mangaLoading,
} = requestManager.useGetCategoryMangas(activeTab?.id, { skip: !activeTab, nextFetchPolicy: 'cache-only' });
const mangas = (categoryMangaResponse?.category.mangas.nodes as unknown as MangaType[]) ?? [];
const mangas = categoryMangaResponse?.category.mangas.nodes ?? [];
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => {

3
src/screens/Manga.tsx
View File

@@ -20,7 +20,6 @@ import MangaDetails from '@/components/manga/MangaDetails';
import MangaToolbarMenu from '@/components/manga/MangaToolbarMenu';
import EmptyView from '@/components/util/EmptyView';
import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
const AUTOFETCH_AGE = 1000 * 60 * 60 * 24; // 24 hours
@@ -33,7 +32,7 @@ const Manga: React.FC = () => {
const { data, error, loading: isLoading, networkStatus, refetch } = requestManager.useGetManga(id);
const isValidating = isNetworkRequestInFlight(networkStatus);
const manga = data?.manga as MangaType | undefined;
const manga = data?.manga;
const [refresh, { loading: refreshing }] = useRefreshManga(id);
useSetDefaultBackTo('library');

17
src/screens/Reader.tsx
View File

@@ -11,7 +11,7 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'r
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { Box } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { ChapterOffset, IReaderSettings, ReaderType, TranslationKey } from '@/typings';
import { ChapterOffset, IReaderSettings, ReaderType, TChapter, TManga, TranslationKey } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import {
checkAndHandleMissingStoredReaderSettings,
@@ -27,9 +27,8 @@ import VerticalPager from '@/components/reader/pager/VerticalPager';
import ReaderNavBar from '@/components/navbar/ReaderNavBar';
import NavbarContext from '@/components/context/NavbarContext';
import makeToast from '@/components/util/Toast';
import { ChapterType, MangaType } from '@/lib/graphql/generated/graphql.ts';
const isDupChapter = async (chapterIndex: number, currentChapter: ChapterType) => {
const isDupChapter = async (chapterIndex: number, currentChapter: TChapter) => {
const nextChapter = await requestManager.getChapter(currentChapter.manga.id, chapterIndex).response;
return nextChapter.data.chapter.chapterNumber === currentChapter.chapterNumber;
@@ -42,7 +41,7 @@ const isDupChapter = async (chapterIndex: number, currentChapter: ChapterType) =
*/
const getOffsetChapter = async (
chapterIndex: number,
currentChapter: ChapterType,
currentChapter: TChapter,
skipDupChapters: boolean,
offset: ChapterOffset,
): Promise<number> => {
@@ -86,7 +85,7 @@ const initialChapter = {
chapterCount: 0,
lastPageRead: 0,
name: 'Loading...',
} as unknown as ChapterType;
} as unknown as TChapter;
export default function Reader() {
const { t } = useTranslation();
@@ -105,17 +104,17 @@ export default function Reader() {
inLibraryAt: 0,
lastReadAt: 0,
chapters: { totalCount: 0 },
}) as unknown as MangaType,
}) as unknown as TManga,
[mangaId],
);
const { data, loading: isMangaLoading } = requestManager.useGetManga(mangaId);
const loadedChapter = useRef<ChapterType | null>(null);
const loadedChapter = useRef<TChapter | null>(null);
const isChapterLoaded =
Number(mangaId) === loadedChapter.current?.manga.id &&
Number(chapterIndex) === loadedChapter.current?.sourceOrder &&
loadedChapter.current?.pageCount !== -1;
const manga = (data?.manga as MangaType) ?? initialManga;
const manga = data?.manga ?? initialManga;
const { data: chapterData, loading: isChapterLoading } = requestManager.useGetMangaChapter(mangaId, chapterIndex, {
skip: isChapterLoaded,
});
@@ -129,7 +128,7 @@ export default function Reader() {
}
if (chapterData?.chapter) {
return chapterData.chapter as ChapterType;
return chapterData.chapter;
}
return null;

3
src/screens/SearchAll.tsx
View File

@@ -21,7 +21,6 @@ import LangSelect from '@/components/navbar/action/LangSelect';
import MangaGrid from '@/components/MangaGrid';
import NavbarContext from '@/components/context/NavbarContext';
import { useDebounce } from '@/components/manga/hooks';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean };
type SourceToLoadingStateMap = Map<string, SourceLoadingState>;
@@ -103,7 +102,7 @@ const SourceSearchPreview = React.memo(
skipRequest: !searchString,
});
const { data: searchResult, isLoading, error, abortRequest } = results[0]!;
const mangas = (searchResult?.fetchSourceManga.mangas as MangaType[]) ?? [];
const mangas = searchResult?.fetchSourceManga.mangas ?? [];
const noMangasFound = !isLoading && !mangas.length;
useEffect(() => {

11
src/screens/SourceMangas.tsx
View File

@@ -17,7 +17,7 @@ import { Box, Button, styled, useTheme, useMediaQuery } from '@mui/material';
import FavoriteIcon from '@mui/icons-material/Favorite';
import NewReleasesIcon from '@mui/icons-material/NewReleases';
import FilterListIcon from '@mui/icons-material/FilterList';
import { TranslationKey } from '@/typings';
import { TPartialManga, TranslationKey } from '@/typings';
import requestManager, { AbortableApolloUseMutationPaginatedResponse } from '@/lib/requests/RequestManager.ts';
import { useDebounce } from '@/components/manga/hooks';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
@@ -29,7 +29,6 @@ import SourceMangaGrid from '@/components/source/SourceMangaGrid';
import {
GetSourceMangasFetchMutation,
GetSourceMangasFetchMutationVariables,
MangaType,
} from '@/lib/graphql/generated/graphql.ts';
const ContentTypeMenu = styled('div')(({ theme }) => ({
@@ -87,8 +86,8 @@ const SOURCE_CONTENT_TYPE_TO_ERROR_MSG_KEY: { [contentType in SourceContentType]
[SourceContentType.SEARCH]: 'manga.error.label.no_mangas_found',
};
const getUniqueMangas = (mangas: MangaType[]): MangaType[] => {
const uniqueMangas: MangaType[] = [];
const getUniqueMangas = (mangas: TPartialManga[]): TPartialManga[] => {
const uniqueMangas: TPartialManga[] = [];
mangas.forEach((manga) => {
const isDuplicate = uniqueMangas.some((uniqueManga) => uniqueManga.id === manga.id);
@@ -166,7 +165,7 @@ const useSourceManga = (
.map((page) => page.data?.fetchSourceManga.mangas ?? [])
.reduce((prevList, list) => [...prevList, ...list], []),
[pages],
) as MangaType[];
);
const uniqueItems = useMemo(() => getUniqueMangas(items), [items]);
if (!uniqueItems.length) {
@@ -224,7 +223,7 @@ export default function SourceMangas() {
filtersToApply,
isLargeScreen ? 2 : 1,
);
const mangas = (data?.fetchSourceManga.mangas as MangaType[]) ?? [];
const mangas = data?.fetchSourceManga.mangas ?? [];
const hasNextPage = data?.fetchSourceManga.hasNextPage ?? false;
const { data: sourceData } = requestManager.useGetSource(sourceId);

11
src/screens/Updates.tsx
View File

@@ -23,7 +23,8 @@ import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
import EmptyView from '@/components/util/EmptyView';
import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
import NavbarContext from '@/components/context/NavbarContext';
import { ChapterType, DownloadType } from '@/lib/graphql/generated/graphql.ts';
import { DownloadType } from '@/lib/graphql/generated/graphql.ts';
import { TChapter } from '@/typings.ts';
const StyledGroupedVirtuoso = styled(GroupedVirtuoso)(({ theme }) => ({
// 64px header
@@ -81,7 +82,7 @@ function getDateString(date: Date) {
return date.toLocaleDateString();
}
const groupByDate = (updates: ChapterType[]): [date: string, items: number][] => {
const groupByDate = (updates: TChapter[]): [date: string, items: number][] => {
if (!updates.length) {
return [];
}
@@ -111,7 +112,7 @@ const Updates: React.FC = () => {
});
const hasNextPage = !!chapterUpdateData?.chapters.pageInfo.hasNextPage;
const endCursor = chapterUpdateData?.chapters.pageInfo.endCursor;
const updateEntries = (chapterUpdateData?.chapters.nodes as ChapterType[]) ?? [];
const updateEntries = chapterUpdateData?.chapters.nodes ?? [];
const groupedUpdates = useMemo(() => groupByDate(updateEntries), [updateEntries]);
const groupCounts: number[] = useMemo(() => groupedUpdates.map((group) => group[1]), [groupedUpdates]);
const { data: downloaderData } = requestManager.useDownloadSubscription();
@@ -123,7 +124,7 @@ const Updates: React.FC = () => {
setAction(null);
}, [t]);
const downloadForChapter = (chapter: ChapterType) => {
const downloadForChapter = (chapter: TChapter) => {
const {
sourceOrder,
manga: { id: mangaId },
@@ -131,7 +132,7 @@ const Updates: React.FC = () => {
return queue.find((q) => sourceOrder === q.chapter.sourceOrder && mangaId === q.chapter.manga.id);
};
const downloadChapter = (chapter: ChapterType) => {
const downloadChapter = (chapter: TChapter) => {
requestManager.addChapterToDownloadQueue(chapter.id);
};

6
src/screens/settings/Categories.tsx
View File

@@ -28,7 +28,7 @@ import requestManager from '@/lib/requests/RequestManager.ts';
import StrictModeDroppable from '@/lib/StrictModeDroppable';
import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab';
import NavbarContext, { useSetDefaultBackTo } from '@/components/context/NavbarContext';
import { CategoryType } from '@/lib/graphql/generated/graphql.ts';
import { TCategory } from '@/typings.ts';
const getItemStyle = (
isDragging: boolean,
@@ -58,7 +58,7 @@ export default function Categories() {
if (res.length > 0 && res[0].name === 'Default') {
res.shift();
}
return res as CategoryType[];
return res;
}, [data]);
const [categoryToEdit, setCategoryToEdit] = useState<number>(-1); // -1 means new category
@@ -69,7 +69,7 @@ export default function Categories() {
useSetDefaultBackTo('settings');
const categoryReorder = (list: CategoryType[], from: number, to: number) => {
const categoryReorder = (list: TCategory[], from: number, to: number) => {
const reorderedCategory = list[from];
const newData = [...list];
const [removed] = newData.splice(from, 1);

19
src/screens/settings/LibrarySettings.tsx
View File

@@ -25,7 +25,8 @@ import makeToast from '@/components/util/Toast';
import ThreeStateCheckboxInput from '@/components/atoms/ThreeStateCheckboxInput';
import NavbarContext, { useSetDefaultBackTo } from '@/components/context/NavbarContext';
import SearchSettings from '@/screens/settings/SearchSettings';
import { CategoryType, IncludeInUpdate } from '@/lib/graphql/generated/graphql.ts';
import { IncludeInUpdate } from '@/lib/graphql/generated/graphql.ts';
import { TCategory } from '@/typings.ts';
const CategoriesDiv = styled('div')({
display: 'flex',
@@ -62,7 +63,7 @@ const includeInUpdateStatusToBoolean = (status: IncludeInUpdate): boolean | null
};
const getCategoryUpdateInfo = (
categories: CategoryType[],
categories: TCategory[],
areIncluded: boolean,
unsetCategories: number,
allCategories: number,
@@ -100,19 +101,19 @@ export default function LibrarySettings() {
useSetDefaultBackTo('settings');
const { data, error: requestError } = requestManager.useGetCategories();
const categories = (data?.categories.nodes ?? []) as CategoryType[];
const [dialogCategories, setDialogCategories] = useState<CategoryType[]>(categories);
const categories = data?.categories.nodes ?? [];
const [dialogCategories, setDialogCategories] = useState<TCategory[]>(categories);
const [isDialogOpen, setIsDialogOpen] = useState(false);
useEffect(() => {
setDialogCategories(categories);
}, [categories]);
const unsetCategories: CategoryType[] =
const unsetCategories: TCategory[] =
categories?.filter((category) => category.includeInUpdate === IncludeInUpdate.Unset) ?? [];
const excludedCategories: CategoryType[] =
const excludedCategories: TCategory[] =
categories?.filter((category) => category.includeInUpdate === IncludeInUpdate.Exclude) ?? [];
const includedCategories: CategoryType[] =
const includedCategories: TCategory[] =
categories?.filter((category) => category.includeInUpdate === IncludeInUpdate.Include) ?? [];
const excludedCategoriesText = getCategoryUpdateInfo(
excludedCategories,
@@ -129,7 +130,7 @@ export default function LibrarySettings() {
requestError,
);
const updateCategory = (category: CategoryType) =>
const updateCategory = (category: TCategory) =>
requestManager.updateCategory(category.id, { includeInUpdate: category.includeInUpdate }).response;
const updateCategories = async () => {
@@ -218,7 +219,7 @@ export default function LibrarySettings() {
const categoryIndex = dialogCategories.findIndex(
(category_) => category_ === category,
);
const updatedDialogCategories: CategoryType[] = [
const updatedDialogCategories: TCategory[] = [
...dialogCategories.slice(0, categoryIndex),
{
...category,

10
src/screens/util/Extensions.ts
View File

@@ -7,7 +7,7 @@
*/
import { t } from 'i18next';
import { Extension, TranslationKey } from '@/typings';
import { PartialExtension, TranslationKey } from '@/typings';
import { DefaultLanguage, langCodeToName } from '@/util/language';
export enum ExtensionState {
@@ -16,16 +16,16 @@ export enum ExtensionState {
OBSOLETE = 'OBSOLETE',
}
export type GroupedExtensionsResult<KEY extends string = string> = [KEY, Extension[]][];
export type GroupedExtensionsResult<KEY extends string = string> = [KEY, PartialExtension[]][];
export type GroupedByExtensionState = {
[state in ExtensionState]: Extension[];
[state in ExtensionState]: PartialExtension[];
};
export type GroupedByLanguage = {
[language in DefaultLanguage]: Extension[];
[language in DefaultLanguage]: PartialExtension[];
} & {
[language: string]: Extension[];
[language: string]: PartialExtension[];
};
export type GroupedExtensions = GroupedByExtensionState & GroupedByLanguage;

23
src/typings.ts
View File

@@ -11,10 +11,11 @@ import { SvgIconTypeMap } from '@mui/material/SvgIcon/SvgIcon';
import { ParseKeys } from 'i18next';
import { Location } from 'react-router-dom';
import {
ChapterType,
ExtensionType,
GetCategoryQuery,
GetChapterQuery,
GetExtensionQuery,
GetMangaQuery,
GetSourceQuery,
MangaType,
MetaType,
SourcePreferenceChangeInput,
} from '@/lib/graphql/generated/graphql.ts';
@@ -33,6 +34,8 @@ export type RecursivePartial<T> = {
: T[P];
};
export type OptionalProperty<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
type GenericLocation<State = any> = Omit<Location, 'state'> & { state?: State };
declare module 'react-router-dom' {
@@ -43,7 +46,7 @@ declare module 'react-router-dom' {
export type TranslationKey = ParseKeys;
export type Extension = Omit<ExtensionType, 'source'>;
export type PartialExtension = GetExtensionQuery['extension'];
export interface ISource {
id: string;
@@ -105,6 +108,10 @@ export interface IMangaCard {
lastReadAt: number;
}
export type TManga = GetMangaQuery['manga'];
export type TPartialManga = OptionalProperty<TManga, 'unreadCount' | 'downloadCount' | 'categories' | 'chapters'>;
export interface IManga {
id: number;
sourceId: string;
@@ -166,12 +173,16 @@ export interface IMangaChapter {
chapter: IChapter;
}
export type TChapter = GetChapterQuery['chapter'];
export enum IncludeInGlobalUpdate {
EXCLUDE = 0,
INCLUDE = 1,
UNSET = -1,
}
export type TCategory = GetCategoryQuery['category'];
export interface ICategory {
id: number;
order: number;
@@ -230,8 +241,8 @@ export interface IReaderProps {
curPage: number;
initialPage: number;
settings: IReaderSettings;
manga: MangaType;
chapter: ChapterType;
manga: TManga;
chapter: TChapter;
nextChapter: () => void;
prevChapter: () => void;
}

17
src/util/metadata.ts
View File

@@ -14,9 +14,12 @@ import {
Metadata,
MetadataHolder,
MetadataKeyValuePair,
TCategory,
TChapter,
TManga,
} from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import { CategoryType, ChapterType, MangaType, MetaType } from '@/lib/graphql/generated/graphql.ts';
import { MetaType } from '@/lib/graphql/generated/graphql.ts';
const APP_METADATA_KEY_PREFIX = 'webUI_';
@@ -322,16 +325,16 @@ export const requestUpdateMetadataValue = async (
switch (holderType) {
case 'category':
await requestManager.setCategoryMeta((metadataHolder as CategoryType).id, metadataKey, value).response;
await requestManager.setCategoryMeta((metadataHolder as TCategory).id, metadataKey, value).response;
break;
case 'chapter':
await requestManager.setChapterMeta((metadataHolder as ChapterType).id, metadataKey, value).response;
await requestManager.setChapterMeta((metadataHolder as TChapter).id, metadataKey, value).response;
break;
case 'global':
await requestManager.setGlobalMetadata(metadataKey, value).response;
break;
case 'manga':
await requestManager.setMangaMeta((metadataHolder as MangaType).id, metadataKey, value).response;
await requestManager.setMangaMeta((metadataHolder as TManga).id, metadataKey, value).response;
break;
default:
throw new Error(`requestUpdateMetadataValue: unknown holderType "${holderType}"`);
@@ -351,16 +354,16 @@ export const requestUpdateServerMetadata = async (
): Promise<void[]> => requestUpdateMetadata({ meta: serverMetadata }, 'global', keysToValues);
export const requestUpdateMangaMetadata = async (
manga: MangaType,
manga: TManga,
keysToValues: MetadataKeyValuePair[],
): Promise<void[]> => requestUpdateMetadata(manga, 'manga', keysToValues);
export const requestUpdateChapterMetadata = async (
chapter: ChapterType,
chapter: TChapter,
keysToValues: MetadataKeyValuePair[],
): Promise<void[]> => requestUpdateMetadata(chapter, 'chapter', keysToValues);
export const requestUpdateCategoryMetadata = async (
category: CategoryType,
category: TCategory,
keysToValues: MetadataKeyValuePair[],
): Promise<void[]> => requestUpdateMetadata(category, 'category', keysToValues);

6
src/util/readerSettings.ts
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { Metadata, IReaderSettings, MetadataKeyValuePair, GqlMetaHolder } from '@/typings';
import { Metadata, IReaderSettings, MetadataKeyValuePair, GqlMetaHolder, TManga } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import {
convertFromGqlMeta,
@@ -14,7 +14,7 @@ import {
requestUpdateMangaMetadata,
requestUpdateServerMetadata,
} from '@/util/metadata';
import { MangaType, MetaType } from '@/lib/graphql/generated/graphql.ts';
import { MetaType } from '@/lib/graphql/generated/graphql.ts';
type UndefinedReaderSettings = {
[setting in keyof IReaderSettings]: IReaderSettings[setting] | undefined;
@@ -103,7 +103,7 @@ export const checkAndHandleMissingStoredReaderSettings = async (
}
if (metadataHolderType === 'manga') {
await requestUpdateMangaMetadata(metadataHolder as MangaType, settingsToUpdate);
await requestUpdateMangaMetadata(metadataHolder as TManga, settingsToUpdate);
return;
}