External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-12 02:19:58 -03:30
Code Issues Packages Projects Releases Wiki Activity

Update lookups to use useRequest hook

Browse Source
This commit is contained in:
Marliana Lara 2020-05-18 12:38:07 -04:00
parent 71ef219ffb
commit e509bbfbb3
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
2 changed files with 47 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
awx/ui_next/src/components/Lookup/InventoryLookup.jsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useCallback, useEffect } from 'react';
import { func, bool } from 'prop-types';
import { withRouter } from 'react-router-dom';
import { withI18n } from '@lingui/react';
@ -7,6 +7,7 @@ import { InventoriesAPI } from '../../api';
import { Inventory } from '../../types';
import Lookup from './Lookup';
import OptionsList from '../OptionsList';
import useRequest from '../../util/useRequest';
import { getQSConfig, parseQueryString } from '../../util/qs';
import LookupErrorMessage from './shared/LookupErrorMessage';
@ -17,22 +18,28 @@ const QS_CONFIG = getQSConfig('inventory', {
});
function InventoryLookup({ value, onChange, onBlur, required, i18n, history }) {
const [inventories, setInventories] = useState([]);
const [count, setCount] = useState(0);
const [error, setError] = useState(null);
const {
result: { count, inventories },
error,
request: fetchInventories,
} = useRequest(
useCallback(async () => {
const params = parseQueryString(QS_CONFIG, history.location.search);
const { data } = await InventoriesAPI.read(params);
return {
count: data.count,
inventories: data.results,
};
}, [history.location.search]),
{
count: 0,
inventories: [],
}
);
useEffect(() => {
(async () => {
const params = parseQueryString(QS_CONFIG, history.location.search);
try {
const { data } = await InventoriesAPI.read(params);
setInventories(data.results);
setCount(data.count);
} catch (err) {
setError(err);
}
})();
}, [history.location]);
fetchInventories();
}, [fetchInventories]);
return (
<>

55
awx/ui_next/src/components/Lookup/ProjectLookup.jsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useCallback, useEffect } from 'react';
import { node, string, func, bool } from 'prop-types';
import { withRouter } from 'react-router-dom';
import { withI18n } from '@lingui/react';
@ -8,6 +8,7 @@ import { ProjectsAPI } from '../../api';
import { Project } from '../../types';
import { FieldTooltip } from '../FormField';
import OptionsList from '../OptionsList';
import useRequest from '../../util/useRequest';
import { getQSConfig, parseQueryString } from '../../util/qs';
import Lookup from './Lookup';
import LookupErrorMessage from './shared/LookupErrorMessage';
@ -29,37 +30,31 @@ function ProjectLookup({
onBlur,
history,
}) {
const [projects, setProjects] = useState([]);
const [count, setCount] = useState(0);
const [error, setError] = useState(null);
const isMounted = useRef(null);
useEffect(() => {
isMounted.current = true;
return () => {
isMounted.current = false;
};
}, []);
useEffect(() => {
(async () => {
const {
result: { count, projects },
error,
request: fetchProjects,
} = useRequest(
useCallback(async () => {
const params = parseQueryString(QS_CONFIG, history.location.search);
try {
const { data } = await ProjectsAPI.read(params);
if (isMounted.current) {
setProjects(data.results);
setCount(data.count);
if (data.count === 1) {
onChange(data.results[0]);
}
}
} catch (err) {
if (isMounted.current) {
setError(err);
}
const { data } = await ProjectsAPI.read(params);
if (data.count === 1) {
onChange(data.results[0]);
}
})();
}, [onChange, history.location]);
return {
count: data.count,
projects: data.results,
};
}, [onChange, history.location.search]),
{
count: 0,
projects: [],
}
);
useEffect(() => {
fetchProjects();
}, [fetchProjects]);
return (
<FormGroup