mirror of
https://github.com/ansible/awx.git
synced 2026-03-20 18:37:39 -02:30
Merge pull request #7752 from mabashian/convert-ProjectList-useRequest
Converts ProjectsList to use useRequest in preparation for advanced search Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
@@ -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 { ProjectsAPI } from '../../../../../../api';
|
import { ProjectsAPI } 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,30 +17,31 @@ const QS_CONFIG = getQSConfig('projects', {
|
|||||||
});
|
});
|
||||||
|
|
||||||
function ProjectsList({ i18n, nodeResource, onUpdateNodeResource }) {
|
function ProjectsList({ i18n, nodeResource, onUpdateNodeResource }) {
|
||||||
const [count, setCount] = useState(0);
|
|
||||||
const [error, setError] = useState(null);
|
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
|
||||||
const [projects, setProjects] = useState([]);
|
|
||||||
|
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
useEffect(() => {
|
const {
|
||||||
(async () => {
|
result: { projects, count },
|
||||||
setIsLoading(true);
|
error,
|
||||||
setProjects([]);
|
isLoading,
|
||||||
setCount(0);
|
request: fetchProjects,
|
||||||
|
} = useRequest(
|
||||||
|
useCallback(async () => {
|
||||||
const params = parseQueryString(QS_CONFIG, location.search);
|
const params = parseQueryString(QS_CONFIG, location.search);
|
||||||
try {
|
const results = await ProjectsAPI.read(params);
|
||||||
const { data } = await ProjectsAPI.read(params);
|
return {
|
||||||
setProjects(data.results);
|
projects: results.data.results,
|
||||||
setCount(data.count);
|
count: results.data.count,
|
||||||
} catch (err) {
|
};
|
||||||
setError(err);
|
}, [location]),
|
||||||
} finally {
|
{
|
||||||
setIsLoading(false);
|
projects: [],
|
||||||
}
|
count: 0,
|
||||||
})();
|
}
|
||||||
}, [location]);
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchProjects();
|
||||||
|
}, [fetchProjects]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PaginatedDataList
|
<PaginatedDataList
|
||||||
@@ -81,15 +83,15 @@ function ProjectsList({ i18n, nodeResource, onUpdateNodeResource }) {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: i18n._(t`Source Control URL`),
|
name: i18n._(t`Source control URL`),
|
||||||
key: 'scm_url',
|
key: 'scm_url',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: i18n._(t`Modified By (Username)`),
|
name: i18n._(t`Modified by (username)`),
|
||||||
key: 'modified_by__username',
|
key: 'modified_by__username',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: i18n._(t`Created By (Username)`),
|
name: i18n._(t`Created by (username)`),
|
||||||
key: 'created_by__username',
|
key: 'created_by__username',
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
|
|||||||
Reference in New Issue
Block a user