Fix Manga-Item to new interfaces,

fix Manga-cover

tranga-website/src/Components/AuthorTag.tsx

@@ -1,23 +1,10 @@
-import {Chip, ColorPaletteProp, Skeleton} from "@mui/joy";
+import {Chip, ColorPaletteProp} from "@mui/joy";
-import {useContext, useEffect, useState} from "react";
-import {ApiUriContext} from "../api/fetchApi.tsx";
 import IAuthor from "../api/types/IAuthor.ts";
-import {GetAuthor} from "../api/Query.tsx";
-
-export default function AuthorTag({authorId, color} : { authorId: string | undefined, color?: ColorPaletteProp }) {
-    const useAuthor = authorId ?? "AuthorId";
-    const apiUri = useContext(ApiUriContext);
-
-    const [author, setAuthor] = useState<IAuthor>();
-    const [loading, setLoading] = useState<boolean>(true);
-
-    useEffect(() => {
-        GetAuthor(apiUri, useAuthor).then(setAuthor).finally(() => setLoading(false));
-    }, [authorId]);
 
+export default function AuthorTag({author, color} : {author: IAuthor, color?: ColorPaletteProp }) {
     return (
         <Chip variant={"outlined"} size={"md"} color={color??"primary"}>
-            <Skeleton variant={"text"} loading={loading}>{author?.authorName ?? "Load Failed"}</Skeleton>
+            {author.authorName ?? "Load Failed"}
         </Chip>
     );
 }

tranga-website/src/Components/LinkTag.tsx

@@ -1,25 +1,10 @@
-import {Chip, Skeleton, Link, ColorPaletteProp} from "@mui/joy";
+import {Chip, Link, ColorPaletteProp} from "@mui/joy";
-import {useContext, useEffect, useState} from "react";
-import {ApiUriContext} from "../api/fetchApi.tsx";
-import {GetLink} from "../api/Query.tsx";
 import ILink from "../api/types/ILink.ts";
 
-export default function LinkTag({linkId, color} : { linkId: string | undefined, color?: ColorPaletteProp }) {
+export default function LinkTag({link, color} : { link: ILink | undefined, color?: ColorPaletteProp }) {
-    const useLink = linkId ?? "LinkId";
-    const apiUri = useContext(ApiUriContext);
-
-    const [link, setLink] = useState<ILink>();
-    const [loading, setLoading] = useState<boolean>(true);
-
-    useEffect(() => {
-        GetLink(apiUri, useLink).then(setLink).finally(() => setLoading(false));
-    }, [linkId]);
-
     return (
         <Chip variant={"soft"} size={"sm"} color={color??"primary"}>
-            <Skeleton variant={"text"} loading={loading}>
+            <Link sx={{textDecoration:"underline"}} level={"body-xs"} href={link?.linkUrl}>{link?.linkProvider??"Load Failed"}</Link>
-                <Link sx={{textDecoration:"underline"}} level={"body-xs"} href={link?.linkUrl}>{link?.linkProvider??"Load Failed"}</Link>
-            </Skeleton>
         </Chip>
     );
 }

tranga-website/src/Components/Manga.tsx

@@ -14,7 +14,7 @@ import {
 import IManga, {DefaultManga} from "../api/types/IManga.ts";
 import {CSSProperties, ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
 import {GetLatestChapterAvailable, GetMangaById, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx";
-import {ApiUriContext} from "../api/fetchApi.tsx";
+import {ApiUriContext, getData} from "../api/fetchApi.tsx";
 import AuthorTag from "./AuthorTag.tsx";
 import LinkTag from "./LinkTag.tsx";
 import {ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
@@ -78,7 +78,11 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
         const coverUrl = GetMangaCoverImageUrl(apiUri, useManga.mangaId, CoverRef.current);
         if(CoverRef.current.src == coverUrl)
             return;
-        CoverRef.current.src = GetMangaCoverImageUrl(apiUri, useManga.mangaId, CoverRef.current);
+
+        //Check if we can fetch the image exists (by fetching it), only then update
+        getData(coverUrl).then(() => {
+            if(CoverRef.current) CoverRef.current.src = coverUrl;
+        });
     }, [useManga, apiUri])
 
     const coverSx : SxProps = {
@@ -112,8 +116,7 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
                 <CardCover>
                     <img style={coverCss} src="/blahaj.png" alt="Manga Cover"
                          ref={CoverRef}
-                         onLoad={LoadMangaCover}
+                         onLoad={LoadMangaCover}/>
-                         onResize={LoadMangaCover}/>
                 </CardCover>
                 <CardCover sx={{
                     background:
@@ -132,9 +135,9 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
                             <Box sx={descriptionSx}>
                                 <Skeleton loading={loading} variant={"text"} level={"title-lg"}>
                                     <Stack direction={"row"} flexWrap={"wrap"} spacing={0.5} sx={{maxHeight:CardHeight*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}>
-                                        {useManga.authorIds.map(authorId => <AuthorTag key={authorId} authorId={authorId} color={"success"} />)}
+                                        {useManga.authors?.map(author => <AuthorTag key={author.authorId} author={author} color={"success"} />)}
-                                        {useManga.tags.map(tag => <Chip key={tag} variant={"soft"} size={"md"} color={"primary"}>{tag}</Chip>)}
+                                        {useManga.mangaTags?.map(tag => <Chip key={tag.tag} variant={"soft"} size={"md"} color={"primary"}>{tag.tag}</Chip>)}
-                                        {useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"warning"} />)}
+                                        {useManga.links?.map(link => <LinkTag key={link.linkId} link={link} color={"warning"} />)}
                                     </Stack>
                                 </Skeleton>
                                 <Skeleton loading={loading} sx={{maxHeight:"300px"}}>