remove unnecessary eslint ignore comics, replace react router use with hooks where possible in inventories

This commit is contained in:
John Mitchell 2020-04-06 13:54:53 -04:00
parent ecd1d09c9a
commit 2021c2a596
7 changed files with 48 additions and 46 deletions

View File

@ -1,20 +1,18 @@
import React from 'react';
import { withI18n } from '@lingui/react';
import { Switch, Route, withRouter } from 'react-router-dom';
import { Switch, Route } from 'react-router-dom';
import HostGroupsList from './HostGroupsList';
function HostGroups({ location, match, host }) {
function HostGroups({ host }) {
return (
<Switch>
<Route
key="list"
path="/hosts/:id/groups"
render={() => {
return (
<HostGroupsList host={host} location={location} match={match} />
);
return <HostGroupsList host={host} />;
}}
/>
</Switch>
@ -22,4 +20,4 @@ function HostGroups({ location, match, host }) {
}
export { HostGroups as _HostGroups };
export default withI18n()(withRouter(HostGroups));
export default withI18n()(HostGroups);

View File

@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback } from 'react';
import { withRouter } from 'react-router-dom';
import { useParams, useLocation } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { getQSConfig, parseQueryString, mergeParams } from '@util/qs';
@ -25,10 +25,11 @@ const QS_CONFIG = getQSConfig('group', {
order_by: 'name',
});
function HostGroupsList({ i18n, location, match, host }) {
function HostGroupsList({ i18n, host }) {
const [isModalOpen, setIsModalOpen] = useState(false);
const hostId = match.params.id;
const { id: hostId } = useParams();
const { search } = useLocation();
const invId = host.summary_fields.inventory.id;
const {
@ -38,7 +39,7 @@ function HostGroupsList({ i18n, location, match, host }) {
request: fetchGroups,
} = useRequest(
useCallback(async () => {
const params = parseQueryString(QS_CONFIG, location.search);
const params = parseQueryString(QS_CONFIG, search);
const [
{
@ -55,7 +56,7 @@ function HostGroupsList({ i18n, location, match, host }) {
itemCount: count,
actions: actionsResponse.data.actions,
};
}, [hostId, location]), // eslint-disable-line react-hooks/exhaustive-deps
}, [hostId, search]),
{
groups: [],
itemCount: 0,
@ -228,4 +229,4 @@ function HostGroupsList({ i18n, location, match, host }) {
</>
);
}
export default withI18n()(withRouter(HostGroupsList));
export default withI18n()(HostGroupsList);

View File

@ -1,14 +1,14 @@
import React from 'react';
import { withI18n } from '@lingui/react';
import { Switch, Route, withRouter } from 'react-router-dom';
import { Switch, Route } from 'react-router-dom';
import InventoryGroupAdd from '../InventoryGroupAdd/InventoryGroupAdd';
import InventoryGroup from '../InventoryGroup/InventoryGroup';
import InventoryGroupsList from './InventoryGroupsList';
function InventoryGroups({ setBreadcrumb, inventory, location, match }) {
function InventoryGroups({ setBreadcrumb, inventory }) {
return (
<Switch>
<Route
@ -34,7 +34,7 @@ function InventoryGroups({ setBreadcrumb, inventory, location, match }) {
key="list"
path="/inventories/inventory/:id/groups"
render={() => {
return <InventoryGroupsList location={location} match={match} />;
return <InventoryGroupsList />;
}}
/>
</Switch>
@ -42,4 +42,4 @@ function InventoryGroups({ setBreadcrumb, inventory, location, match }) {
}
export { InventoryGroups as _InventoryGroups };
export default withI18n()(withRouter(InventoryGroups));
export default withI18n()(InventoryGroups);

View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import { useParams, useLocation } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { getQSConfig, parseQueryString } from '@util/qs';
@ -37,7 +37,7 @@ const useModal = () => {
};
};
function InventoryGroupsList({ i18n, location, match }) {
function InventoryGroupsList({ i18n }) {
const [actions, setActions] = useState(null);
const [contentError, setContentError] = useState(null);
const [deletionError, setDeletionError] = useState(null);
@ -47,7 +47,8 @@ function InventoryGroupsList({ i18n, location, match }) {
const [selected, setSelected] = useState([]);
const { isModalOpen, toggleModal } = useModal();
const inventoryId = match.params.id;
const { id: inventoryId } = useParams();
const { search } = useLocation();
const fetchGroups = (id, queryString) => {
const params = parseQueryString(QS_CONFIG, queryString);
return InventoriesAPI.readGroups(id, params);
@ -64,7 +65,7 @@ function InventoryGroupsList({ i18n, location, match }) {
data: { actions: optionActions },
},
] = await Promise.all([
fetchGroups(inventoryId, location.search),
fetchGroups(inventoryId, search),
InventoriesAPI.readGroupsOptions(inventoryId),
]);
@ -78,7 +79,7 @@ function InventoryGroupsList({ i18n, location, match }) {
}
}
fetchData();
}, [inventoryId, location]);
}, [inventoryId, search]);
const handleSelectAll = isSelected => {
setSelected(isSelected ? [...groups] : []);
@ -138,7 +139,7 @@ function InventoryGroupsList({ i18n, location, match }) {
try {
const {
data: { count, results },
} = await fetchGroups(inventoryId, location.search);
} = await fetchGroups(inventoryId, search);
setGroups(results);
setGroupCount(count);
} catch (error) {
@ -263,4 +264,4 @@ function InventoryGroupsList({ i18n, location, match }) {
</>
);
}
export default withI18n()(withRouter(InventoryGroupsList));
export default withI18n()(InventoryGroupsList);

View File

@ -1,18 +1,18 @@
import React from 'react';
import { withI18n } from '@lingui/react';
import { Switch, Route, withRouter } from 'react-router-dom';
import { Switch, Route } from 'react-router-dom';
import InventoryHostGroupsList from './InventoryHostGroupsList';
function InventoryHostGroups({ location, match }) {
function InventoryHostGroups() {
return (
<Switch>
<Route
key="list"
path="/inventories/inventory/:id/hosts/:hostId/groups"
render={() => {
return <InventoryHostGroupsList location={location} match={match} />;
return <InventoryHostGroupsList />;
}}
/>
</Switch>
@ -20,4 +20,4 @@ function InventoryHostGroups({ location, match }) {
}
export { InventoryHostGroups as _InventoryHostGroups };
export default withI18n()(withRouter(InventoryHostGroups));
export default withI18n()(InventoryHostGroups);

View File

@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback } from 'react';
import { withRouter } from 'react-router-dom';
import { useParams, useLocation } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { getQSConfig, parseQueryString, mergeParams } from '@util/qs';
@ -25,10 +25,10 @@ const QS_CONFIG = getQSConfig('group', {
order_by: 'name',
});
function InventoryHostGroupsList({ i18n, location, match }) {
function InventoryHostGroupsList({ i18n }) {
const [isModalOpen, setIsModalOpen] = useState(false);
const { hostId, id: invId } = match.params;
const { hostId, id: invId } = useParams();
const { search } = useLocation();
const {
result: { groups, itemCount, actions },
@ -37,7 +37,7 @@ function InventoryHostGroupsList({ i18n, location, match }) {
request: fetchGroups,
} = useRequest(
useCallback(async () => {
const params = parseQueryString(QS_CONFIG, location.search);
const params = parseQueryString(QS_CONFIG, search);
const [
{
@ -54,7 +54,7 @@ function InventoryHostGroupsList({ i18n, location, match }) {
itemCount: count,
actions: actionsResponse.data.actions,
};
}, [hostId, location]), // eslint-disable-line react-hooks/exhaustive-deps
}, [hostId, search]), // eslint-disable-line react-hooks/exhaustive-deps
{
groups: [],
itemCount: 0,
@ -226,4 +226,4 @@ function InventoryHostGroupsList({ i18n, location, match }) {
</>
);
}
export default withI18n()(withRouter(InventoryHostGroupsList));
export default withI18n()(InventoryHostGroupsList);

View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom';
import { useParams, useLocation } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { getQSConfig, parseQueryString } from '@util/qs';
@ -20,7 +20,7 @@ const QS_CONFIG = getQSConfig('host', {
order_by: 'name',
});
function InventoryHostList({ i18n, location, match }) {
function InventoryHostList({ i18n }) {
const [actions, setActions] = useState(null);
const [contentError, setContentError] = useState(null);
const [deletionError, setDeletionError] = useState(null);
@ -28,10 +28,12 @@ function InventoryHostList({ i18n, location, match }) {
const [hosts, setHosts] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [selected, setSelected] = useState([]);
const { id } = useParams();
const { search } = useLocation();
const fetchHosts = (id, queryString) => {
const fetchHosts = (hostId, queryString) => {
const params = parseQueryString(QS_CONFIG, queryString);
return InventoriesAPI.readHosts(id, params);
return InventoriesAPI.readHosts(hostId, params);
};
useEffect(() => {
@ -45,7 +47,7 @@ function InventoryHostList({ i18n, location, match }) {
data: { actions: optionActions },
},
] = await Promise.all([
fetchHosts(match.params.id, location.search),
fetchHosts(id, search),
InventoriesAPI.readOptions(),
]);
@ -60,7 +62,7 @@ function InventoryHostList({ i18n, location, match }) {
}
fetchData();
}, [match.params.id, location]);
}, [id, search]);
const handleSelectAll = isSelected => {
setSelected(isSelected ? [...hosts] : []);
@ -86,7 +88,7 @@ function InventoryHostList({ i18n, location, match }) {
try {
const {
data: { count, results },
} = await fetchHosts(match.params.id, location.search);
} = await fetchHosts(id, search);
setHosts(results);
setHostCount(count);
@ -143,7 +145,7 @@ function InventoryHostList({ i18n, location, match }) {
? [
<ToolbarAddButton
key="add"
linkTo={`/inventories/inventory/${match.params.id}/hosts/add`}
linkTo={`/inventories/inventory/${id}/hosts/add`}
/>,
]
: []),
@ -160,8 +162,8 @@ function InventoryHostList({ i18n, location, match }) {
<InventoryHostItem
key={o.id}
host={o}
detailUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/details`}
editUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/edit`}
detailUrl={`/inventories/inventory/${id}/hosts/${o.id}/details`}
editUrl={`/inventories/inventory/${id}/hosts/${o.id}/edit`}
isSelected={selected.some(row => row.id === o.id)}
onSelect={() => handleSelect(o)}
/>
@ -170,7 +172,7 @@ function InventoryHostList({ i18n, location, match }) {
canAdd && (
<ToolbarAddButton
key="add"
linkTo={`/inventories/inventory/${match.params.id}/add`}
linkTo={`/inventories/inventory/${id}/add`}
/>
)
}
@ -190,4 +192,4 @@ function InventoryHostList({ i18n, location, match }) {
);
}
export default withI18n()(withRouter(InventoryHostList));
export default withI18n()(InventoryHostList);