Update JobsList when adding/removing Jobs

Website/App.tsx

@@ -4,7 +4,6 @@ import Search from "./modules/Search";
 import Header from "./modules/Header";
 import MonitorJobsList from "./modules/MonitorJobsList";
 import './styles/index.css'
-import {Job} from "./modules/Job";
 import IFrontendSettings, {FrontendSettingsWith} from "./modules/interfaces/IFrontendSettings";
 import {useCookies} from "react-cookie";
 
@@ -14,6 +13,7 @@ export default function App(){
     const [showSearch, setShowSearch] = React.useState(false);
     const [frontendSettings, setFrontendSettings] = useState<IFrontendSettings>(FrontendSettingsWith(undefined, undefined, undefined));
     const [updateInterval, setUpdateInterval] = React.useState<number>();
+    const [updateMonitorList, setUpdateMonitorList] = React.useState<Date>(new Date());
 
     const apiUri =  frontendSettings.apiUri;
 
@@ -35,9 +35,7 @@ export default function App(){
         setCookie('jobInterval', settings.jobInterval);
     }
 
-    function CreateJob(internalId: string, jobType: string){
+    const UpdateList = () => {setUpdateMonitorList(new Date())}
-        Job.CreateJobDateInterval(apiUri, internalId, jobType, frontendSettings.jobInterval);
-    }
 
     return(<div>
         <Header apiUri={apiUri} backendConnected={connected} settings={frontendSettings} changeSettings={ChangeSettings}/>
@@ -45,11 +43,11 @@ export default function App(){
             ? <>
                 {showSearch
                     ? <>
-                        <Search apiUri={apiUri} createJob={CreateJob} closeSearch={() => setShowSearch(false)} />
+                        <Search apiUri={apiUri} jobInterval={frontendSettings.jobInterval} onJobsChanged={UpdateList} closeSearch={() => setShowSearch(false)} />
                         <hr/>
                     </>
                     : <></>}
-                <MonitorJobsList apiUri={apiUri} onStartSearch={() => setShowSearch(true)} onJobsChanged={() => console.debug("jobsChanged")} connectedToBackend={connected} />
+                <MonitorJobsList updateList={updateMonitorList} apiUri={apiUri} onStartSearch={() => setShowSearch(true)} onJobsChanged={UpdateList} connectedToBackend={connected} />
             </>
             : <h1>No connection to backend</h1>}
         <Footer apiUri={apiUri} connectedToBackend={connected} />

Website/modules/MonitorJobsList.tsx

@@ -8,7 +8,7 @@ import '../styles/MangaCoverCard.css'
 import Icon from '@mdi/react';
 import { mdiTrashCanOutline, mdiPlayBoxOutline } from '@mdi/js';
 
-export default function MonitorJobsList({onStartSearch, onJobsChanged, connectedToBackend, apiUri} : {onStartSearch() : void, onJobsChanged: EventHandler<any>, connectedToBackend: boolean, apiUri: string}) {
+export default function MonitorJobsList({onStartSearch, onJobsChanged, connectedToBackend, apiUri, updateList} : {onStartSearch() : void, onJobsChanged: EventHandler<any>, connectedToBackend: boolean, apiUri: string, updateList: Date}) {
     const [MonitoringJobs, setMonitoringJobs] = useState<IJob[]>([]);
     const [AllManga, setAllManga] = useState<IManga[]>([]);
     const [joblistUpdateInterval, setJoblistUpdateInterval] = React.useState<number>();
@@ -40,7 +40,13 @@ export default function MonitorJobsList({onStartSearch, onJobsChanged, connected
         }
     }, [connectedToBackend]);
 
+    useEffect(() => {
+        UpdateMonitoringJobsList();
+    }, [updateList]);
+
     function UpdateMonitoringJobsList(){
+        if(!connectedToBackend)
+            return;
         //console.debug("Updating MonitoringJobsList");
         Job.GetMonitoringJobs(apiUri)
             .then((jobs) => {

Website/modules/Search.tsx

@@ -6,14 +6,13 @@ import IManga, {SearchResult} from "./interfaces/IManga";
 import '../styles/search.css';
 import '../styles/MangaSearchResult.css'
 
-export default function Search({apiUri, createJob, closeSearch} : {apiUri: string, createJob: (internalId: string, type: string) => void, closeSearch(): void}) {
+export default function Search({apiUri, jobInterval, onJobsChanged, closeSearch} : {apiUri: string, jobInterval: Date, onJobsChanged: (internalId: string) => void, closeSearch(): void}) {
     const [mangaConnectors, setConnectors] = useState<IMangaConnector[]>();
     const [selectedConnector, setSelectedConnector] = useState<IMangaConnector>();
     const [selectedLanguage, setSelectedLanguage] = useState<string>();
     const [searchBoxValue, setSearchBoxValue] = useState("");
     const [searchResults, setSearchResults] = useState<IManga[]>();
 
-
     const pattern = /https:\/\/([a-z0-9.]+\.[a-z0-9]{2,})(?:\/.*)?/i
 
     useEffect(() => {
@@ -106,7 +105,7 @@ export default function Search({apiUri, createJob, closeSearch} : {apiUri: strin
         <div id="SearchResults">
             {searchResults === undefined
                 ? <p></p>
-                : searchResults.map(result => SearchResult(apiUri, result, createJob))}
+                : searchResults.map(result => SearchResult(apiUri, result, jobInterval, onJobsChanged))}
         </div>
     </div>)
 }

Website/modules/interfaces/IManga.tsx

@@ -54,7 +54,7 @@ export function CoverCard(apiUri: string, manga: IManga) : ReactElement {
     </div>);
 }
 
-export function SearchResult(apiUri: string, manga: IManga, createJob: (internalId: string, type: string) => void) : ReactElement {
+export function SearchResult(apiUri: string, manga: IManga, interval: Date, onJobsChanged: (internalId: string) => void) : ReactElement {
     return(
         <div className="SearchResult" key={manga.internalId}>
             <img src={Manga.GetMangaCoverUrl(apiUri, manga.internalId)} alt="Manga Cover"></img>
@@ -67,7 +67,7 @@ export function SearchResult(apiUri: string, manga: IManga, createJob: (internal
             </div>
             <MarkdownPreview className="Manga-description" source={manga.description} style={{ backgroundColor: "transparent", color: "black" }} />
             <button className="Manga-AddButton" onClick={() => {
-                createJob(manga.internalId, "MonitorManga")
+                Job.CreateJobDateInterval(apiUri, manga.internalId, "MonitorManga", interval).then(()=> onJobsChanged(manga.internalId));
             }}>Monitor
             </button>
         </div>);