Merge pull request #7755 from mabashian/convert-InventorySourcesList-useRequest

Converts InventorySourcesList to use useRequest in preparation for advanced search

Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
             https://github.com/jakemcdermott
This commit is contained in:
softwarefactory-project-zuul[bot]
2020-07-29 22:48:32 +00:00
committed by GitHub

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 { InventorySourcesAPI } from '../../../../../../api'; import { InventorySourcesAPI } 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';
@@ -16,29 +17,31 @@ const QS_CONFIG = getQSConfig('inventory_sources', {
}); });
function InventorySourcesList({ i18n, nodeResource, onUpdateNodeResource }) { function InventorySourcesList({ i18n, nodeResource, onUpdateNodeResource }) {
const [count, setCount] = useState(0);
const [error, setError] = useState(null);
const [inventorySources, setInventorySources] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const location = useLocation(); const location = useLocation();
useEffect(() => { const {
(async () => { result: { inventorySources, count },
setIsLoading(true); error,
setInventorySources([]); isLoading,
setCount(0); request: fetchInventorySources,
} = useRequest(
useCallback(async () => {
const params = parseQueryString(QS_CONFIG, location.search); const params = parseQueryString(QS_CONFIG, location.search);
try { const results = await InventorySourcesAPI.read(params);
const { data } = await InventorySourcesAPI.read(params); return {
setInventorySources(data.results); inventorySources: results.data.results,
setCount(data.count); count: results.data.count,
} catch (err) { };
setError(err); }, [location]),
} finally { {
setIsLoading(false); inventorySources: [],
} count: 0,
})(); }
}, [location]); );
useEffect(() => {
fetchInventorySources();
}, [fetchInventorySources]);
return ( return (
<PaginatedDataList <PaginatedDataList
@@ -72,8 +75,8 @@ function InventorySourcesList({ i18n, nodeResource, onUpdateNodeResource }) {
name: i18n._(t`Source`), name: i18n._(t`Source`),
key: 'source', key: 'source',
options: [ options: [
[`file`, i18n._(t`File, Directory or Script`)], [`file`, i18n._(t`File, directory or script`)],
[`scm`, i18n._(t`Sourced from a Project`)], [`scm`, i18n._(t`Sourced from a project`)],
[`ec2`, i18n._(t`Amazon EC2`)], [`ec2`, i18n._(t`Amazon EC2`)],
[`gce`, i18n._(t`Google Compute Engine`)], [`gce`, i18n._(t`Google Compute Engine`)],
[`azure_rm`, i18n._(t`Microsoft Azure Resource Manager`)], [`azure_rm`, i18n._(t`Microsoft Azure Resource Manager`)],
@@ -82,7 +85,7 @@ function InventorySourcesList({ i18n, nodeResource, onUpdateNodeResource }) {
[`openstack`, i18n._(t`OpenStack`)], [`openstack`, i18n._(t`OpenStack`)],
[`rhv`, i18n._(t`Red Hat Virtualization`)], [`rhv`, i18n._(t`Red Hat Virtualization`)],
[`tower`, i18n._(t`Ansible Tower`)], [`tower`, i18n._(t`Ansible Tower`)],
[`custom`, i18n._(t`Custom Script`)], [`custom`, i18n._(t`Custom script`)],
], ],
}, },
]} ]}