Feature/149 jobs frontend

Adds an overview of currently running jobs to the frontend

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>);
+
+const JOB_PAGE_SIZE = 10;
+
+/**
+ * JobList
+ */
+const JobList = () => {
+
+    const { api_host } = useContext(GlobalContext);
+
+    const [state, setState] = useState({
+        jobs: [],
+        count: 0,
+        page: 0,
+        pages: 1,
+        loading: true
+    });
+
+    function loadJobs(api_host, page = undefined) {
+        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)
+            .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 }))
+                // TODO: show warning pop-up
+            });
+    }
+
+    // Load Jobs from API
+    useEffect(() => { loadJobs(api_host) }, [api_host]);
+
+    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.jobs.length === 0)
+        return EMPTY_JOB_LIST;
+
+    return <JobListView
+        state={state}
+        handleListRefresh={handleListRefresh}
+        handlePage={handlePage}
+    />
+}
+
+export default JobList;