Use gql for "mangas" I - get manga

src/components/manga/MangaDetails.tsx

@@ -10,14 +10,15 @@ import FavoriteIcon from '@mui/icons-material/Favorite';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import PublicIcon from '@mui/icons-material/Public';
 import { styled } from '@mui/material/styles';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { mutate } from 'swr';
 import { t as translate } from 'i18next';
 import Button from '@mui/material/Button';
-import { IManga, ISource } from '@/typings';
+import { ISource } 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%',
@@ -125,11 +126,36 @@ const Genres = styled('div')(() => ({
     },
 }));
 
+const OpenSourceButton = ({ url }: { url?: string | null }) => {
+    const { t } = useTranslation();
+
+    const button = useMemo(
+        () => (
+            <Button disabled={!!url} startIcon={<PublicIcon />} size="large">
+                {t('global.button.open_site')}
+            </Button>
+        ),
+        [url],
+    );
+
+    if (!url) {
+        return button;
+    }
+
+    return (
+        <a href={url} target="_blank" rel="noreferrer">
+            <Button startIcon={<PublicIcon />} size="large">
+                {t('global.button.open_site')}
+            </Button>
+        </a>
+    );
+};
+
 interface IProps {
-    manga: IManga;
+    manga: MangaType;
 }
 
-function getSourceName(source: ISource) {
+function getSourceName(source?: ISource | null) {
     if (!source) {
         return translate('global.label.unknown');
     }
@@ -137,7 +163,7 @@ function getSourceName(source: ISource) {
     return source.displayName ?? source.id;
 }
 
-function getValueOrUnknown(val: string) {
+function getValueOrUnknown(val?: string | null) {
     return val || 'UNKNOWN';
 }
 
@@ -169,7 +195,9 @@ const MangaDetails: React.FC<IProps> = ({ manga }) => {
             <TopContentWrapper>
                 <ThumbnailMetadataWrapper>
                     <Thumbnail>
-                        <img src={requestManager.getValidImgUrlFor(manga.thumbnailUrl)} alt="Manga Thumbnail" />
+                        {manga.thumbnailUrl && (
+                            <img src={requestManager.getValidImgUrlFor(manga.thumbnailUrl)} alt="Manga Thumbnail" />
+                        )}
                     </Thumbnail>
                     <Metadata>
                         <h1>{manga.title}</h1>
@@ -195,11 +223,7 @@ const MangaDetails: React.FC<IProps> = ({ manga }) => {
                             {manga.inLibrary ? t('manga.button.in_library') : t('manga.button.add_to_library')}
                         </Button>
                     </div>
-                    <a href={manga.realUrl} target="_blank" rel="noreferrer">
-                        <Button startIcon={<PublicIcon />} size="large">
-                            {t('global.button.open_site')}
-                        </Button>
-                    </a>
+                    <OpenSourceButton url={manga.realUrl} />
                 </MangaButtonsContainer>
             </TopContentWrapper>
             <BottomContentWrapper>

src/components/manga/MangaToolbarMenu.tsx

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

src/components/manga/hooks.ts

@@ -16,7 +16,7 @@ export const useRefreshManga = (mangaId: string) => {
     const handleRefresh = useCallback(async () => {
         setFetchingOnline(true);
         await Promise.all([
-            requestManager.getManga(mangaId, true).response.then((res) => {
+            requestManager.getMangaFetch(mangaId).response.then((res) => {
                 mutate(`${RequestManager.API_VERSION}manga/${mangaId}`, res, { revalidate: false });
             }),
             requestManager.getMangaChapters(mangaId, true).response.then((res) =>

src/components/navbar/ReaderNavBar.tsx

@@ -24,8 +24,9 @@ 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, IChapter, IManga, IMangaCard, IReaderSettings } from '@/typings';
+import { ChapterOffset, IChapter, IReaderSettings } from '@/typings';
 import ReaderSettingsOptions from '@/components/reader/ReaderSettingsOptions';
+import { MangaType } from '@/lib/graphql/generated/graphql.ts';
 
 const Root = styled('div')(({ theme }) => ({
     top: 0,
@@ -114,7 +115,7 @@ const OpenDrawerButton = styled(IconButton)(({ theme }) => ({
 interface IProps {
     settings: IReaderSettings;
     setSettingValue: (key: keyof IReaderSettings, value: string | boolean) => void;
-    manga: IManga | IMangaCard;
+    manga: Pick<MangaType, 'id'>;
     chapter: IChapter;
     curPage: number;
     scrollToPage: (page: number) => void;

src/components/util/EmptyView.tsx

@@ -22,7 +22,7 @@ function getRandomErrorFace() {
 
 interface IProps {
     message: string;
-    messageExtra?: JSX.Element;
+    messageExtra?: JSX.Element | string;
 }
 
 export default function EmptyView({ message, messageExtra }: IProps) {