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

MangaConnectorContext

Browse Source
This commit is contained in:
glax 2025-05-18 22:01:21 +02:00
parent 9fa57eacdb
commit 0193077377
2 changed files with 43 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
tranga-website/src/App.tsx
View File

@ -8,6 +8,9 @@ import {ApiUriContext} from "./api/fetchApi.tsx";
import Search from './Components/Search.tsx'; import Search from './Components/Search.tsx';
import MangaList from "./Components/MangaList.tsx"; import MangaList from "./Components/MangaList.tsx";
import {CardHeight, CardWidth} from "./Components/Manga.tsx"; import {CardHeight, CardWidth} from "./Components/Manga.tsx";
import {MangaConnectorContext} from "./api/Contexts/MangaConnectorContext.tsx";
import IMangaConnector from "./api/types/IMangaConnector.ts";
import {GetAllConnectors} from "./api/MangaConnector.tsx";
export default function App () { export default function App () {
@ -23,8 +26,16 @@ export default function App () {
localStorage.setItem("apiUri", apiUri); localStorage.setItem("apiUri", apiUri);
}, [apiUri]); }, [apiUri]);
const [mangaConnectors, setMangaConnectors] = useState<IMangaConnector[]>([]);
useEffect(() => {
if(!apiConnected) return;
GetAllConnectors(apiUri).then(setMangaConnectors);
}, [apiConnected]);
return ( return (
<ApiUriContext.Provider value={apiUri}> <ApiUriContext.Provider value={apiUri}>
<MangaConnectorContext value={mangaConnectors}>
<Sheet className={"app"}> <Sheet className={"app"}>
<Header> <Header>
<Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}> <Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
@ -55,6 +66,7 @@ export default function App () {
</MangaList> </MangaList>
</Sheet> </Sheet>
</Sheet> </Sheet>
</MangaConnectorContext>
</ApiUriContext.Provider> </ApiUriContext.Provider>
); );
} }

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

@ -12,8 +12,7 @@ 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 {MangaConnectorContext} from "../api/Contexts/MangaConnectorContext.tsx";
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<IManga>(); const [manga, setManga] = useState<IManga>();
@ -44,13 +43,13 @@ export function Manga({manga: manga, children} : { manga: IManga, children?: Rea
const CoverRef = useRef<HTMLImageElement>(null); const CoverRef = useRef<HTMLImageElement>(null);
const apiUri = useContext(ApiUriContext); const apiUri = useContext(ApiUriContext);
const mangaConnectors = useContext(MangaConnectorContext);
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
const [mangaConnector, setMangaConnector] = useState<IMangaConnector | undefined>(undefined); const mangaConnector = mangaConnectors.find(all => all.name == manga.mangaConnectorName);
useEffect(() => { useEffect(() => {
LoadMangaCover(); LoadMangaCover();
LoadMangaConnector();
}, [manga]); }, [manga]);
const LoadMangaCover = useCallback(() => { const LoadMangaCover = useCallback(() => {
@ -66,10 +65,6 @@ 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",