130 inc batch async

Add code to batch page to send job number to batch app.

src/components/jobs/JobList.jsx

+import axios from "axios";
+import React, { useContext, useEffect, useState } from "react";
+import { GlobalContext } from "../../contexts/GlobalContext";
+import JobListView from "./JobListView";
+
+const EMPTY_JOB_LIST = (<div>There are no jobs</div>);
+const LOADING_JOBS = (<div>Loading jobs</div>);
+/**
+ * Error Component
+ * @param {*} props
+ * @returns
+ */
+const ErrorList = (props) => {
+
+    const { message } = props;
+
+    return (
+        <>
+            <div>An error occurred during loading:</div>
+            <pre>{message}</pre>
+        </>
+    );
+}
+
+
+
+const JOB_PAGE_SIZE = 10;
+
+/**
+ * JobList
+ */
+const JobList = () => {
+
+    const { api_host, accessToken } = useContext(GlobalContext);
+
+    const [state, setState] = useState({
+        jobs: [],
+        count: 0,
+        page: 0,
+        pages: 1,
+        loading: true,
+        error: null,
+    });
+
+    function loadJobs(api_host, page = undefined) {
+        // FIXME: Why is accessToken an empty array by default!?
+        if (accessToken === "" || accessToken.length === 0)
+            return; // can not perform a request without token
+
+        setState(prev => ({ ...prev, loading: true }))
+
+        let uri = `${api_host}uws/jobs/?page_size=${JOB_PAGE_SIZE}`
+        if (page) {
+            uri.concat(`&page=${page}`)
+        }
+
+        axios.get(uri, { headers: { "Authorization": `Bearer ${accessToken}` } })
+            .then((res) => {
+
+                const data = res.data;
+                setState(prev => ({
+                    ...prev,
+                    jobs: data.results,
+                    count: data.count,
+                    page: page ? page : 1,
+                    pages: data.pages,
+                    loading: false
+                }));
+            })
+            .catch(error => {
+                console.log(error);
+                setState(prev => ({ ...prev, loading: false, error: error.message }))
+                // TODO: show warning pop-up
+            });
+    }
+
+    // Load Jobs from API
+    useEffect(() => { loadJobs(api_host) }, [api_host, accessToken]);
+
+    function handleListRefresh() {
+        loadJobs(api_host, state.page);
+    }
+
+    function handlePage(idx) {
+        const page = parseInt(idx); // is a string
+        loadJobs(api_host, page);
+    }
+
+    if (state.loading)
+        return LOADING_JOBS;
+
+    if (state.error)
+        return (<ErrorList message={state.error} />);
+
+    if (state.jobs.length === 0)
+        return EMPTY_JOB_LIST;
+
+
+    return <JobListView
+        state={state}
+        handleListRefresh={handleListRefresh}
+        handlePage={handlePage}
+    />
+}
+
+export default JobList;