Skip to content

Commit

Permalink
useRouter, withRouter instead of url prop
Browse files Browse the repository at this point in the history
  • Loading branch information
tsubik committed Nov 17, 2024
1 parent d2d3186 commit 1002fd8
Show file tree
Hide file tree
Showing 38 changed files with 277 additions and 406 deletions.
9 changes: 5 additions & 4 deletions components/countries-detail/documentation.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
Expand All @@ -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;
13 changes: 7 additions & 6 deletions components/help/faqs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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);
}
}
Expand Down Expand Up @@ -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));
13 changes: 7 additions & 6 deletions components/help/how-otp-works.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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);
}
}
Expand Down Expand Up @@ -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));
13 changes: 7 additions & 6 deletions components/help/legislation-and-regulations.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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);
}
}
Expand Down Expand Up @@ -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));
13 changes: 7 additions & 6 deletions components/help/tutorials.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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);
}
}
Expand Down Expand Up @@ -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));
15 changes: 6 additions & 9 deletions components/layout/header.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand All @@ -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">
Expand All @@ -64,14 +65,10 @@ const Header = ({ url }) => {
</div>
</div>
{isMenuOpen && (
<MobileMenu url={url} />
<MobileMenu />
)}
</header>
);
}

Header.propTypes = {
url: PropTypes.object.isRequired
};

export default Header;
7 changes: 2 additions & 5 deletions components/layout/layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
Expand All @@ -26,9 +26,7 @@ const Layout = ({ title, description, url, children, className, footer }) => {

<Icons />

<Header
url={url}
/>
<Header />

<div className={`l-main ${classNames}`}>
{children}
Expand All @@ -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
};
Expand Down
13 changes: 5 additions & 8 deletions components/operators-detail/documentation.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand Down Expand Up @@ -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;
Loading

0 comments on commit 1002fd8

Please sign in to comment.