From 2f9eb61377987c80f058ad50049f45b88b6471f3 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Fri, 18 Oct 2024 19:46:17 +0200
Subject: [PATCH] Add monitorMangaList to App

---
 Website/App.tsx                     |  7 +++-
 Website/modules/MonitorJobsList.tsx | 57 +++++++++++++++++++++++++++++
 Website/modules/Search.tsx          |  1 +
 Website/styles/monitorMangaList.css | 11 ++++++
 4 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 Website/modules/MonitorJobsList.tsx
 create mode 100644 Website/styles/monitorMangaList.css

diff --git a/Website/App.tsx b/Website/App.tsx
index 818893e..07c7658 100644
--- a/Website/App.tsx
+++ b/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 />
+                    </>)
             }
         })
     }, []);
diff --git a/Website/modules/MonitorJobsList.tsx b/Website/modules/MonitorJobsList.tsx
new file mode 100644
index 0000000..046c5f2
--- /dev/null
+++ b/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>)
+}
\ No newline at end of file
diff --git a/Website/modules/Search.tsx b/Website/modules/Search.tsx
index da280d7..64969ae 100644
--- a/Website/modules/Search.tsx
+++ b/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";
diff --git a/Website/styles/monitorMangaList.css b/Website/styles/monitorMangaList.css
new file mode 100644
index 0000000..f4ccfb0
--- /dev/null
+++ b/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;
+}
\ No newline at end of file