Skip to content
Snippets Groups Projects

Feature/149 jobs frontend

Merged Klaas Kliffen requested to merge feature/149_jobs_frontend into master
All threads resolved!
+ 79
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>);
 
 
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;
Loading