Replace injectIntl by useIntl + replace props by explicit object

frontend/package.json

@@ -73,7 +73,7 @@
     "build": "npm run preparation && npm run update-static && react-scripts build",
     "prettier": "prettier --write src/**/*.js",
     "lint": "eslint src",
-    "test": "npm run lint && react-scripts test --transformIgnorePatterns \"node_modules/(?!mapbox-gl-draw-circle)/\" --env=jsdom-fourteen",
+    "test": "npm run lint && react-scripts test --env=jsdom-fourteen",
     "coverage": "npm run test -- --coverage --watchAll=false"
   },
   "eslintConfig": {

frontend/src/components/header/index.js

@@ -48,11 +48,11 @@ function getMenuItensForUser(userDetails, organisations) {
   return filteredMenuItems;
 }
 
-const UserDisplay = (props) => {
+const UserDisplay = ({ username }) => {
   return (
     <span>
       <CurrentUserAvatar className="br-100 v-mid red h2 w2 dib" />
-      <span className="pl2">{props.username}</span>
+      <span className="pl2">{username}</span>
     </span>
   );
 };

frontend/src/components/licenses/index.js

@@ -49,7 +49,7 @@ export const LicensesManagement = ({ licenses, userDetails }) => {
   );
 };
 
-export const LicenseInformation = (props) => {
+export const LicenseInformation = () => {
   const labelClasses = 'db pt3 pb2';
   const fieldClasses = 'blue-grey w-100 pv3 ph2 input-reset ba b--grey-light bg-transparent';
 
@@ -73,13 +73,13 @@ export const LicenseInformation = (props) => {
   );
 };
 
-export const LicenseForm = (props) => {
+export const LicenseForm = ({ license, updateLicense, disabledForm }) => {
   const [editMode, setEditMode] = useState(false);
 
   return (
     <Form
-      onSubmit={(values) => props.updateLicense(values)}
-      initialValues={props.license}
+      onSubmit={(values) => updateLicense(values)}
+      initialValues={license}
       render={({ handleSubmit, pristine, form, submitting, values }) => {
         return (
           <div className="blue-grey mb3">
@@ -89,10 +89,7 @@ export const LicenseForm = (props) => {
               </h3>
               <EditModeControl editMode={editMode} switchModeFn={setEditMode} />
               <form id="license-form" onSubmit={handleSubmit}>
-                <fieldset
-                  className="bn pa0"
-                  disabled={submitting || props.disabledForm || !editMode}
-                >
+                <fieldset className="bn pa0" disabled={submitting || disabledForm || !editMode}>
                   <LicenseInformation />
                 </fieldset>
               </form>

frontend/src/components/localeSelect.js

@@ -7,19 +7,17 @@ import { Dropdown } from './dropdown';
 import { supportedLocales } from '../utils/internationalization';
 import { setLocale } from '../store/actions/userPreferences';
 
-function LocaleSelect(props) {
-  const onLocaleSelect = arr => {
-    props.setLocale(arr[0].value);
+function LocaleSelect({ userPreferences, setLocale, className }) {
+  const onLocaleSelect = (arr) => {
+    setLocale(arr[0].value);
   };
   const getActiveLanguageNames = () => {
-    const locales = [
-      props.userPreferences.locale,
-      navigator.language,
-      navigator.language.substr(0, 2),
-    ];
+    const locales = [userPreferences.locale, navigator.language, navigator.language.substr(0, 2)];
     let supportedLocaleNames = [];
-    locales.forEach(locale =>
-      supportedLocales.filter(i => i.value === locale).forEach(i => supportedLocaleNames.push(i)),
+    locales.forEach((locale) =>
+      supportedLocales
+        .filter((i) => i.value === locale)
+        .forEach((i) => supportedLocaleNames.push(i)),
     );
     return supportedLocaleNames.length ? supportedLocaleNames[0].value : 'en';
   };
@@ -31,18 +29,15 @@ function LocaleSelect(props) {
       value={getActiveLanguageNames()}
       options={supportedLocales}
       display={<FormattedMessage {...messages.language} />}
-      className={`blue-dark bg-white mr1 v-mid pv2 ph3 ${props.className}`}
+      className={`blue-dark bg-white mr1 v-mid pv2 ph3 ${className}`}
     />
   );
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   userPreferences: state.preferences,
 });
 
-const LocaleSelector = connect(
-  mapStateToProps,
-  { setLocale },
-)(LocaleSelect);
+const LocaleSelector = connect(mapStateToProps, { setLocale })(LocaleSelect);
 
 export { LocaleSelector };

frontend/src/components/projectCard/dueDateBox.js

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import humanizeDuration from 'humanize-duration';
 
 import { ClockIcon } from '../svgIcons';
 import messages from './messages';
 
-function DueDateBox({ intl, dueDate, intervalMili, align = 'right' }: Object) {
+export function DueDateBox({ dueDate, intervalMili, align = 'right' }: Object) {
+  const intl = useIntl();
   const [timer, setTimer] = useState(Date.now());
   useEffect(() => {
     let interval;
@@ -72,6 +73,3 @@ function DueDateBox({ intl, dueDate, intervalMili, align = 'right' }: Object) {
     return null;
   }
 }
-
-//decorator pattern to provide the intl object from IntlProvider into function props.
-export default injectIntl(DueDateBox, { forwardRef: true });

frontend/src/components/projectCard/tests/dueDateBox.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import TestRenderer from 'react-test-renderer';
 import { IntlProvider } from 'react-intl';
 
-import DueDateBox from '../../../components/projectCard/dueDateBox';
+import { DueDateBox } from '../../../components/projectCard/dueDateBox';
 
 const createComponentWithIntl = (children, props = { locale: 'en' }) => {
   return TestRenderer.create(<IntlProvider {...props}>{children}</IntlProvider>);

frontend/src/components/projectDetail/infoPanel.js

@@ -6,7 +6,7 @@ import messages from './messages';
 import { MappingTypes } from '../mappingTypes';
 import { Imagery } from '../taskSelection/imagery';
 import ProjectProgressBar from '../projectCard/projectProgressBar';
-import DueDateBox from '../projectCard/dueDateBox';
+import { DueDateBox } from '../projectCard/dueDateBox';
 import { MappingLevelMessage } from '../mappingLevel';
 import { BigProjectTeaser } from './bigProjectTeaser';
 import { useComputeCompleteness } from '../../hooks/UseProjectCompletenessCalc';

frontend/src/components/projectStats/contributorsStats.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Doughnut, Bar } from 'react-chartjs-2';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import messages from './messages';
 import userMessages from '../user/messages';
@@ -9,11 +9,11 @@ import { formatChartData, formatTooltip } from '../../utils/formatChartJSData';
 import { useContributorStats } from '../../hooks/UseContributorStats';
 import { StatsCardContent } from '../statsCardContent';
 
-function ContributorsStats(props) {
-  const stats = useContributorStats(props.contributors.userContributions);
-  const getUserLevelLabel = (level) =>
-    props.intl.formatMessage(userMessages[`mapperLevel${level}`]);
-  const getUserExpLabel = (id) => props.intl.formatMessage(messages[`${id}`]);
+export default function ContributorsStats({ contributors }) {
+  const intl = useIntl();
+  const stats = useContributorStats(contributors.userContributions);
+  const getUserLevelLabel = (level) => intl.formatMessage(userMessages[`mapperLevel${level}`]);
+  const getUserExpLabel = (id) => intl.formatMessage(messages[`${id}`]);
 
   let userLevelsReference = [
     {
@@ -78,7 +78,7 @@ function ContributorsStats(props) {
             className="pv3-l pv2 mb3 shadow-4 bg-white"
           />
           <StatsCardContent
-            value={props.contributors.userContributions.length}
+            value={contributors.userContributions.length}
             label={<FormattedMessage {...messages.totalContributors} />}
             className="pv3-l pv2 mb3 shadow-4 bg-white"
           />
@@ -115,5 +115,3 @@ function ContributorsStats(props) {
     </div>
   );
 }
-
-export default injectIntl(ContributorsStats);

frontend/src/components/projectStats/edits.js

@@ -51,8 +51,8 @@ const Element = ({ field, value }) => {
   );
 };
 
-export const EditsStats = (props) => {
-  const { changesets, buildings, roads, edits } = props.data;
+export const EditsStats = ({ data }) => {
+  const { changesets, buildings, roads, edits } = data;
 
   return (
     <div className="cf w-100 pb4 ph2 ph4-ns blue-dark">

frontend/src/components/projectStats/taskStatus.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import { Doughnut } from 'react-chartjs-2';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import statusMessages from '../taskSelection/messages';
 import messages from './messages';
 import { formatChartData, formatTooltip } from '../../utils/formatChartJSData';
 import { TASK_COLOURS } from '../../config';
 import { StatsCardContent } from '../statsCardContent';
 
-const TasksByStatus = (props) => {
-  const getLabel = (status) => props.intl.formatMessage(statusMessages[`taskStatus_${status}`]);
+const TasksByStatus = ({ stats }) => {
+  const intl = useIntl();
+  const getLabel = (status) => intl.formatMessage(statusMessages[`taskStatus_${status}`]);
 
   let reference = [
     {
@@ -54,7 +55,7 @@ const TasksByStatus = (props) => {
       borderColor: TASK_COLOURS.BADIMAGERY,
     },
   ];
-  const data = formatChartData(reference, props.stats);
+  const data = formatChartData(reference, stats);
 
   return (
     <div className="cf w-100 mb3 ph2 ph4-ns bg-tan blue-dark">
@@ -75,7 +76,7 @@ const TasksByStatus = (props) => {
           {reference.map((status, n) => (
             <StatsCardContent
               key={n}
-              value={props.stats[status.field]}
+              value={stats[status.field]}
               label={status.label}
               className="w-25-ns w-50 fl tc pt3 pb4"
             />
@@ -86,4 +87,4 @@ const TasksByStatus = (props) => {
   );
 };
 
-export default injectIntl(TasksByStatus);
+export default TasksByStatus;

frontend/src/components/taskSelection/action.js

@@ -17,7 +17,7 @@ import { TaskHistory } from './taskActivity';
 import { ChangesetCommentTags } from './changesetComment';
 import { useSetProjectPageTitleTag } from '../../hooks/UseMetaTags';
 import { useFetch } from '../../hooks/UseFetch';
-import DueDateBox from '../projectCard/dueDateBox';
+import { DueDateBox } from '../projectCard/dueDateBox';
 import {
   CompletionTabForMapping,
   CompletionTabForValidation,

frontend/src/components/taskSelection/contributions.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Link } from '@reach/router';
 import Select from 'react-select';
 import ReactPlaceholder from 'react-placeholder';
-import { FormattedMessage, injectIntl, useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import messages from './messages.js';
 import { UserAvatar } from '../user/avatar';
@@ -114,31 +114,30 @@ function Contributor({ user, activeUser, activeStatus, displayTasks }: Object) {
   );
 }
 
-const Contributions = (props) => {
+const Contributions = ({ project, tasks, contribsData, activeUser, activeStatus, selectTask }) => {
+  const intl = useIntl();
   const mappingLevels = [
-    { value: 'ALL', label: props.intl.formatMessage(messages.mappingLevelALL) },
-    { value: 'ADVANCED', label: props.intl.formatMessage(messages.mappingLevelADVANCED) },
-    { value: 'INTERMEDIATE', label: props.intl.formatMessage(messages.mappingLevelINTERMEDIATE) },
-    { value: 'BEGINNER', label: props.intl.formatMessage(messages.mappingLevelBEGINNER) },
-    { value: 'NEWUSER', label: props.intl.formatMessage(messages.mappingLevelNEWUSER) },
+    { value: 'ALL', label: intl.formatMessage(messages.mappingLevelALL) },
+    { value: 'ADVANCED', label: intl.formatMessage(messages.mappingLevelADVANCED) },
+    { value: 'INTERMEDIATE', label: intl.formatMessage(messages.mappingLevelINTERMEDIATE) },
+    { value: 'BEGINNER', label: intl.formatMessage(messages.mappingLevelBEGINNER) },
+    { value: 'NEWUSER', label: intl.formatMessage(messages.mappingLevelNEWUSER) },
   ];
   const [level, setLevel] = useState(mappingLevels[0]);
-  const { percentMapped, percentValidated, percentBadImagery } = useComputeCompleteness(
-    props.tasks,
-  );
+  const { percentMapped, percentValidated, percentBadImagery } = useComputeCompleteness(tasks);
 
-  let contributionsArray = props.contribsData.userContributions || [];
+  let contributionsArray = contribsData.userContributions || [];
   if (level.value !== 'ALL' && level.value !== 'NEWUSER') {
     contributionsArray = contributionsArray.filter((u) => u.mappingLevel === level.value);
   }
 
   const displayTasks = (taskIds, status, user) => {
-    if (props.activeStatus === status && user === props.activeUser) {
-      props.selectTask([]);
+    if (activeStatus === status && user === activeUser) {
+      selectTask([]);
       return;
     }
 
-    props.selectTask(taskIds, status, user);
+    selectTask(taskIds, status, user);
   };
 
   if (level.value === 'NEWUSER') {
@@ -159,18 +158,14 @@ const Contributions = (props) => {
           percentBadImagery={percentBadImagery}
           className="pt1 pb3"
         />
-        <Link to={`/projects/${props.project.projectId}/stats/`}>
+        <Link to={`/projects/${project.projectId}/stats/`}>
           <CustomButton className="bg-white blue-light bn">
             <FormattedMessage {...messages.statistics} />
             <ChartLineIcon className="pl1 pb1 h1 v-mid" />
           </CustomButton>
         </Link>
         <span className="blue-light f4 fw7 ph1">&#183;</span>
-        <OSMChaButton
-          project={props.project}
-          className="bg-white blue-light bn mv2"
-          compact={true}
-        />
+        <OSMChaButton project={project} className="bg-white blue-light bn mv2" compact={true} />
         <Select
           classNamePrefix="react-select"
           isClearable={false}
@@ -191,8 +186,8 @@ const Contributions = (props) => {
             return (
               <Contributor
                 user={user}
-                activeUser={props.activeUser}
-                activeStatus={props.activeStatus}
+                activeUser={activeUser}
+                activeStatus={activeStatus}
                 displayTasks={displayTasks}
               />
             );
@@ -203,4 +198,4 @@ const Contributions = (props) => {
   );
 };
 
-export default injectIntl(Contributions);
+export default Contributions;