Merge pull request #228 from wri/chore/performance

Chore/performance
wri · Dec 14, 2024 · c99e582 · c99e582
2 parents 6e87824 + 8805207
commit c99e582
Show file tree

Hide file tree

Showing 191 changed files with 4,650 additions and 3,532 deletions.
diff --git a/.env.default b/.env.default
@@ -14,24 +14,30 @@ GFW_API_KEY=
 MAPBOX_API_KEY=
 DOCUMENTS_MINDATE=
 
-// Transifex token
+# Transifex token
 TX_TOKEN=
 
-// Sentry DSN
+# Sentry DSN
 SENTRY_DSN=
 SENTRY_ORG=
 SENTRY_PROJECT=
 SENTRY_AUTH_TOKEN=
-// for development env to disable pushing release to sentry
+# for development env to disable pushing release to sentry
 SENTRY_DISABLE_RELEASE=
 
-// Osano Cookie Consent Manager
+# Osano Cookie Consent Manager
 OSANO_ID=
 
-// Hotjar - you can disable for e2e or development in prod mode
+# Hotjar - you can disable for e2e or development in prod mode
 # DISABLE_HOTJAR=true
 
-// Features
+# Critical CSS
+CRITICAL_CSS=true
+
+# Features
 FEATURE_COUNTRY_PAGES=false
-// map page should be enabled only in dev environment
+# map page should be enabled only in dev environment
 FEATURE_MAP_PAGE=true
+
+# Next
+NEXT_TELEMETRY_DISABLED=1
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,6 @@ static/tiles
 
 # Sentry
 .sentryclirc
+
+# compiled languages
+lang/compiled
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/database/table.js b/components/database/table.js
@@ -115,6 +115,7 @@ function DatabaseTable({
               target="_blank"
               rel="noopener noreferrer"
               className="report-item"
+              aria-label="Download document"
             >
               <Icon className="" name="icon-file-empty" />
             </a>
@@ -213,6 +214,7 @@ function DatabaseTable({
                 target="_blank"
                 rel="noopener noreferrer"
                 className="evidence-item"
+                aria-label="Download evidence document"
               >
                 <Icon className="" name="icon-file-empty" />
               </a>

diff --git a/components/form/CheckboxGroup.js b/components/form/CheckboxGroup.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import isEqual from 'lodash/isEqual';
+import isEqual from 'react-fast-compare';
 import { injectIntl } from 'react-intl';
 
 import Checkbox from './Checkbox';

diff --git a/components/form/File.js b/components/form/File.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import omit from 'lodash/omit';
+
+import { omit } from 'utils/general';
 
 // Intl
 import { injectIntl } from 'react-intl';

diff --git a/components/form/FmusCheckboxGroup.js b/components/form/FmusCheckboxGroup.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import isEqual from 'lodash/isEqual';
+import isEqual from 'react-fast-compare';
 import { injectIntl } from 'react-intl';
 
 // Utils

diff --git a/components/form/FormElement.js b/components/form/FormElement.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import isEqual from 'lodash/isEqual';
-import pick from 'lodash/pick';
+import isEqual from 'react-fast-compare';
 
 import Validator from './Validator';
 
@@ -30,10 +29,8 @@ class FormElement extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const prevPropsParsed = pick(prevProps, ['properties', 'validations']);
-    const currentPropsParsed = pick(this.props, ['properties', 'validations']);
-
-    if (!isEqual(prevPropsParsed, currentPropsParsed)) {
+    if (!isEqual(prevProps.properties, this.props.properties) ||
+        !isEqual(prevProps.validations, this.props.validations)) {
       this.triggerValidate();
     }
 

diff --git a/components/form/Validator.js b/components/form/Validator.js
@@ -1,4 +1,4 @@
-import isEmpty from "lodash/isEmpty";
+import { isEmpty } from "utils/general";
 
 class Validator {
   constructor(intl) {

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/overview/gallery-1.js b/components/help/overview/gallery-1.js
@@ -34,6 +34,7 @@ function Gallery1(props) {
                 description={tutorial.description}
                 link={{
                   label: props.intl.formatMessage({ id: 'Read more' }),
+                  "aria-label": tutorial.name,
                   href: `/help/how-otp-works?article=tutorial-article-${tutorial.id}`
                 }}
               />

diff --git a/components/help/overview/gallery-2.js b/components/help/overview/gallery-2.js
@@ -34,6 +34,7 @@ function Gallery2(props) {
                 description={tutorial.description}
                 link={{
                   label: props.intl.formatMessage({ id: 'Read more' }),
+                  "aria-label": tutorial.name,
                   href: `/help/legislation-and-regulations?article=tutorial-article-${tutorial.id}`
                 }}
               />

diff --git a/components/help/overview/gallery-3.js b/components/help/overview/gallery-3.js
@@ -32,6 +32,7 @@ function Gallery3(props) {
                 description={faq.answer}
                 link={{
                   label: props.intl.formatMessage({ id: 'Read more' }),
+                  "aria-label": faq.question,
                   href: `/help/faqs?article=faq-article-${faq.id}`
                 }}
               />

diff --git a/components/help/overview/gallery-4.js b/components/help/overview/gallery-4.js
@@ -34,6 +34,7 @@ function Gallery1(props) {
                 description={tutorial.description}
                 link={{
                   label: props.intl.formatMessage({ id: 'Read more' }),
+                  "aria-label": tutorial.name,
                   href: `/help/tutorials?article=tutorial-article-${tutorial.id}`
                 }}
               />

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/html/component.js b/components/html/component.js
@@ -12,9 +12,11 @@ function linkifyProcess(content) {
 function preprocess(text, linkify, placeholders) {
   let processedText = text;
   if (linkify) processedText = linkifyProcess(processedText);
+  // TODO: react does not allow wrong html structure (p inside p, table inside p etc.)
+  // remove <p> tags from placeholders
   if (placeholders) {
     Object.keys(placeholders).forEach((key) => {
-      processedText = processedText.replace(`{${key}}`, placeholders[key]);
+      processedText = processedText.replace(`<p>{${key}}</p>`, `{${key}}`);
     });
   }
 
@@ -27,6 +29,13 @@ const HTML = ({ html, linkify, placeholders, className }) => (
       preprocess(html, linkify, placeholders) || '',
       {
         replace: (node) => {
+          // TODO: works only for placeholders as separate text nodes
+          if (node.type === 'text' && placeholders) {
+            const key = Object.keys(placeholders).find((key) => node.data.trim() === `{${key}}`);
+
+            if (key) return placeholders[key];
+          }
+
           if (node.name === 'a') {
             return (
               <a