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

Manga Card with Icon as Badge

Browse Source
This commit is contained in:
glax 2025-05-18 17:28:01 +02:00
parent 11549a07c3
commit a0d15e08a7
2 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,8 @@ import {ApiUriContext, getData} from "../api/fetchApi.tsx";
import {ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts"; import {ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
import {SxProps} from "@mui/joy/styles/types"; import {SxProps} from "@mui/joy/styles/types";
import MangaPopup from "./MangaPopup.tsx"; import MangaPopup from "./MangaPopup.tsx";
import IMangaConnector from "../api/types/IMangaConnector.ts";
import {GetConnector} from "../api/MangaConnector.tsx";
export function MangaFromId({mangaId, children} : { mangaId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){ export function MangaFromId({mangaId, children} : { mangaId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
const [manga, setManga] = useState(DefaultManga); const [manga, setManga] = useState(DefaultManga);
@ -44,9 +46,11 @@ export function Manga({manga: manga, children} : { manga: IManga, children?: Rea
const apiUri = useContext(ApiUriContext); const apiUri = useContext(ApiUriContext);
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
const [mangaConnector, setMangaConnector] = useState<IMangaConnector | undefined>(undefined);
useEffect(() => { useEffect(() => {
LoadMangaCover(); LoadMangaCover();
LoadMangaConnector();
}, [manga]); }, [manga]);
const LoadMangaCover = useCallback(() => { const LoadMangaCover = useCallback(() => {
@ -62,6 +66,10 @@ export function Manga({manga: manga, children} : { manga: IManga, children?: Rea
}); });
}, [manga, apiUri]) }, [manga, apiUri])
const LoadMangaConnector = useCallback(() => {
GetConnector(apiUri, manga.mangaConnectorName).then(setMangaConnector);
}, [manga, apiUri]);
const coverSx : SxProps = { const coverSx : SxProps = {
height: CardHeight + "px", height: CardHeight + "px",
width: CardWidth + "px", width: CardWidth + "px",
@ -78,7 +86,7 @@ export function Manga({manga: manga, children} : { manga: IManga, children?: Rea
const mangaName = manga.name.length > 30 ? manga.name.substring(0, 27) + "..." : manga.name; const mangaName = manga.name.length > 30 ? manga.name.substring(0, 27) + "..." : manga.name;
return ( return (
<Badge sx={{margin:"8px !important"}} badgeContent={manga.mangaConnectorName} color={ReleaseStatusToPalette(manga.releaseStatus)} size={"lg"}> <Badge sx={{margin:"8px !important"}} badgeContent={mangaConnector ? <img src={mangaConnector.iconUrl} /> : manga.mangaConnectorName} color={ReleaseStatusToPalette(manga.releaseStatus)} size={"lg"}>
<Card sx={{height:"fit-content",width:"fit-content"}} onClick={(e) => { <Card sx={{height:"fit-content",width:"fit-content"}} onClick={(e) => {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
if(interactiveElements.find(x => x == target.localName) == undefined) if(interactiveElements.find(x => x == target.localName) == undefined)

4
tranga-website/src/api/MangaConnector.tsx
View File

@ -5,6 +5,10 @@ export const GetAllConnectors = async (apiUri: string) : Promise<IMangaConnector
return await getData(`${apiUri}/v2/MangaConnector`) as Promise<IMangaConnector[]> return await getData(`${apiUri}/v2/MangaConnector`) as Promise<IMangaConnector[]>
} }
export const GetConnector = async (apiUri: string, mangaConnectorName: string) : Promise<IMangaConnector> => {
return await getData(`${apiUri}/v2/MangaConnector/${mangaConnectorName}`) as Promise<IMangaConnector>;
}
export const GetEnabledConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => { export const GetEnabledConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => {
return await getData(`${apiUri}/v2/MangaConnector/enabled`) as Promise<IMangaConnector[]> return await getData(`${apiUri}/v2/MangaConnector/enabled`) as Promise<IMangaConnector[]>
} }