Skip to content
Snippets Groups Projects

130 inc batch async

Merged Gareth Hughes requested to merge 130_IncBatchAsync into master
Compare and Show latest version
14 files
+ 23857
15398
Compare changes
  • Side-by-side
  • Inline
Files
14
+ 106
0
 
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;
Loading