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

68
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,38 +26,47 @@ 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}>
<Sheet className={"app"}> <MangaConnectorContext value={mangaConnectors}>
<Header> <Sheet className={"app"}>
<Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}> <Header>
<Button onClick={() => setShowSettings(true)}>Settings</Button> <Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
</Badge> <Button onClick={() => setShowSettings(true)}>Settings</Button>
</Header>
<Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
<Search open={showSearch} setOpen={setShowSearch} />
<Sheet className={"app-content"}>
<MangaList connected={apiConnected}>
<Badge invisible sx={{margin: "8px !important"}}>
<Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
<CardCover sx={{margin:"var(--Card-padding)"}}>
<img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} />
</CardCover>
<CardCover sx={{
background: 'rgba(234, 119, 246, 0.14)',
backdropFilter: 'blur(6.9px)',
webkitBackdropFilter: 'blur(6.9px)',
}}/>
<CardContent>
<Box style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} >
<Typography level={"h1"}>Search</Typography>
</Box>
</CardContent>
</Card>
</Badge> </Badge>
</MangaList> </Header>
<Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
<Search open={showSearch} setOpen={setShowSearch} />
<Sheet className={"app-content"}>
<MangaList connected={apiConnected}>
<Badge invisible sx={{margin: "8px !important"}}>
<Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
<CardCover sx={{margin:"var(--Card-padding)"}}>
<img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} />
</CardCover>
<CardCover sx={{
background: 'rgba(234, 119, 246, 0.14)',
backdropFilter: 'blur(6.9px)',
webkitBackdropFilter: 'blur(6.9px)',
}}/>
<CardContent>
<Box style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} >
<Typography level={"h1"}>Search</Typography>
</Box>
</CardContent>
</Card>
</Badge>
</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",