From 2021c2a596ac43ab795d01c8bd68059a9801a7b1 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Mon, 6 Apr 2020 13:54:53 -0400 Subject: [PATCH] remove unnecessary eslint ignore comics, replace react router use with hooks where possible in inventories --- .../screens/Host/HostGroups/HostGroups.jsx | 10 +++---- .../Host/HostGroups/HostGroupsList.jsx | 13 +++++----- .../InventoryGroups/InventoryGroups.jsx | 8 +++--- .../InventoryGroups/InventoryGroupsList.jsx | 15 ++++++----- .../InventoryHostGroups.jsx | 8 +++--- .../InventoryHostGroupsList.jsx | 14 +++++----- .../InventoryHosts/InventoryHostList.jsx | 26 ++++++++++--------- 7 files changed, 48 insertions(+), 46 deletions(-) diff --git a/awx/ui_next/src/screens/Host/HostGroups/HostGroups.jsx b/awx/ui_next/src/screens/Host/HostGroups/HostGroups.jsx index dca2320b88..ec4fe08ceb 100644 --- a/awx/ui_next/src/screens/Host/HostGroups/HostGroups.jsx +++ b/awx/ui_next/src/screens/Host/HostGroups/HostGroups.jsx @@ -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 ( { - return ( - - ); + return ; }} /> @@ -22,4 +20,4 @@ function HostGroups({ location, match, host }) { } export { HostGroups as _HostGroups }; -export default withI18n()(withRouter(HostGroups)); +export default withI18n()(HostGroups); diff --git a/awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.jsx b/awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.jsx index 22c2901358..aa813b24a3 100644 --- a/awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.jsx +++ b/awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.jsx @@ -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); diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroups.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroups.jsx index 2917f3f96d..5b8ecdbbbb 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroups.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroups.jsx @@ -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 ( { - return ; + return ; }} /> @@ -42,4 +42,4 @@ function InventoryGroups({ setBreadcrumb, inventory, location, match }) { } export { InventoryGroups as _InventoryGroups }; -export default withI18n()(withRouter(InventoryGroups)); +export default withI18n()(InventoryGroups); diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx index f18f6ade7b..92576a9573 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx @@ -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); diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroups.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroups.jsx index 4f73cb36a3..ef90103734 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroups.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroups.jsx @@ -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 ( { - return ; + return ; }} /> @@ -20,4 +20,4 @@ function InventoryHostGroups({ location, match }) { } export { InventoryHostGroups as _InventoryHostGroups }; -export default withI18n()(withRouter(InventoryHostGroups)); +export default withI18n()(InventoryHostGroups); diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx index 04441c5070..f4c8212e1e 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx @@ -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); diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx index fdf368e39d..3b82d513a5 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx @@ -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 }) { ? [ , ] : []), @@ -160,8 +162,8 @@ function InventoryHostList({ i18n, location, match }) { row.id === o.id)} onSelect={() => handleSelect(o)} /> @@ -170,7 +172,7 @@ function InventoryHostList({ i18n, location, match }) { canAdd && ( ) } @@ -190,4 +192,4 @@ function InventoryHostList({ i18n, location, match }) { ); } -export default withI18n()(withRouter(InventoryHostList)); +export default withI18n()(InventoryHostList);