Merge pull request #244 from ITISFoundation/fix_job_calls

fix: solved main loading issues

Author: JavierGOrdonnez

node/src/components/data/JobSelector.tsx

@@ -116,95 +116,99 @@ export default function JobsSelector(props: JobSelectorPropsType) {
     setJobCollections(newJobCollections);
   };
 
-  async function updateJobCollections(functionUid: string, forceFetch = false) {
-    console.info("Fetching jobCollections for function: ", functionUid);
-    if (fetchedJobCollections.length > 0 && !forceFetch) {
-      console.info("Job collections already fetched, skipping fetch.");
-      setJobCollections(fetchedJobCollections);
-      setLoading(false);
-      return;
-    }
-
-    const jobsC = (await getFunctionJobCollections(functionUid as string)) as FunctionJobCollection[];
+  const updateJobCollections = useCallback(
+    async (functionUid: string, forceFetch = false) => {
+      console.info("Fetching jobCollections for function: ", functionUid);
+      if (fetchedJobCollections.length > 0 && !forceFetch) {
+        console.info("Job collections already fetched, skipping fetch.");
+        setJobCollections(fetchedJobCollections);
+        setLoading(false);
+        return;
+      }
 
-    const equalJC =
-      fetchedJobCollections.length === jobsC.length &&
-      fetchedJobCollections
-        .map((jc, idx) => jc.jobCollection.jobIds.join(",") === jobsC[idx].jobIds.join(","))
-        .every(v => v === true);
+      const jobsC = (await getFunctionJobCollections(functionUid as string)) as FunctionJobCollection[];
 
-    if (equalJC) {
-      console.info("Job collections already fetched, skipping fetch.");
-      setJobCollections(fetchedJobCollections);
-      setLoading(false);
-      return;
-    }
+      const equalJC =
+        fetchedJobCollections.length === jobsC.length &&
+        fetchedJobCollections
+          .map((jc, idx) => jc.jobCollection.jobIds.join(",") === jobsC[idx].jobIds.join(","))
+          .every(v => v === true);
 
-    if (forceFetch) {
-      setLoading(true);
-      setJobCollections([]);
-      setProgress(0);
-      setJobProgress(0);
-      jobsFetched.current = 0;
-      colsFetched.current = 0;
-    }
+      if (equalJC) {
+        console.info("Job collections already fetched, skipping fetch.");
+        setJobCollections(fetchedJobCollections);
+        setLoading(false);
+        return;
+      }
 
-    const totalSubs = jobsC.reduce((acc, jc) => acc + jc.jobIds.length, 0);
-    colsFetched.current = 0;
-    jobsFetched.current = 0;
-    console.info("Fetched jobCollections: ", jobsC, totalSubs);
+      if (forceFetch) {
+        setLoading(true);
+        setJobCollections([]);
+        setProgress(0);
+        setJobProgress(0);
+        jobsFetched.current = 0;
+        colsFetched.current = 0;
+      }
 
-    if (jobsC.length === 0) {
-      console.info("No job collections found for function: ", functionUid);
-      setJobCollections([]);
-      setFetchedJobCollections([]);
-      setLoading(false);
-      return;
-    }
+      const totalSubs = jobsC.reduce((acc, jc) => acc + jc.jobIds.length, 0);
+      colsFetched.current = 0;
+      jobsFetched.current = 0;
+      console.info("Fetched jobCollections: ", jobsC, totalSubs);
+
+      if (jobsC.length === 0) {
+        console.info("No job collections found for function: ", functionUid);
+        setJobCollections([]);
+        setFetchedJobCollections([]);
+        setLoading(false);
+        return;
+      }
 
-    const newJobCollections: SelectedJobCollection[] = [];
-
-    for (let jcIdx = 0; jcIdx < jobsC.length; jcIdx += 1) {
-      const jc = jobsC[jcIdx];
-      const subJobs = [];
-      for (let subJobIdx = 0; subJobIdx < jc.jobIds.length; subJobIdx += 1) {
-        let job: FunctionJob;
-        const id = jc.jobIds[subJobIdx];
-        // check if job is already fetched in fetchedJobCollections
-        const existingJob = fetchedJobCollections.find(
-          j =>
-            j.jobCollection.jobIds.includes(id) &&
-            j.subJobs.some(sj => sj.job.uid === id && (sj.job.status === "FAILED" || sj.job.status === "SUCCESS")),
-        );
-        if (existingJob) {
-          // console.info("Job already fetched: ", id, existingJob.subJobs.find((j) => j.job.uid === id));
-          job = existingJob.subJobs.find(j => j.job.uid === id)?.job;
-        } else {
-          job = await getFunctionJob(id);
+      const newJobCollections: SelectedJobCollection[] = [];
+
+      for (let jcIdx = 0; jcIdx < jobsC.length; jcIdx += 1) {
+        const jc = jobsC[jcIdx];
+        const subJobs = [];
+        for (let subJobIdx = 0; subJobIdx < jc.jobIds.length; subJobIdx += 1) {
+          let job: FunctionJob;
+          const id = jc.jobIds[subJobIdx];
+          // check if job is already fetched in fetchedJobCollections
+          const existingJob = fetchedJobCollections.find(
+            j =>
+              j.jobCollection.jobIds.includes(id) &&
+              j.subJobs.some(sj => sj.job.uid === id && (sj.job.status === "FAILED" || sj.job.status === "SUCCESS")),
+          );
+          if (existingJob) {
+            // console.info("Job already fetched: ", id, existingJob.subJobs.find((j) => j.job.uid === id));
+            job = existingJob.subJobs.find(j => j.job.uid === id)?.job;
+          } else {
+            job = await getFunctionJob(id);
+          }
+          jobsFetched.current += 1;
+          const jobsProg = (jobsFetched.current / totalSubs) * 100;
+          setJobProgress(jobsProg);
+          subJobs.push({
+            selected: false,
+            job,
+          });
         }
-        jobsFetched.current += 1;
-        const jobsProg = (jobsFetched.current / totalSubs) * 100;
-        setJobProgress(jobsProg);
-        subJobs.push({
+        console.info("Fetched subJobs for jobCollection: ", progress, jobProgress, jobsFetched.current);
+        colsFetched.current += jc.jobIds.length;
+        setProgress((colsFetched.current / totalSubs) * 100);
+        newJobCollections.push({
+          jobCollection: jc,
           selected: false,
-          job,
+          subJobs,
         });
       }
-      console.info("Fetched subJobs for jobCollection: ", progress, jobProgress, jobsFetched.current);
-      colsFetched.current += jc.jobIds.length;
-      setProgress((colsFetched.current / totalSubs) * 100);
-      newJobCollections.push({
-        jobCollection: jc,
-        selected: false,
-        subJobs,
-      });
-    }
 
-    setJobCollections(newJobCollections);
-    setFetchedJobCollections(newJobCollections);
-    updateJobContext(newJobCollections);
-    setProgress(100);
-  }
+      setJobCollections(newJobCollections);
+      setFetchedJobCollections(newJobCollections);
+      updateJobContext(newJobCollections);
+      setProgress(100);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fetchedJobCollections],
+  );
 
   const openJobCollection = (uid: string) => {
     const idx = jobCollections.findIndex(jc => jc.jobCollection.uid === uid);
@@ -279,6 +283,12 @@ export default function JobsSelector(props: JobSelectorPropsType) {
     updateJobContext(newJobCollections);
   }, [jobCollections, updateJobContext]);
 
+  const handleJobsUpdate = useCallback(async () => {
+    setJobCollections([]);
+    await updateJobCollections(selectedFunction?.uid as string);
+    console.info("Updated JobCollections");
+  }, [selectedFunction, updateJobCollections]);
+
   useEffect(() => {
     if (jobCollections.length > 0 && loading === true) {
       onToggleAll(true);
@@ -288,23 +298,12 @@ export default function JobsSelector(props: JobSelectorPropsType) {
   }, [jobCollections, loading, onToggleAll, setIsSuMoGenerated, setLoading, updateJobContext]);
 
   useEffect(() => {
-    console.info("useEffect in JobsSelector triggered");
-    if (selectedFunction === undefined || jobCollections.length === 0) {
+    console.info("useEffect in JobsSelector triggered", selectedFunction, jobCollections);
+    if (selectedFunction === undefined || jobCollections.length > 0) {
       return;
     }
     console.info("Function selected: ", selectedFunction.uid);
-    (async () => {
-      setJobCollections([]);
-      await updateJobCollections(selectedFunction?.uid as string);
-      console.info("Updated JobCollections");
-    })();
-
-    console.info("Function selected: ", selectedFunction.uid);
-    (async () => {
-      setJobCollections([]);
-      await updateJobCollections(selectedFunction?.uid as string);
-      console.info("Updated JobCollections");
-    })();
+    handleJobsUpdate();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFunction]);