Bump React to version 16.14.0

package.json

@@ -19,16 +19,18 @@
     "moment": "^2.29.4",
     "panda-session": "0.1.6",
     "phantomjs-prebuilt": "^2.1.14",
+    "prop-types": "^15.8.1",
     "q": "1.4.1",
     "ramda": "^0.18.0",
-    "react": "^15.3.0",
-    "react-addons-css-transition-group": "^15.3.0",
-    "react-dom": "^15.3.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-dropzone": "^3.0",
     "react-redux": "^5.1.0",
-    "react-router": "^2.6.1",
-    "react-tooltip": "^1.1.2",
-    "react-widgets": "^3.1.0",
+    "react-router": "^3.2.6",
+    "react-tooltip": "^4.5.1",
+    "react-transition-group": "^1.2.1",
+    "react-widgets": "^4.6.1",
+    "react-widgets-moment": "4.0.30",
     "redux": "^4.0.5",
     "redux-logger": "^2.0.4",
     "redux-thunk": "^1.0.0",

public/components/BatchTag.react.js

@@ -28,7 +28,7 @@ export class BatchTag extends React.Component {
       }
     }
 
-    componentWillUpdate(newProps, newState) {
+    UNSAFE_componentWillUpdate(newProps, newState) {
       const prevCount = this.state.selectedContent.length;
       const newCount = newState.selectedContent.length;
       if (prevCount === 0 && newCount > 0) {
@@ -42,7 +42,7 @@ export class BatchTag extends React.Component {
       }
     }
 
-    componentWillUnmount() {
+    UNSAFE_componentWillUnmount() {
       window.onbeforeunload = null;
     }
 

public/components/BatchTag/BatchFilters.react.js

@@ -7,7 +7,7 @@ import SectionSelect from '../utils/SectionSelect.react';
 
 import DateTimePicker from 'react-widgets/lib/DateTimePicker';
 import DateTimePickerCSS from 'react-widgets/dist/css/react-widgets.css';
-import momentLocalizer from 'react-widgets/lib/localizers/moment';
+import momentLocalizer from 'react-widgets-moment';
 momentLocalizer(moment);
 
 const CAPI_DATE_FORMAT = 'YYYY-MM-DD';

public/components/BatchTagControls/BatchTagControls.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import TagSelect from '../utils/TagSelect';
 import tagManagerApi from '../../util/tagManagerApi';
 import { browserHistory } from 'react-router'
@@ -173,14 +173,14 @@ export default class BatchTagControls extends React.Component {
 
       const {toAddToTop, toAddToBottom, toRemove} = this.state;
       return (
-        <ReactCSSTransitionGroup transitionName="batch-status-transition" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
+        <CSSTransitionGroup transitionName="batch-status-transition" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
           <div className="batch-status__container">
             <div className="batch-status">
               {this.renderMode()}
             </div>
             {toAddToTop.length + toAddToBottom.length + toRemove.length > 0 ? this.renderBasket() : false}
           </div>
-        </ReactCSSTransitionGroup>
+        </CSSTransitionGroup>
       );
     }
 }

public/components/JobStatus/JobStatus.react.js

@@ -19,7 +19,7 @@ export default class JobStatus extends React.Component {
     this.jobCheck = setInterval(this.fetchJobs.bind(this), 5000);
   }
 
-  componentWillUnmount() {
+  UNSAFE_componentWillUnmount() {
     clearInterval(this.jobCheck);
   }
 

public/components/Pillar/PillarList.react.js

@@ -14,7 +14,7 @@ class PillarList extends React.Component {
         browserHistory.push(path);
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         if (!this.props.pillars || !this.props.pillars.length) {
             this.props.pillarActions.getPillars();
         }

public/components/Pillar/PillarSections/PillarSectionsList.react.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class PillarSectionsList extends React.Component {
     renderFinalRow() {
@@ -31,6 +32,6 @@ export default class PillarSectionsList extends React.Component {
 }
 
 PillarSectionsList.propTypes = {
-    title: React.PropTypes.string.isRequired,
-    actionButton: React.PropTypes.node
+    title: PropTypes.string.isRequired,
+    actionButton: PropTypes.node
 }

public/components/SectionEdit/SectionName.react.js

@@ -18,7 +18,7 @@ export default class SectionNameEdit extends React.Component {
     this.state = inferLockStateFromProps(props);
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     this.setState(inferLockStateFromProps(props));
   }
 

public/components/SectionList/SectionList.react.js

@@ -14,7 +14,7 @@ class SectionList extends React.Component {
       browserHistory.push(path);
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
       if (!this.props.sections || !this.props.sections.length) {
         this.props.sectionActions.getSections();
       }

public/components/SponsorshipEdit/TargetingEdit.react.js

@@ -3,7 +3,7 @@ import R from 'ramda';
 import moment from 'moment';
 
 import DateTimePicker from 'react-widgets/lib/DateTimePicker';
-import momentLocalizer from 'react-widgets/lib/localizers/moment';
+import momentLocalizer from 'react-widgets-moment';
 
 import {allowedEditions} from '../../constants/allowedEditions';
 import SectionSelect from '../utils/SectionSelect.react';

public/components/SponsorshipEdit/ValidityEdit.react.js

@@ -2,7 +2,7 @@ import React from 'react';
 import moment from 'moment';
 
 import DateTimePicker from 'react-widgets/lib/DateTimePicker';
-import momentLocalizer from 'react-widgets/lib/localizers/moment';
+import momentLocalizer from 'react-widgets-moment';
 
 momentLocalizer(moment);
 

public/components/Status.react.js

@@ -31,7 +31,7 @@ class Status extends React.Component {
       this.jobCheck = setInterval(this.fetchJobs.bind(this), 15000);
     }
 
-    componentWillUnmount() {
+    UNSAFE_componentWillUnmount() {
       clearInterval(this.jobCheck);
     }
 

public/components/Tag/Display.react.js

@@ -34,7 +34,7 @@ class TagDisplay extends React.Component {
       }
     }
 
-    componentWillReceiveProps(props) {
+    UNSAFE_componentWillReceiveProps(props) {
       if (props.tag.id !== parseInt(props.routeParams.tagId, 10)) {
         props.tagActions.getTag(parseInt(props.routeParams.tagId, 10));
       }

public/components/Tag/TagAudit.react.js

@@ -16,7 +16,7 @@ export default class TagAudit extends React.Component {
     this.fetchAudit();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if(this.props.saveState === 'SAVE_STATE_INPROGRESS' && nextProps.saveState === 'SAVE_STATE_CLEAN') { //I.E a save just completed
       this.fetchAudit();
     }

public/components/Tag/TagValidation.react.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
 export default class TagValidation extends React.Component {
 
@@ -23,9 +23,9 @@ export default class TagValidation extends React.Component {
     return (
       <div className="tag-validation">
         <div className="tag-validation__header">Validation</div>
-        <ReactCSSTransitionGroup transitionName="validation-transition" transitionEnter={false} transitionLeaveTimeout={500}>
+        <CSSTransitionGroup transitionName="validation-transition" transitionEnter={false} transitionLeaveTimeout={500}>
           {this.props.validations.map(this.renderValidationResult, this)}
-        </ReactCSSTransitionGroup>
+        </CSSTransitionGroup>
       </div>
     );
   }

public/components/TagContext/TagReferenceList.react.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 /**
  * Renders the table header and the passed content & action button for the
@@ -30,7 +31,7 @@ export default class TagReferenceList extends React.Component {
               <table className={"grid-table tag-references " + this.props.tableClassName}>
                 <thead className="tag-references__header">
                   <tr>
-                    {this.props.headers.map(h => <th>{h}</th>)}
+                    {this.props.headers.map((h, index) => <th key={index}>{h}</th>)}
                   </tr>
                 </thead>
                 <tbody className="tag-references__references">
@@ -44,7 +45,7 @@ export default class TagReferenceList extends React.Component {
 }
 
 TagReferenceList.propTypes = {
-    title: React.PropTypes.string.isRequired,
-    headers: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
-    actionButton: React.PropTypes.node
+    title: PropTypes.string.isRequired,
+    headers: PropTypes.arrayOf(PropTypes.string).isRequired,
+    actionButton: PropTypes.node
 }

public/components/TagContext/TagRelationship/TagRelationship.react.js

@@ -26,7 +26,7 @@ export default class TagRelationship extends React.Component {
       });
     }
 
-    componentWillReceiveProps(props) {
+    UNSAFE_componentWillReceiveProps(props) {
       props.tag.parents.forEach(parentId => {
         this.fetchTagInformation(parentId);
       });
@@ -70,20 +70,20 @@ export default class TagRelationship extends React.Component {
       }));
     }
 
-    renderTag(tagId) {
+    renderTag(tagId, index) {
 
       const tag = this.state.cachedTags[tagId];
 
       if (!tag) {
           return (
-            <tr>
-              <td colspan="3">Fetching tag #{tagId}</td>
+            <tr key={index}>
+              <td colSpan="3">Fetching tag #{tagId}</td>
             </tr>
         )
       }
 
       return (
-         <tr>
+         <tr key={index}>
            <td><Link to={`/tag/${tag.id}`}>{tag.internalName}</Link></td>
            <td>{tag.type}</td>
            <td onClick={this.removeParentTag.bind(this, tag)}><i className="i-delete clickable-icon" /></td>
@@ -122,7 +122,7 @@ export default class TagRelationship extends React.Component {
                 </tr>
               </thead>
               <tbody className="tag-references__references">
-                {this.props.tag.parents.map(this.renderTag)}
+                {this.props.tag.parents.map((tag, index) => this.renderTag(tag, index))}
                 <tr>
                   <td colSpan="3" className="tag-references__addrow">
                     {this.renderAddTagToContext()}

public/components/TagEdit/formComponents/TagName.react.js

@@ -21,7 +21,7 @@ export default class TagNameEdit extends React.Component {
     this.getPathPrefixForSection = this.getPathPrefixForSection.bind(this);
   }
 
-  componentWillReceiveProps(props) {
+  UNSFE_componentWillReceiveProps(props) {
     this.setState(inferLockStateFromProps(props));
   }
 

public/components/utils/ReactScribe.react.js

@@ -23,7 +23,7 @@ export default class ReactScribe extends React.Component {
     }
   }
 
-  componentWillUnmount() {
+  UNSAFE_componentWillUnmount() {
     if (!this.props.disabled) {
       this.scribe.off('content-changed', this.onContentChange);
     }

public/components/utils/SaveButton.react.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import {saveState} from "../../reducers/rootReducer"
 import ProgressSpinner from "../utils/ProgressSpinner.react"
 
@@ -41,9 +41,9 @@ export default class SaveButton extends React.Component {
 
     render () {
       return (
-        <ReactCSSTransitionGroup transitionName="save-transition" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
+        <CSSTransitionGroup transitionName="save-transition" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
           {this.renderButtons()}
-        </ReactCSSTransitionGroup>
+        </CSSTransitionGroup>
       );
     }
 }