diff --git a/tranga-website/src/Components/AuthorTag.tsx b/tranga-website/src/Components/AuthorTag.tsx index b5a678c..d457271 100644 --- a/tranga-website/src/Components/AuthorTag.tsx +++ b/tranga-website/src/Components/AuthorTag.tsx @@ -1,23 +1,10 @@ -import {Chip, ColorPaletteProp, Skeleton} from "@mui/joy"; -import {useContext, useEffect, useState} from "react"; -import {ApiUriContext} from "../api/fetchApi.tsx"; +import {Chip, ColorPaletteProp} from "@mui/joy"; 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(); - const [loading, setLoading] = useState(true); - - useEffect(() => { - GetAuthor(apiUri, useAuthor).then(setAuthor).finally(() => setLoading(false)); - }, [authorId]); +export default function AuthorTag({author, color} : {author: IAuthor, color?: ColorPaletteProp }) { return ( - {author?.authorName ?? "Load Failed"} + {author.authorName ?? "Load Failed"} ); } \ No newline at end of file diff --git a/tranga-website/src/Components/LinkTag.tsx b/tranga-website/src/Components/LinkTag.tsx index b79d6d6..3e0c1c4 100644 --- a/tranga-website/src/Components/LinkTag.tsx +++ b/tranga-website/src/Components/LinkTag.tsx @@ -1,25 +1,10 @@ -import {Chip, Skeleton, Link, ColorPaletteProp} from "@mui/joy"; -import {useContext, useEffect, useState} from "react"; -import {ApiUriContext} from "../api/fetchApi.tsx"; -import {GetLink} from "../api/Query.tsx"; +import {Chip, Link, ColorPaletteProp} from "@mui/joy"; import ILink from "../api/types/ILink.ts"; -export default function LinkTag({linkId, color} : { linkId: string | undefined, color?: ColorPaletteProp }) { - const useLink = linkId ?? "LinkId"; - const apiUri = useContext(ApiUriContext); - - const [link, setLink] = useState(); - const [loading, setLoading] = useState(true); - - useEffect(() => { - GetLink(apiUri, useLink).then(setLink).finally(() => setLoading(false)); - }, [linkId]); - +export default function LinkTag({link, color} : { link: ILink | undefined, color?: ColorPaletteProp }) { return ( - - {link?.linkProvider??"Load Failed"} - + {link?.linkProvider??"Load Failed"} ); } \ No newline at end of file diff --git a/tranga-website/src/Components/Manga.tsx b/tranga-website/src/Components/Manga.tsx index 822d60a..ab4d4b2 100644 --- a/tranga-website/src/Components/Manga.tsx +++ b/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, Manga Cover + onLoad={LoadMangaCover}/> - {useManga.authorIds.map(authorId => )} - {useManga.tags.map(tag => {tag})} - {useManga.linkIds.map(linkId => )} + {useManga.authors?.map(author => )} + {useManga.mangaTags?.map(tag => {tag.tag})} + {useManga.links?.map(link => )}