From 9e0eb0262e44d4f434e89dc880f92e4c5c6ace9a Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Tue, 1 Apr 2025 19:05:57 +0200
Subject: [PATCH] MangaList

---
 tranga-website/src/App.tsx                  |  3 +-
 tranga-website/src/Components/Manga.tsx     | 95 +++++++++++++--------
 tranga-website/src/Components/MangaList.tsx | 36 ++++++++
 tranga-website/src/Components/Search.tsx    |  1 +
 tranga-website/src/api/types/IManga.ts      | 24 +++---
 5 files changed, 112 insertions(+), 47 deletions(-)
 create mode 100644 tranga-website/src/Components/MangaList.tsx

diff --git a/tranga-website/src/App.tsx b/tranga-website/src/App.tsx
index d3ec72f..eba63bf 100644
--- a/tranga-website/src/App.tsx
+++ b/tranga-website/src/App.tsx
@@ -6,6 +6,7 @@ import {Badge, Button} from "@mui/joy";
 import {useState} from "react";
 import {ApiUriContext} from "./api/fetchApi.tsx";
 import Search from './Components/Search.tsx';
+import MangaList from "./Components/MangaList.tsx";
 
 export default function App () {
 
@@ -27,7 +28,7 @@ export default function App () {
                 <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
                 <Search open={showSearch} setOpen={setShowSearch} />
                 <Sheet className={"app-content"}>
-
+                    <MangaList />
                 </Sheet>
             </Sheet>
         </ApiUriContext.Provider>
diff --git a/tranga-website/src/Components/Manga.tsx b/tranga-website/src/Components/Manga.tsx
index 9a7a411..f3b01a6 100644
--- a/tranga-website/src/Components/Manga.tsx
+++ b/tranga-website/src/Components/Manga.tsx
@@ -13,7 +13,7 @@ import {
 } from "@mui/joy";
 import IManga, {DefaultManga} from "../api/types/IManga.ts";
 import {ReactElement, useCallback, useContext, useEffect, useState} from "react";
-import {GetLatestChapterAvailable, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx";
+import {GetLatestChapterAvailable, GetMangaById, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx";
 import {ApiUriContext} from "../api/fetchApi.tsx";
 import AuthorTag from "./AuthorTag.tsx";
 import LinkTag from "./LinkTag.tsx";
@@ -22,8 +22,27 @@ import IChapter from "../api/types/IChapter.ts";
 import MarkdownPreview from "@uiw/react-markdown-preview";
 import {SxProps} from "@mui/joy/styles/types";
 
-export function Manga({manga, children} : { manga: IManga | undefined, 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 [loading, setLoading] = useState(true);
+
+    const apiUri = useContext(ApiUriContext);
+
+    const loadManga = useCallback(() => {
+        setLoading(true);
+        GetMangaById(apiUri, mangaId).then(setManga).finally(() => setLoading(false));
+    },[apiUri, mangaId]);
+
+    useEffect(() => {
+        loadManga();
+    }, []);
+
+    return <Manga manga={manga} loading={loading} children={children} />
+}
+
+export function Manga({manga, children, loading} : { manga: IManga | undefined, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined, loading?: boolean}) {
     const useManga = manga ?? DefaultManga;
+    loading = loading ?? false;
 
     const apiUri = useContext(ApiUriContext);
 
@@ -79,19 +98,25 @@ export function Manga({manga, children} : { manga: IManga | undefined, children?
                 }}/>
                 <CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
                     <Box sx={sideSx}>
-                        <Link href={useManga.websiteUrl} level={"h1"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
-                            {useManga.name}
-                        </Link>
+                        <Skeleton loading={loading}>
+                            <Link href={useManga.websiteUrl} level={"h1"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
+                                {useManga.name}
+                            </Link>
+                        </Skeleton>
                     </Box>
                     {
                         expanded ?
                             <Box sx={sideSx}>
-                                <Stack direction={"row"} flexWrap={"wrap"} spacing={0.5}>
-                                    {useManga.authorIds.map(authorId => <AuthorTag key={authorId} authorId={authorId} color={"success"} />)}
-                                    {useManga.tags.map(tag => <Chip key={tag} variant={"outlined"} size={"md"} color={"primary"}>{tag}</Chip>)}
-                                    {useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"danger"} />)}
-                                </Stack>
-                                <MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black"}} />
+                                <Skeleton loading={loading} variant={"text"} level={"title-lg"}>
+                                    <Stack direction={"row"} flexWrap={"wrap"} spacing={0.5}>
+                                        {useManga.authorIds.map(authorId => <AuthorTag key={authorId} authorId={authorId} color={"success"} />)}
+                                        {useManga.tags.map(tag => <Chip key={tag} variant={"outlined"} size={"md"} color={"primary"}>{tag}</Chip>)}
+                                        {useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"danger"} />)}
+                                    </Stack>
+                                </Skeleton>
+                                <Skeleton loading={loading} sx={{maxHeight:"300px"}}>
+                                    <MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black"}} />
+                                </Skeleton>
                             </Box>
                             : null
                     }
@@ -99,30 +124,32 @@ export function Manga({manga, children} : { manga: IManga | undefined, children?
                 {
                     expanded ?
                         <CardActions sx={{justifyContent:"space-between"}}>
-                            <Input
-                                type={"number"}
-                                placeholder={"0.0"}
-                                startDecorator={
-                                <>
-                                    {
-                                        updatingThreshold ?
-                                            <CircularProgress color={"primary"} size={"sm"} />
-                                            : <Typography>Ch.</Typography>
+                            <Skeleton loading={loading} sx={{maxHeight: "30px", maxWidth:"calc(100% - 40px)"}}>
+                                <Input
+                                    type={"number"}
+                                    placeholder={"0.0"}
+                                    startDecorator={
+                                        <>
+                                            {
+                                                updatingThreshold ?
+                                                    <CircularProgress color={"primary"} size={"sm"} />
+                                                    : <Typography>Ch.</Typography>
+                                            }
+                                        </>
                                     }
-                                </>
-                                }
-                                endDecorator={
-                                    <Typography>
-                                        <Skeleton loading={maxChapterLoading}>
-                                            /{mangaMaxChapter?.chapterNumber??"Load Failed"}
-                                        </Skeleton>
-                                    </Typography>
-                                }
-                                sx={{width:"min-content"}}
-                                size={"md"}
-                                onChange={(e) => updateIgnoreThreshhold(e.currentTarget.valueAsNumber)}
-                            />
-                            {children}
+                                    endDecorator={
+                                        <Typography>
+                                            <Skeleton loading={maxChapterLoading}>
+                                                /{mangaMaxChapter?.chapterNumber??"Load Failed"}
+                                            </Skeleton>
+                                        </Typography>
+                                    }
+                                    sx={{width:"min-content"}}
+                                    size={"md"}
+                                    onChange={(e) => updateIgnoreThreshhold(e.currentTarget.valueAsNumber)}
+                                />
+                                {children}
+                            </Skeleton>
                         </CardActions>
                         : null
                 }
diff --git a/tranga-website/src/Components/MangaList.tsx b/tranga-website/src/Components/MangaList.tsx
new file mode 100644
index 0000000..e5bd265
--- /dev/null
+++ b/tranga-website/src/Components/MangaList.tsx
@@ -0,0 +1,36 @@
+import {Button, Stack} from "@mui/joy";
+import {useCallback, useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../api/fetchApi.tsx";
+import {DeleteJob, GetJobsWithType} from "../api/Job.tsx";
+import {JobType} from "../api/types/Jobs/IJob.ts";
+import IDownloadAvailableChaptersJob from "../api/types/Jobs/IDownloadAvailableChaptersJob.ts";
+import {MangaFromId} from "./Manga.tsx";
+import { Remove } from "@mui/icons-material";
+
+export default function MangaList(){
+    const apiUri = useContext(ApiUriContext);
+
+    const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]);
+
+    const getJobList = useCallback(() => {
+        GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob).then((jl) => setJobList(jl as IDownloadAvailableChaptersJob[]));
+    },[apiUri]);
+
+    const deleteJob = useCallback((jobId: string) => {
+        DeleteJob(apiUri, jobId).finally(() => getJobList());
+    },[apiUri]);
+
+    useEffect(() => {
+        getJobList();
+    }, [apiUri]);
+
+    return(
+        <Stack direction="row" spacing={1}>
+            {jobList.map((job) => (
+                <MangaFromId key={job.mangaId} mangaId={job.mangaId}>
+                    <Button color={"danger"} endDecorator={<Remove />} onClick={() => deleteJob(job.jobId)}>Delete</Button>
+                </MangaFromId>
+            ))}
+        </Stack>
+    );
+}
\ No newline at end of file
diff --git a/tranga-website/src/Components/Search.tsx b/tranga-website/src/Components/Search.tsx
index 070b05f..304b1b7 100644
--- a/tranga-website/src/Components/Search.tsx
+++ b/tranga-website/src/Components/Search.tsx
@@ -149,6 +149,7 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
                                         placeholder={"Select Library"}
                                         defaultValue={""}
                                         startDecorator={<LibraryBooks />}
+                                        value={selectedLibraryId}
                                         onChange={(_e, newValue) => setSelectedLibraryId(newValue!)}>
                                         {localLibrariesLoading ?
                                             <Option value={""} disabled>Loading <CircularProgress color={"primary"} size={"sm"} /></Option>
diff --git a/tranga-website/src/api/types/IManga.ts b/tranga-website/src/api/types/IManga.ts
index 68daa53..d6e9bf8 100644
--- a/tranga-website/src/api/types/IManga.ts
+++ b/tranga-website/src/api/types/IManga.ts
@@ -19,19 +19,19 @@ export default interface IManga{
 }
 
 export const DefaultManga : IManga = {
-    mangaId: "MangaId",
-    idOnConnectorSite: "ID",
-    name: "TestManga",
-    description: "Wow so much text, very cool",
-    websiteUrl: "https://realsite.realdomain",
+    mangaId: "Loading",
+    idOnConnectorSite: "Loading",
+    name: "Loading",
+    description: "Loading",
+    websiteUrl: "",
     year: 1999,
-    originalLanguage: "lindtChoccy",
+    originalLanguage: "en",
     releaseStatus: MangaReleaseStatus.Continuing,
-    folderName: "uhhh",
+    folderName: "Loading",
     ignoreChapterBefore: 0,
-    mangaConnectorId: "MangaDex",
-    authorIds: ["We got", "Authors"],
-    tags: ["And we", "got Tags"],
-    linkIds: ["And most", "definitely", "links"],
-    altTitleIds: ["But not alt-titles."],
+    mangaConnectorId: "Loading",
+    authorIds: ["Loading"],
+    tags: ["Loading"],
+    linkIds: ["Loading"],
+    altTitleIds: ["Loading"],
 }
\ No newline at end of file