Converts WorkflowJobTemplatesList to use useRequest in preparation for advanced search

This commit is contained in:
mabashian
2020-07-28 17:13:56 -04:00
parent 196368d89b
commit 2409bc5ee3

View File

@@ -1,10 +1,11 @@
import React, { useState, useEffect } from 'react'; import React, { useEffect, useCallback } from 'react';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { func, shape } from 'prop-types'; import { func, shape } from 'prop-types';
import { WorkflowJobTemplatesAPI } from '../../../../../../api'; import { WorkflowJobTemplatesAPI } from '../../../../../../api';
import { getQSConfig, parseQueryString } from '../../../../../../util/qs'; import { getQSConfig, parseQueryString } from '../../../../../../util/qs';
import useRequest from '../../../../../../util/useRequest';
import PaginatedDataList from '../../../../../../components/PaginatedDataList'; import PaginatedDataList from '../../../../../../components/PaginatedDataList';
import DataListToolbar from '../../../../../../components/DataListToolbar'; import DataListToolbar from '../../../../../../components/DataListToolbar';
import CheckboxListItem from '../../../../../../components/CheckboxListItem'; import CheckboxListItem from '../../../../../../components/CheckboxListItem';
@@ -20,32 +21,33 @@ function WorkflowJobTemplatesList({
nodeResource, nodeResource,
onUpdateNodeResource, onUpdateNodeResource,
}) { }) {
const [count, setCount] = useState(0);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [workflowJobTemplates, setWorkflowJobTemplates] = useState([]);
const location = useLocation(); const location = useLocation();
useEffect(() => { const {
(async () => { result: { workflowJobTemplates, count },
setIsLoading(true); error,
setWorkflowJobTemplates([]); isLoading,
setCount(0); request: fetchWorkflowJobTemplates,
} = useRequest(
useCallback(async () => {
const params = parseQueryString(QS_CONFIG, location.search); const params = parseQueryString(QS_CONFIG, location.search);
try { const results = await WorkflowJobTemplatesAPI.read(params, {
const { data } = await WorkflowJobTemplatesAPI.read(params, { role_level: 'execute_role',
role_level: 'execute_role', });
}); return {
setWorkflowJobTemplates(data.results); workflowJobTemplates: results.data.results,
setCount(data.count); count: results.data.count,
} catch (err) { };
setError(err); }, [location]),
} finally { {
setIsLoading(false); workflowJobTemplates: [],
} count: 0,
})(); }
}, [location]); );
useEffect(() => {
fetchWorkflowJobTemplates();
}, [fetchWorkflowJobTemplates]);
return ( return (
<PaginatedDataList <PaginatedDataList