glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-05-20 05:03:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix Manga-Item to new interfaces,

Browse Source 
fix Manga-cover
This commit is contained in:
glax 2025-05-17 18:28:51 +02:00
parent 0907031583
commit 79c13ceb1d
3 changed files with 16 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
tranga-website/src/Components/AuthorTag.tsx
View File

@ -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<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>
);
}

19
tranga-website/src/Components/LinkTag.tsx
View File

@ -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<ILink>();
const [loading, setLoading] = useState<boolean>(true);
useEffect(() => {
GetLink(apiUri, useLink).then(setLink).finally(() => setLoading(false));
}, [linkId]);
export default function LinkTag({link, color} : { link: ILink | undefined, color?: ColorPaletteProp }) {
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>
</Skeleton>
</Chip>
);
}

17
tranga-website/src/Components/Manga.tsx
View File

@ -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}
onResize={LoadMangaCover}/>
onLoad={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.tags.map(tag => <Chip key={tag} variant={"soft"} size={"md"} color={"primary"}>{tag}</Chip>)}
{useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"warning"} />)}
{useManga.authors?.map(author => <AuthorTag key={author.authorId} author={author} color={"success"} />)}
{useManga.mangaTags?.map(tag => <Chip key={tag.tag} variant={"soft"} size={"md"} color={"primary"}>{tag.tag}</Chip>)}
{useManga.links?.map(link => <LinkTag key={link.linkId} link={link} color={"warning"} />)}
</Stack>
</Skeleton>
<Skeleton loading={loading} sx={{maxHeight:"300px"}}>