Add monitorMangaList to App

Website/App.tsx

@@ -2,6 +2,8 @@ import React, {ReactElement, useEffect} from 'react';
 import Footer from "./modules/Footer";
 import Search from "./modules/Search";
 import Header from "./modules/Header";
+import MonitorJobsList from "./modules/MonitorJobsList";
+import './styles/Manga.css'
 
 export default function App(){
     const [content, setContent] = React.useState<ReactElement>();
@@ -13,7 +15,10 @@ export default function App(){
             if(result === null){
                 setContent(<h1>No connection to backend</h1>);
             }else{
-                setContent(<Search />)
+                setContent(<>
+                    <Search />
+                    <MonitorJobsList />
+                    </>)
             }
         })
     }, []);

Website/modules/MonitorJobsList.tsx

@@ -0,0 +1,57 @@
+import React, {MouseEventHandler, useEffect} from 'react';
+import {Job} from './Job';
+import '../styles/monitorMangaList.css';
+import IJob from "./interfaces/IJob";
+import IManga, {HTMLFromIManga} from "./interfaces/IManga";
+import {Manga} from './Manga';
+
+export default function MonitorJobsList(){
+    const [MonitoringJobs, setMonitoringJobs] = React.useState<IJob[]>([]);
+    const [AllManga, setAllManga] = React.useState<IManga[]>([]);
+
+    function UpdateMonitoringJobsList(){
+        Job.GetMonitoringJobs()
+            .then((jobs) => {
+                if(jobs.length > 0)
+                    return Job.GetJobs(jobs)
+                return [];
+            })
+            .then((jobs) => setMonitoringJobs(jobs));
+    }
+
+    useEffect(() => {
+        //Remove all Manga that are not associated with a Job
+        setAllManga(AllManga.filter(manga => MonitoringJobs.find(job => job.mangaInternalId == manga.internalId)));
+        //Fetch Manga that are missing (from Jobs)
+        if(MonitoringJobs === null)
+            return;
+        MonitoringJobs.forEach(job => {
+            if(AllManga.find(manga => manga.internalId == job.mangaInternalId))
+                return;
+            Manga.GetMangaById(job.mangaInternalId).then((manga: IManga) => setAllManga([...AllManga, manga]));
+        });
+    }, [MonitoringJobs]);
+
+    useEffect(() => {
+        UpdateMonitoringJobsList();
+    }, []);
+
+    const DeleteJob:MouseEventHandler = (e) => {
+        const jobId = e.currentTarget.id;
+        Job.DeleteJob(jobId);
+    }
+
+    return (
+        <div id="MonitorMangaList">
+            {AllManga.map((manga: IManga) => {
+                const job = MonitoringJobs.find(job => job.mangaInternalId == manga.internalId);
+                if(job === undefined || job == null)
+                    return <div>Error. Could not find matching job for {manga.internalId}</div>
+                return <div key={"monitorMangaEntry." + manga.internalId} className="monitorMangaEntry">
+                    {HTMLFromIManga(manga)}
+                    {job.id}
+                    <button id={job.id} onClick={DeleteJob}>Delete</button>
+                </div>;
+            })}
+        </div>)
+}

Website/modules/Search.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';
 import {MangaConnector} from "./MangaConnector";
+import {Job} from "./Job";
 import IMangaConnector from "./interfaces/IMangaConnector";
 import {isValidUri} from "../App";
 import IManga, {HTMLFromIManga} from "./interfaces/IManga";

Website/styles/monitorMangaList.css

@@ -0,0 +1,11 @@
+#MonitorMangaList {
+    position: relative;
+    display: flex;
+    flex-flow: row;
+    flex-wrap: nowrap;
+    flex-grow: 1;
+    height: 100%;
+    overflow-y: scroll;
+    scrollbar-color: var(--accent-color) var(--primary-color);
+    scrollbar-width: thin;
+}