refactor: stop using unsafe or deprecated React methods (#1542)

packages/netlify-cms-backend-test/src/AuthenticationPage.js

@@ -41,7 +41,7 @@ export default class AuthenticationPage extends React.Component {
     config: ImmutablePropTypes.map.isRequired,
   };
 
-  componentWillMount() {
+  componentDidMount() {
     /**
      * Allow login screen to be skipped for demo purposes.
      */

packages/netlify-cms-core/src/components/Collection/Entries/EntriesCollection.js

@@ -31,10 +31,10 @@ class EntriesCollection extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
     const { collection, loadEntries } = this.props;
-    if (nextProps.collection !== collection) {
+    if (collection !== prevProps.collection) {
-      loadEntries(nextProps.collection);
+      loadEntries(collection);
     }
   }
 

packages/netlify-cms-core/src/components/Collection/Entries/EntriesSearch.js

@@ -27,10 +27,10 @@ class EntriesSearch extends React.Component {
     searchEntries(searchTerm);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
-    if (this.props.searchTerm === nextProps.searchTerm) return;
+    if (prevProps.searchTerm === this.props.searchTerm) return;
-    const { searchEntries } = this.props;
+    const { searchEntries } = prevProps;
-    searchEntries(nextProps.searchTerm);
+    searchEntries(this.props.searchTerm);
   }
 
   componentWillUnmount() {

packages/netlify-cms-core/src/components/Collection/Entries/EntryListing.js

@@ -46,7 +46,7 @@ export default class EntryListing extends React.Component {
     const { collections, entries, publicFolder, viewStyle } = this.props;
     const inferedFields = this.inferFields(collections);
     const entryCardProps = { collection: collections, inferedFields, publicFolder, viewStyle };
-    return entries.map((entry, idx) => <EntryCard {...{ ...entryCardProps, entry, key: idx }} />);
+    return entries.map((entry, idx) => <EntryCard {...entryCardProps} entry={entry} key={idx} />);
   };
 
   renderCardsForMultipleCollections = () => {
@@ -56,8 +56,8 @@ export default class EntryListing extends React.Component {
       const collection = collections.find(coll => coll.get('name') === collectionName);
       const collectionLabel = collection.get('label');
       const inferedFields = this.inferFields(collection);
-      const entryCardProps = { collection, entry, inferedFields, publicFolder, key: idx, collectionLabel };
+      const entryCardProps = { collection, entry, inferedFields, publicFolder, collectionLabel };
-      return <EntryCard {...entryCardProps} />;
+      return <EntryCard {...entryCardProps} key={idx} />;
     });
   };
 

packages/netlify-cms-core/src/components/Editor/Editor.js

@@ -133,20 +133,20 @@ class Editor extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
     /**
      * If the old slug is empty and the new slug is not, a new entry was just
      * saved, and we need to update navigation to the correct url using the
      * slug.
      */
-    const newSlug = nextProps.entryDraft && nextProps.entryDraft.getIn(['entry', 'slug']);
+    const newSlug = this.props.entryDraft && this.props.entryDraft.getIn(['entry', 'slug']);
-    if (!this.props.slug && newSlug && nextProps.newEntry) {
+    if (!prevProps.slug && newSlug && this.props.newEntry) {
-      navigateToEntry(this.props.collection.get('name'), newSlug);
+      navigateToEntry(prevProps.collection.get('name'), newSlug);
-      nextProps.loadEntry(nextProps.collection, newSlug);
+      this.props.loadEntry(this.props.collection, newSlug);
     }
 
-    if (this.props.entry === nextProps.entry) return;
+    if (prevProps.entry === this.props.entry) return;
-    const { entry, newEntry, fields, collection } = nextProps;
+    const { entry, newEntry, fields, collection } = this.props;
 
     if (entry && !entry.get('isFetching') && !entry.get('error')) {
 
@@ -156,10 +156,10 @@ class Editor extends React.Component {
        */
       const values = deserializeValues(entry.get('data'), fields);
       const deserializedEntry = entry.set('data', values);
-      const fieldsMetaData = nextProps.entryDraft && nextProps.entryDraft.get('fieldsMetaData');
+      const fieldsMetaData = this.props.entryDraft && this.props.entryDraft.get('fieldsMetaData');
       this.createDraft(deserializedEntry, fieldsMetaData);
     } else if (newEntry) {
-      this.props.createEmptyDraft(collection);
+      prevProps.createEmptyDraft(collection);
     }
   }
 

packages/netlify-cms-core/src/components/Editor/EditorScrollSync/ScrollSyncPane.js

@@ -29,14 +29,14 @@ export default class ScrollSyncPane extends Component {
   };
 
   componentDidMount() {
-    this.node = this.props.attachTo || ReactDOM.findDOMNode(this)
+    this.node = this.props.attachTo || ReactDOM.findDOMNode(this) // eslint-disable-line react/no-find-dom-node
     this.context.registerPane(this.node, this.props.group)
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
-    if (this.props.group !== nextProps.group) {
+    if (prevProps.group !== this.props.group) {
-      this.context.unregisterPane(this.node, this.props.group)
+      this.context.unregisterPane(this.node, prevProps.group)
-      this.context.registerPane(this.node, nextProps.group)
+      this.context.registerPane(this.node, this.props.group)
     }
   }
 

packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js

@@ -34,7 +34,7 @@ class MediaLibrary extends React.Component {
     this.props.loadMedia();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     /**
      * We clear old state from the media library when it's being re-opened
      * because, when doing so on close, the state is cleared while the media
@@ -44,9 +44,13 @@ class MediaLibrary extends React.Component {
     if (isOpening) {
       this.setState({ selectedFile: {}, query: '' });
     }
+  }
 
-    if (isOpening && (this.props.privateUpload !== nextProps.privateUpload)) {
+  componentDidUpdate(prevProps) {
-      this.props.loadMedia({ privateUpload: nextProps.privateUpload });
+    const isOpening = !prevProps.isVisible && this.props.isVisible;
+
+    if (isOpening && (prevProps.privateUpload !== this.props.privateUpload)) {
+      this.props.loadMedia({ privateUpload: this.props.privateUpload });
     }
   }
 

packages/netlify-cms-widget-file/src/withFileControl.js

@@ -91,8 +91,8 @@ export default function withFileControl({ forImage } = {}) {
       return false;
     }
 
-    componentWillReceiveProps(nextProps) {
+    componentDidUpdate() {
-      const { mediaPaths, value, onRemoveInsertedMedia, onChange } = nextProps;
+      const { mediaPaths, value, onRemoveInsertedMedia, onChange } = this.props;
       const mediaPath = mediaPaths.get(this.controlID);
       if (mediaPath && mediaPath !== value) {
         onChange(mediaPath);

packages/netlify-cms-widget-list/src/ListControl.js

@@ -90,8 +90,17 @@ export default class ListControl extends React.Component {
       itemsCollapsed: List(itemsCollapsed),
       value: valueToString(value),
     };
+  }
 
-    this.valueType = null;
+  getValueType = () => {
+    const { field } = this.props;
+    if (field.get('fields')) {
+      return valueTypes.MULTIPLE;
+    } else if (field.get('field')) {
+      return valueTypes.SINGLE;
+    } else {
+      return null;
+    }
   }
 
   /**
@@ -104,26 +113,6 @@ export default class ListControl extends React.Component {
     return true;
   }
 
-  componentDidMount() {
-    const { field } = this.props;
-
-    if (field.get('fields')) {
-      this.valueType = valueTypes.MULTIPLE;
-    } else if (field.get('field')) {
-      this.valueType = valueTypes.SINGLE;
-    }
-  }
-
-  componentWillUpdate(nextProps) {
-    if (this.props.field === nextProps.field) return;
-
-    if (nextProps.field.get('fields')) {
-      this.valueType = valueTypes.MULTIPLE;
-    } else if (nextProps.field.get('field')) {
-      this.valueType = valueTypes.SINGLE;
-    }
-  }
-
   handleChange = (e) => {
     const { onChange } = this.props;
     const oldValue = this.state.value;
@@ -151,7 +140,7 @@ export default class ListControl extends React.Component {
   handleAdd = (e) => {
     e.preventDefault();
     const { value, onChange } = this.props;
-    const parsedValue = (this.valueType === valueTypes.SINGLE) ? null : Map();
+    const parsedValue = (this.getValueType() === valueTypes.SINGLE) ? null : Map();
     this.setState({ itemsCollapsed: this.state.itemsCollapsed.push(false) });
     onChange((value || List()).push(parsedValue));
   }
@@ -168,7 +157,7 @@ export default class ListControl extends React.Component {
       const { value, metadata, onChange, field } = this.props;
       const collectionName = field.get('name');
       const newObjectValue = this.getObjectValue(index).set(fieldName, newValue);
-      const parsedValue = (this.valueType === valueTypes.SINGLE) ? newObjectValue.first() : newObjectValue;
+      const parsedValue = (this.getValueType() === valueTypes.SINGLE) ? newObjectValue.first() : newObjectValue;
       const parsedMetadata = {
         [collectionName]: Object.assign(metadata ? metadata.toJS() : {}, newMetadata ? newMetadata[collectionName] : {}),
       };

packages/netlify-cms-widget-relation/src/RelationControl.js

@@ -82,14 +82,17 @@ export default class RelationControl extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
+    /**
+     * Load extra post data into the store after first query.
+     */
     if (this.didInitialSearch) return;
-    if (nextProps.queryHits !== this.props.queryHits && nextProps.queryHits.get && nextProps.queryHits.get(this.controlID)) {
+    if (this.props.queryHits !== prevProps.queryHits && this.props.queryHits.get && this.props.queryHits.get(this.controlID)) {
       this.didInitialSearch = true;
-      const suggestion = nextProps.queryHits.get(this.controlID);
+      const suggestion = this.props.queryHits.get(this.controlID);
       if (suggestion && suggestion.length === 1) {
         const val = this.getSuggestionValue(suggestion[0]);
-        this.props.onChange(val, { [nextProps.field.get('collection')]: { [val]: suggestion[0].data } });
+        this.props.onChange(val, { [this.props.field.get('collection')]: { [val]: suggestion[0].data } });
       }
     }
   }