Bump react to 16

.eslintrc.json

@@ -21,5 +21,10 @@
     "extends": ["eslint:recommended", "plugin:react/recommended"],
     "globals": {
         "Promise": false
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
     }
 }

.nvmrc

@@ -1 +1 @@
-18.18.2
+20.8.1

package.json

@@ -34,48 +34,45 @@
     "css-loader": "^6.8.1",
     "enzyme": "^3.10.0",
     "eslint": "^4.12.1",
-    "eslint-plugin-react": "^6.9.0",
+    "eslint-plugin-react": "^7.33.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^22.1.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "react-addons-test-utils": "^15.4.2",
     "react-hot-loader": "^3.1.1",
-    "react-test-renderer": "^15.4.2",
+    "react-test-renderer": "^16.14.0",
+    "react-with-direction": "^1.3.1",
     "sass": "^1.69.4",
     "sass-loader": "^13.3.2",
     "style-loader": "3.3.3",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
+    "@babel/runtime": "^7.0.0",
     "babel-eslint": "^10.1.0",
     "copy-to-clipboard": "^3.0.5",
     "date-fns": "^1.28.0",
-    "enzyme-adapter-react-15": "^1.4.1",
-    "es6-promise": "^4.0.5",
+    "enzyme-adapter-react-16": "^1.15.7",
     "filesize": "^3.5.4",
-    "history": "^4.5.1",
     "lodash": "^4.17.21",
     "moment": "^2.18.0",
     "panda-session": "^0.1.6",
-    "react": "15.7.0",
-    "react-addons-shallow-compare": "^15.4.2",
-    "react-dates": "^8.2.1",
-    "react-dom": "^15.4.2",
+    "prop-types": "^15.8.1",
+    "react": "16.14.0",
+    "react-dates": "^21.8.0",
+    "react-dom": "^16.14.0",
     "react-redux": "^5.0.2",
     "react-router": "^3.0.2",
     "react-router-dom": "^4.0.0",
     "react-router-redux": "^4.0.8",
-    "redux": "^3.6.0",
+    "redux": "^4.2.1",
     "redux-thunk": "^2.2.0",
     "scribe-editor": "3.3.0",
     "scribe-plugin-keyboard-shortcuts": "^0.1.1",
     "scribe-plugin-link-prompt-command": "^1.0.0",
     "scribe-plugin-sanitizer": "^0.1.10",
     "scribe-plugin-toolbar": "^1.0.0",
-    "url-search-params": "^0.7.0",
-    "uuid": "^3.0.1",
-    "whatwg-fetch": "^2.0.3"
+    "uuid": "^3.0.1"
   }
 }

public/js/BaseApp.js

@@ -1,6 +1,9 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {Provider} from 'react-redux';
 import {Route, IndexRedirect, Router} from 'react-router';
+import 'react-dates/initialize';
+import 'react-dates/lib/css/_datepicker.css';
 
 import Page from './components/Page';
 import {AtomCreateTypeSelect} from './components/AtomCreate/AtomCreateTypeSelect';

public/js/actions/AtomActions/getSuggestionsForLatestContent.js

@@ -4,7 +4,7 @@ import {fetchTargetsForTags} from '../../services/TargetingApi';
 import AtomsApi from '../../services/AtomsApi';
 import {atomPropType} from '../../constants/atomPropType.js';
 import {logError} from '../../util/logger';
