From 7cc3a7c39d3a20f25c6f7e26c41e14533c3970d2 Mon Sep 17 00:00:00 2001 From: Jake McDermott Date: Thu, 12 Dec 2019 17:11:34 -0500 Subject: [PATCH] Replace withRouter HOC with route hooks --- .../OrganizationAdd/OrganizationAdd.jsx | 7 ++++--- .../OrganizationDetail/OrganizationDetail.jsx | 8 ++++---- .../OrganizationEdit/OrganizationEdit.jsx | 7 ++++--- .../OrganizationList/OrganizationList.jsx | 8 +++++--- .../OrganizationTeams/OrganizationTeams.jsx | 7 ++++--- .../OrganizationTeams.test.jsx | 19 ++++++++++--------- 6 files changed, 31 insertions(+), 25 deletions(-) diff --git a/awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx b/awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx index 39045c7ff6..d8837a93c7 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { withRouter } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { @@ -16,7 +16,8 @@ import { Config } from '@contexts/Config'; import CardCloseButton from '@components/CardCloseButton'; import OrganizationForm from '../shared/OrganizationForm'; -function OrganizationAdd({ history, i18n }) { +function OrganizationAdd({ i18n }) { + const history = useHistory(); const [formError, setFormError] = useState(null); const handleSubmit = async (values, groupsToAssociate) => { @@ -67,4 +68,4 @@ OrganizationAdd.contextTypes = { }; export { OrganizationAdd as _OrganizationAdd }; -export default withI18n()(withRouter(OrganizationAdd)); +export default withI18n()(OrganizationAdd); diff --git a/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx b/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx index dbd4acf341..29fe94295e 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Link, withRouter } from 'react-router-dom'; +import { Link, useRouteMatch } from 'react-router-dom'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { CardBody as PFCardBody, Button } from '@patternfly/react-core'; @@ -16,10 +16,10 @@ const CardBody = styled(PFCardBody)` padding-top: 20px; `; -function OrganizationDetail({ i18n, match, organization }) { +function OrganizationDetail({ i18n, organization }) { const { params: { id }, - } = match; + } = useRouteMatch(); const { name, description, @@ -104,4 +104,4 @@ function OrganizationDetail({ i18n, match, organization }) { ); } -export default withI18n()(withRouter(OrganizationDetail)); +export default withI18n()(OrganizationDetail); diff --git a/awx/ui_next/src/screens/Organization/OrganizationEdit/OrganizationEdit.jsx b/awx/ui_next/src/screens/Organization/OrganizationEdit/OrganizationEdit.jsx index 5be5572550..ae38719d8b 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationEdit/OrganizationEdit.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationEdit/OrganizationEdit.jsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { withRouter } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; import { CardBody } from '@patternfly/react-core'; import { OrganizationsAPI } from '@api'; @@ -8,8 +8,9 @@ import { Config } from '@contexts/Config'; import OrganizationForm from '../shared/OrganizationForm'; -function OrganizationEdit({ history, organization }) { +function OrganizationEdit({ organization }) { const detailsUrl = `/organizations/${organization.id}/details`; + const history = useHistory(); const [formError, setFormError] = useState(null); const handleSubmit = async ( @@ -65,4 +66,4 @@ OrganizationEdit.contextTypes = { }; export { OrganizationEdit as _OrganizationEdit }; -export default withRouter(OrganizationEdit); +export default OrganizationEdit; diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx index 66b5e255ba..401e1efd02 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { withRouter } from 'react-router-dom'; +import { useLocation, useRouteMatch } from 'react-router-dom'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Card, PageSection } from '@patternfly/react-core'; @@ -22,7 +22,9 @@ const QS_CONFIG = getQSConfig('organization', { order_by: 'name', }); -function OrganizationsList({ i18n, location, match }) { +function OrganizationsList({ i18n }) { + const location = useLocation(); + const match = useRouteMatch(); const [contentError, setContentError] = useState(null); const [deletionError, setDeletionError] = useState(null); const [hasContentLoading, setHasContentLoading] = useState(true); @@ -185,4 +187,4 @@ function OrganizationsList({ i18n, location, match }) { } export { OrganizationsList as _OrganizationsList }; -export default withI18n()(withRouter(OrganizationsList)); +export default withI18n()(OrganizationsList); diff --git a/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx b/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx index 6c1b41a36e..832eba41c4 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import { withRouter } from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; import { OrganizationsAPI } from '@api'; import PaginatedDataList from '@components/PaginatedDataList'; @@ -12,7 +12,8 @@ const QS_CONFIG = getQSConfig('team', { order_by: 'name', }); -function OrganizationTeams({ id, location }) { +function OrganizationTeams({ id }) { + const location = useLocation(); const [contentError, setContentError] = useState(null); const [hasContentLoading, setHasContentLoading] = useState(false); const [itemCount, setItemCount] = useState(0); @@ -54,4 +55,4 @@ OrganizationTeams.propTypes = { }; export { OrganizationTeams as _OrganizationTeams }; -export default withRouter(OrganizationTeams); +export default OrganizationTeams; diff --git a/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.test.jsx b/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.test.jsx index d4a3ed9838..22e9b988a3 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.test.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.test.jsx @@ -1,6 +1,5 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; -import { shallow } from 'enzyme'; import { OrganizationsAPI } from '@api'; import { mountWithContexts } from '@testUtils/enzymeHelpers'; @@ -32,14 +31,16 @@ describe('', () => { jest.clearAllMocks(); }); - test('renders succesfully', () => { - shallow( - - ); + test('renders succesfully', async () => { + await act(async () => { + mountWithContexts( + + ); + }); }); test('should load teams on mount', async () => {