useRouter, withRouter instead of url prop

wri · Nov 17, 2024 · 60d765f · 60d765f
1 parent d2d3186
commit 60d765f
Show file tree

Hide file tree

Showing 38 changed files with 243 additions and 373 deletions.
diff --git a/components/countries-detail/documentation.js b/components/countries-detail/documentation.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useRouter } from 'next/router';
 
 // Utils
 import { HELPERS_DOC } from 'utils/documentation';
@@ -8,15 +9,16 @@ import { HELPERS_DOC } from 'utils/documentation';
 import DocumentsByCountry from 'components/countries-detail/documentation/documents-by-country';
 import Html from 'components/html';
 
-function OperatorsDetailDocumentation ({ countryDocumentation, vpaOverview, url }) {
+function OperatorsDetailDocumentation ({ countryDocumentation, vpaOverview }) {
+  const router = useRouter();
   const groupedByType = HELPERS_DOC.getGroupedByType(countryDocumentation);
 
   return (
     <div>
       <div className="c-section">
         <div className="l-container">
           {vpaOverview && <Html html={vpaOverview} className="georgia" /> }
-          <DocumentsByCountry data={groupedByType['gov-documents']} id={url.query.id} />
+          <DocumentsByCountry data={groupedByType['gov-documents']} id={router.query.id} />
         </div>
       </div>
     </div>
@@ -25,8 +27,7 @@ function OperatorsDetailDocumentation ({ countryDocumentation, vpaOverview, url
 
 OperatorsDetailDocumentation.propTypes = {
   countryDocumentation: PropTypes.array,
-  vpaOverview: PropTypes.string,
-  url: PropTypes.object,
+  vpaOverview: PropTypes.string
 };
 
 export default OperatorsDetailDocumentation;
diff --git a/components/help/faqs.js b/components/help/faqs.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Spinner from 'components/ui/spinner';
 import Html from 'components/html';
+import { withRouter } from 'next/router';
 
 // Intl
 import { injectIntl } from 'react-intl';
@@ -19,17 +20,17 @@ class HelpFaqs extends React.Component {
       easing: 'easeOutQuart'
     });
 
-    if (this.props.url.query.article) {
+    if (this.props.router.query.article) {
       setTimeout(() => {
-        this.triggerScrollTo(`#${this.props.url.query.article}`);
+        this.triggerScrollTo(`#${this.props.router.query.article}`);
       }, 250);
     }
   }
 
   componentDidUpdate() {
-    if (this.props.url.query.article) {
+    if (this.props.router.query.article) {
       setTimeout(() => {
-        this.triggerScrollTo(`#${this.props.url.query.article}`);
+        this.triggerScrollTo(`#${this.props.router.query.article}`);
       }, 250);
     }
   }
@@ -98,8 +99,8 @@ class HelpFaqs extends React.Component {
 
 HelpFaqs.propTypes = {
   intl: PropTypes.object.isRequired,
-  url: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired,
   faqs: PropTypes.object
 };
 
-export default injectIntl(HelpFaqs);
+export default injectIntl(withRouter(HelpFaqs));
diff --git a/components/help/how-otp-works.js b/components/help/how-otp-works.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Spinner from 'components/ui/spinner';
 import Html from 'components/html';
+import { withRouter } from 'next/router';
 
 // Intl
 import { injectIntl } from 'react-intl';
@@ -19,17 +20,17 @@ class HelpHowOTPWorks extends React.Component {
       easing: 'easeOutQuart'
     });
 
-    if (this.props.url.query.article) {
+    if (this.props.router.query.article) {
       setTimeout(() => {
-        this.triggerScrollTo(`#${this.props.url.query.article}`);
+        this.triggerScrollTo(`#${this.props.router.query.article}`);
       }, 250);
     }
   }
 
   componentDidUpdate() {
-    if (this.props.url.query.article) {
+    if (this.props.router.query.article) {
       setTimeout(() => {
-        this.triggerScrollTo(`#${this.props.url.query.article}`);
+        this.triggerScrollTo(`#${this.props.router.query.article}`);
       }, 250);
     }
   }
@@ -98,8 +99,8 @@ class HelpHowOTPWorks extends React.Component {
 
 HelpHowOTPWorks.propTypes = {
   intl: PropTypes.object.isRequired,
-  url: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired,
   howtos: PropTypes.object
 };
 
-export default injectIntl(HelpHowOTPWorks);
+export default injectIntl(withRouter(HelpHowOTPWorks));
diff --git a/components/help/legislation-and-regulations.js b/components/help/legislation-and-regulations.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Spinner from 'components/ui/spinner';
 import Html from 'components/html';
+import { withRouter } from 'next/router';
 
 // Intl
 import { injectIntl } from 'react-intl';
@@ -19,17 +20,17 @@ class HelpTools extends React.Component {
       easing: 'easeOutQuart'
     });
 
-    if (this.props.url.query.article) {
+    if (this.props.router.query.article) {
       setTimeout(() => {
-        this.triggerScrollTo(`#${this.props.url.query.article}`);
+        this.triggerScrollTo(`#${this.props.router.query.article}`);
       }, 250);
     }
   }
 
   componentDidUpdate() {
-    if (this.props.url.query.article) {
+    if (this.props.router.query.article) {
       setTimeout(() => {
-        this.triggerScrollTo(`#${this.props.url.query.article}`);
+        this.triggerScrollTo(`#${this.props.router.query.article}`);
       }, 250);
     }
   }
@@ -98,8 +99,8 @@ class HelpTools extends React.Component {
 
 HelpTools.propTypes = {
   intl: PropTypes.object.isRequired,
-  url: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired,
   tools: PropTypes.object
 };
 
-export default injectIntl(HelpTools);
+export default injectIntl(withRouter(HelpTools));
diff --git a/components/help/tutorials.js b/components/help/tutorials.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Spinner from 'components/ui/spinner';
 import Html from 'components/html';
+import { withRouter } from 'next/router';
 
 // Intl
 import { injectIntl } from 'react-intl';
@@ -19,17 +20,17 @@ class HelpTutorials extends React.Component {
       easing: 'easeOutQuart'
     });
 
-    if (this.props.url.query.article) {
+    if (this.props.router.query.article) {
       setTimeout(() => {
-        this.triggerScrollTo(`#${this.props.url.query.article}`);
+        this.triggerScrollTo(`#${this.props.router.query.article}`);
       }, 250);
     }
   }
 
   componentDidUpdate() {
-    if (this.props.url.query.article) {
+    if (this.props.router.query.article) {
       setTimeout(() => {
-        this.triggerScrollTo(`#${this.props.url.query.article}`);
+        this.triggerScrollTo(`#${this.props.router.query.article}`);
       }, 250);
     }
   }
@@ -98,8 +99,8 @@ class HelpTutorials extends React.Component {
 
 HelpTutorials.propTypes = {
   intl: PropTypes.object.isRequired,
-  url: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired,
   tutorials: PropTypes.object
 };
 
-export default injectIntl(HelpTutorials);
+export default injectIntl(withRouter(HelpTutorials));
diff --git a/components/layout/header.js b/components/layout/header.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 
 // Components
 import NavigationList from 'components/ui/navigation-list';
@@ -14,8 +14,9 @@ import UserDropdown from 'components/ui/user-dropdown';
 
 import useDeviceInfo from 'hooks/use-device-info';
 
-const Header = ({ url }) => {
-  const isHomePage = url.pathname === '/';
+const Header = () => {
+  const router = useRouter();
+  const isHomePage = router.pathname === '/';
   const [menuOpen, setMenuOpen] = useState(false);
   const { isDesktop } = useDeviceInfo();
   const isMenuOpen = menuOpen && !isDesktop;
@@ -40,7 +41,7 @@ const Header = ({ url }) => {
             )}
           </h1>
           <nav className="header-nav -desktop">
-            <NavigationList url={url} className="header-nav-list" />
+            <NavigationList className="header-nav-list" />
 
             <ul className="header-nav-list c-navigation-list">
               <li className="search">
@@ -64,14 +65,10 @@ const Header = ({ url }) => {
         </div>
       </div>
       {isMenuOpen && (
-        <MobileMenu url={url} />
+        <MobileMenu />
       )}
     </header>
   );
 }
 
-Header.propTypes = {
-  url: PropTypes.object.isRequired
-};
-
 export default Header;
diff --git a/components/layout/layout.js b/components/layout/layout.js
@@ -12,7 +12,7 @@ import Toastr from 'components/ui/toastr';
 import Notifications from 'components/ui/notifications';
 import RouterSpinner from 'components/layout/router-spinner';
 
-const Layout = ({ title, description, url, children, className, footer }) => {
+const Layout = ({ title, description, children, className, footer }) => {
   const classNames = classnames({
     [className]: !!className
   });
@@ -26,9 +26,7 @@ const Layout = ({ title, description, url, children, className, footer }) => {
 
       <Icons />
 
-      <Header
-        url={url}
-      />
+      <Header />
 
       <div className={`l-main ${classNames}`}>
         {children}
@@ -49,7 +47,6 @@ Layout.propTypes = {
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   children: PropTypes.any.isRequired,
-  url: PropTypes.object.isRequired,
   className: PropTypes.string,
   footer: PropTypes.bool
 };

diff --git a/components/operators-detail/documentation.js b/components/operators-detail/documentation.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 // Intl
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 // Utils
 import { HELPERS_DOC } from 'utils/documentation';
@@ -19,10 +19,9 @@ import DocumentsHeaderFilter from 'components/operators-detail/documentation/doc
 function OperatorsDetailDocumentation({
   operatorDocumentation,
   operatorTimeline,
-  operatorsDetail,
-  url,
-  intl,
+  operatorsDetail
 }) {
+  const intl = useIntl();
   const operator = operatorsDetail.data;
   const docsGroupedByCategory = HELPERS_DOC.getGroupedByCategory(
     operatorDocumentation
@@ -120,9 +119,7 @@ function OperatorsDetailDocumentation({
 OperatorsDetailDocumentation.propTypes = {
   operatorsDetail: PropTypes.object,
   operatorDocumentation: PropTypes.array,
-  operatorTimeline: PropTypes.array,
-  url: PropTypes.object,
-  intl: PropTypes.object.isRequired,
+  operatorTimeline: PropTypes.array
 };
 
-export default injectIntl(OperatorsDetailDocumentation);
+export default OperatorsDetailDocumentation;
diff --git a/components/operators-detail/layout.js b/components/operators-detail/layout.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'utils/general';
+import { withRouter } from 'next/router';
 
 // Utils
 import { HELPERS_DOC } from 'utils/documentation';
@@ -129,16 +130,16 @@ class OperatorsDetailLayout extends React.Component {
 
   render() {
     const {
-      url,
+      router,
       user,
       operatorsDetail,
       children,
       intl
     } = this.props;
 
     const id = operatorsDetail.data.id;
-    const slug = url.query.id;
-    const tab = url.asPath.split("/").pop() || 'overview';
+    const slug = router.query.id;
+    const tab = router.asPath.split("/").pop() || 'overview';
     const logoPath = operatorsDetail.data.logo?.thumbnail
       ? operatorsDetail.data.logo.thumbnail.url
       : '';
@@ -162,7 +163,6 @@ class OperatorsDetailLayout extends React.Component {
       <Layout
         title={operatorsDetail.data.name || '-'}
         description="Forest operator's name description..."
-        url={url}
       >
         <Spinner isLoading={operatorsDetail.loading} className="-fixed" />
 
@@ -186,7 +186,7 @@ class OperatorsDetailLayout extends React.Component {
 
         <Tabs
           href={{
-            pathname: url.pathname,
+            pathname: router.pathname,
             query: { id: slug },
             as: `/operators/${slug}`,
           }}
@@ -202,13 +202,13 @@ class OperatorsDetailLayout extends React.Component {
 
 OperatorsDetailLayout.propTypes = {
   children: PropTypes.any.isRequired,
-  url: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired,
   operatorsDetail: PropTypes.object,
   user: PropTypes.shape({}),
   intl: PropTypes.object.isRequired,
 };
 
-export default injectIntl(
+export default withRouter(injectIntl(
   connect(
     (state) => ({
       user: state.user,
@@ -223,4 +223,4 @@ export default injectIntl(
       getIntegratedAlertsMetadata
     }
   )(OperatorsDetailLayout)
-);
+));
diff --git a/components/operators-detail/observations.js b/components/operators-detail/observations.js
@@ -151,8 +151,7 @@ OperatorsDetailObservations.propTypes = {
   operatorObservations: PropTypes.array,
   FMU: PropTypes.shape({ id: PropTypes.string }),
   getOperatorObservations: PropTypes.func,
-  intl: PropTypes.object.isRequired,
-  url: PropTypes.object
+  intl: PropTypes.object.isRequired
 };
 
 export default injectIntl(