-import {PropTypes} from 'react';
+import {PropTypes} from 'prop-types';
 
 function requestSuggestionsForLatestContent() {
   return {

public/js/actions/ParliamentActions/getLatestCommonsDivisions.js

@@ -1,7 +1,7 @@
 import {latestCommonsDivisions} from '../../services/Parliament';
 import AtomsApi from '../../services/AtomsApi';
 import {logError} from '../../util/logger';
-import {PropTypes} from 'react';
+import {PropTypes} from 'prop-types';
 import {atomPropType} from '../../constants/atomPropType';
 
 const MPPropType = PropTypes.shape({

public/js/components/AppMessage/AppMessage.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 
 export default class AppMessage extends React.Component {
 

public/js/components/AtomCreate/AtomCreateExternalApp.js

@@ -21,7 +21,7 @@ class AtomCreateExternalApp extends React.Component {
           Due to the complexity of this atom, it cannot be created from within the Atom Workshop directly.
         </div>
         <div className="center">
-          <a className="atom-editor__external" target="_blank" href={getCreateUrlFromAtomType(this.props.atomType)}>Open Dedicated Editor</a>
+          <a className="atom-editor__external" target="_blank" rel="noreferrer" href={getCreateUrlFromAtomType(this.props.atomType)}>Open Dedicated Editor</a>
         </div>
       </div>
     );

public/js/components/AtomCreate/AtomCreateGenericInfo.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {Link} from 'react-router';
 import {getAtomByType, isAtomTypeEditable} from '../../constants/atomData';
 import {AtomTypeCard} from '../AtomTypeCard/AtomTypeCard.js';

public/js/components/AtomEdit/AtomEdit.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {CTAEditor} from './CustomEditors/CTAEditor';
 import {RecipeEditor} from './CustomEditors/RecipeEditor';
 import {QAndAEditor} from './CustomEditors/QAndAEditor';
@@ -40,7 +41,7 @@ class AtomEdit extends React.Component {
     })
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     subscribeToPresence(this.props.routeParams.atomType, this.props.routeParams.id);
   }
 

public/js/components/AtomEdit/AtomEditHeader.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {atomPropType} from '../../constants/atomPropType.js';
 import {allAtomTypes} from '../../constants/atomData.js';
 

public/js/components/AtomEdit/CustomEditors/AudioEditor.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {atomPropType} from '../../../constants/atomPropType';
 import AutomaticDataFetch from "./AudioFields/AutomaticDataFetch";
 

public/js/components/AtomEdit/CustomEditors/AudioFields/AutomaticDataFetch.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {ManualDataInput} from "./ManualDataInput";
 
 //REDUX CONNECTIONS

public/js/components/AtomEdit/CustomEditors/AudioFields/ManualDataInput.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {ManagedForm, ManagedField} from '../../../ManagedEditor';
 import FormFieldTextInput from '../../../FormFields/FormFieldTextInput';
 import FormFieldNumericInput from '../../../FormFields/FormFieldNumericInput';

public/js/components/AtomEdit/CustomEditors/CTAEditor.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 
 import {ManagedForm, ManagedField} from '../../ManagedEditor';
 import FormFieldTextInput from '../../FormFields/FormFieldTextInput';

public/js/components/AtomEdit/CustomEditors/ChartEditor.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import Modal from '../../Utilities/Modal';
 import {atomPropType} from '../../../constants/atomPropType';
 import {logInfo, logError} from '../../../util/logger';

public/js/components/AtomEdit/CustomEditors/CommonsDivisionEditor.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 
 import {ManagedForm, ManagedField} from '../../ManagedEditor';
 import FormFieldTextInput from '../../FormFields/FormFieldTextInput';

public/js/components/AtomEdit/CustomEditors/ExplainerEditor.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {ManagedForm, ManagedField} from '../../ManagedEditor';
 import FormFieldTextInput from '../../FormFields/FormFieldTextInput';
 import FormFieldsScribeEditor from '../../FormFields/FormFieldScribeEditor';

public/js/components/AtomEdit/CustomEditors/GuideEditor.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react";
+import React from "react";
+import {PropTypes} from "prop-types";
 import FormFieldImageSelect from "../../FormFields/FormFieldImageSelect";
 import FormFieldArrayWrapper from "../../FormFields/FormFieldArrayWrapper";
 import { GuideItem } from "./GuideFields/GuideItem";

public/js/components/AtomEdit/CustomEditors/GuideFields/GuideItem.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react";
+import React from "react";
+import {PropTypes} from "prop-types";
 import { ManagedForm, ManagedField } from "../../../ManagedEditor";
 import FormFieldTextInput from "../../../FormFields/FormFieldTextInput";
 import FormFieldsScribeEditor from "../../../FormFields/FormFieldScribeEditor";

public/js/components/AtomEdit/CustomEditors/ProfileEditor.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import FormFieldImageSelect from '../../FormFields/FormFieldImageSelect';
 import FormFieldArrayWrapper from '../../FormFields/FormFieldArrayWrapper';
 import { ProfileItem } from './ProfileFields/ProfileItem';

public/js/components/AtomEdit/CustomEditors/ProfileFields/ProfileItem.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import { ManagedForm, ManagedField } from '../../../ManagedEditor';
 import FormFieldTextInput from '../../../FormFields/FormFieldTextInput';
 import FormFieldsScribeEditor from '../../../FormFields/FormFieldScribeEditor';

public/js/components/AtomEdit/CustomEditors/QAndAEditor.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import FormFieldImageSelect from '../../FormFields/FormFieldImageSelect';
 import {QAItem} from './QAndAFields/QAItem';
 import {ManagedField, ManagedForm} from '../../ManagedEditor';

public/js/components/AtomEdit/CustomEditors/QAndAFields/QAItem.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react";
+import React from "react";
+import {PropTypes} from "prop-types";
 import { ManagedForm, ManagedField } from "../../../ManagedEditor";
 import FormFieldsScribeEditor from "../../../FormFields/FormFieldScribeEditor";
 import { wordLimits, tooLongMsg } from "../../../../util/wordLimits";

public/js/components/AtomEdit/CustomEditors/RecipeEditor.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 
 import {ManagedForm, ManagedField} from '../../ManagedEditor';
 import FormFieldNumericInput from '../../FormFields/FormFieldNumericInput';

public/js/components/AtomEdit/CustomEditors/RecipeFields/Ingredient.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {ManagedForm, ManagedField} from '../../../ManagedEditor';
 import FormFieldTextInput from '../../../FormFields/FormFieldTextInput';
 import FormFieldSelectBox from '../../../FormFields/FormFieldSelectBox';

public/js/components/AtomEdit/CustomEditors/RecipeFields/IngredientList.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {ManagedForm, ManagedField} from '../../../ManagedEditor';
 import {Ingredient} from './Ingredient';
 import FormFieldTextInput from '../../../FormFields/FormFieldTextInput';

public/js/components/AtomEdit/CustomEditors/RecipeFields/Servings.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 
 import FormFieldRadioButtons from '../../../FormFields/FormFieldRadioButtons';
 import FormFieldNumericInput from '../../../FormFields/FormFieldNumericInput';

public/js/components/AtomEdit/CustomEditors/TimelineEditor.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import FormFieldArrayWrapper from '../../FormFields/FormFieldArrayWrapper';
 import {TimelineItem} from './TimelineFields/TimelineItem';
 import {ManagedField, ManagedForm} from '../../ManagedEditor';

public/js/components/AtomEdit/CustomEditors/TimelineFields/TimelineItem.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import { ManagedForm, ManagedField } from '../../../ManagedEditor';
 import FormFieldTextInput from '../../../FormFields/FormFieldTextInput';
 import FormFieldsScribeEditor from '../../../FormFields/FormFieldScribeEditor';

public/js/components/AtomEdit/EmbeddedAtomPick.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {atomPropType} from '../../constants/atomPropType.js';
 
 class EmbeddedAtomPick extends React.Component {

public/js/components/AtomEmbed/AtomEmbed.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import { atomPropType } from '../../constants/atomPropType.js';
 import copy from 'copy-to-clipboard';
 import { Link } from 'react-router';

public/js/components/AtomEmbed/CreateTargetForm.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {createTarget} from '../../services/TargetingApi';
 
 import {ManagedForm, ManagedField} from '../ManagedEditor';
@@ -24,7 +25,7 @@ class CreateTargetForm extends React.Component {
   }
 
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
 
     if (!this.state.currentTarget.title) {
       this.setState({

public/js/components/AtomEmbed/CurrentTargets.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import { atomPropType } from '../../constants/atomPropType';
 import {
   fetchTargetsForAtomPath,

public/js/components/AtomList/AtomList.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import _isEqual from 'lodash/fp/isEqual';
 
 import {allAtomTypes} from '../../constants/atomData';
@@ -44,7 +45,7 @@ class AtomList extends React.Component {
     this.triggerSearch();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (!_isEqual(newProps.queryParams, this.props.queryParams)) {
       this.triggerSearch(Object.assign({}, searchParams, newProps.queryParams));
     }

public/js/components/AtomListItem/AtomListItem.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {atomPropType} from '../../constants/atomPropType.js';
 import {getTitleForAtom, isAtomWorkshopEditable} from '../../util/atomDataExtractors';
 import {getAtomByType} from '../../constants/atomData';

public/js/components/AtomRoot/AtomRoot.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import AtomEmbed from '../AtomEmbed/AtomEmbed';
 import {atomPropType} from '../../constants/atomPropType.js';
 
@@ -31,7 +32,7 @@ class AtomRoot extends React.Component {
   }
 
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.atomActions.getAtom(this.props.routeParams.atomType, this.props.routeParams.id)
     .then(() => {
       this.props.workflowActions.getWorkflowStatus(this.props.atom);

public/js/components/AtomStats/AtomStats.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {PropTypes} from 'prop-types';
 import {atomPropType} from '../../constants/atomPropType';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import {FrontendIcon, ComposerIcon, ViewerIcon} from '../../util/icons.js';
@@ -22,7 +23,7 @@ class AtomStats extends React.Component {
     }).isRequired
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.atomActions.getAtomUsages(this.props.routeParams.atomType, this.props.routeParams.id);
     this.props.atomActions.getSuggestedContent(this.props.routeParams.id, this.props.routeParams.atomType);
   }
@@ -40,13 +41,13 @@ class AtomStats extends React.Component {
           <div className="usages-list__links">
             <p className="usages-list__item__date">
               Created: {distanceInWordsToNow(usage.fields.creationDate, {addSuffix: true})}
-              <a className="usages-list__link" href={websiteLink} title="Open on theguardian.com" target="_blank">
+              <a className="usages-list__link" href={websiteLink} title="Open on theguardian.com" target="_blank" rel="noreferrer">
                 <FrontendIcon />
               </a>
-              <a className="usages-list__link" href={composerLink} title="Open in Composer" target="_blank">
+              <a className="usages-list__link" href={composerLink} title="Open in Composer" target="_blank" rel="noreferrer">
                 <ComposerIcon />
               </a>
-              <a className="usages-list__link" href={viewerLink} title="Open in Viewer" target="_blank">
+              <a className="usages-list__link" href={viewerLink} title="Open in Viewer" target="_blank" rel="noreferrer">
                 <ViewerIcon />
               </a></p>
           </div>