From d5f59de2d25cca65712f8c7d1fcd3baab413d2af Mon Sep 17 00:00:00 2001 From: Caleb Date: Tue, 31 Jul 2018 14:59:22 -0600 Subject: [PATCH] refactor: stop using unsafe or deprecated React methods (#1542) --- .../src/AuthenticationPage.js | 2 +- .../Collection/Entries/EntriesCollection.js | 6 ++-- .../Collection/Entries/EntriesSearch.js | 8 ++--- .../Collection/Entries/EntryListing.js | 6 ++-- .../src/components/Editor/Editor.js | 18 +++++----- .../Editor/EditorScrollSync/ScrollSyncPane.js | 10 +++--- .../components/MediaLibrary/MediaLibrary.js | 10 ++++-- .../src/withFileControl.js | 4 +-- .../src/ListControl.js | 35 +++++++------------ .../src/RelationControl.js | 11 +++--- 10 files changed, 53 insertions(+), 57 deletions(-) diff --git a/packages/netlify-cms-backend-test/src/AuthenticationPage.js b/packages/netlify-cms-backend-test/src/AuthenticationPage.js index 07f8c944..7f97dab7 100644 --- a/packages/netlify-cms-backend-test/src/AuthenticationPage.js +++ b/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. */ diff --git a/packages/netlify-cms-core/src/components/Collection/Entries/EntriesCollection.js b/packages/netlify-cms-core/src/components/Collection/Entries/EntriesCollection.js index b7003f48..38b649d5 100644 --- a/packages/netlify-cms-core/src/components/Collection/Entries/EntriesCollection.js +++ b/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) { - loadEntries(nextProps.collection); + if (collection !== prevProps.collection) { + loadEntries(collection); } } diff --git a/packages/netlify-cms-core/src/components/Collection/Entries/EntriesSearch.js b/packages/netlify-cms-core/src/components/Collection/Entries/EntriesSearch.js index 33dd740e..d3cb5d81 100644 --- a/packages/netlify-cms-core/src/components/Collection/Entries/EntriesSearch.js +++ b/packages/netlify-cms-core/src/components/Collection/Entries/EntriesSearch.js @@ -27,10 +27,10 @@ class EntriesSearch extends React.Component { searchEntries(searchTerm); } - componentWillReceiveProps(nextProps) { - if (this.props.searchTerm === nextProps.searchTerm) return; - const { searchEntries } = this.props; - searchEntries(nextProps.searchTerm); + componentDidUpdate(prevProps) { + if (prevProps.searchTerm === this.props.searchTerm) return; + const { searchEntries } = prevProps; + searchEntries(this.props.searchTerm); } componentWillUnmount() { diff --git a/packages/netlify-cms-core/src/components/Collection/Entries/EntryListing.js b/packages/netlify-cms-core/src/components/Collection/Entries/EntryListing.js index 2febe8df..9eed15f1 100644 --- a/packages/netlify-cms-core/src/components/Collection/Entries/EntryListing.js +++ b/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) => ); + return entries.map((entry, 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 }; - return ; + const entryCardProps = { collection, entry, inferedFields, publicFolder, collectionLabel }; + return ; }); }; diff --git a/packages/netlify-cms-core/src/components/Editor/Editor.js b/packages/netlify-cms-core/src/components/Editor/Editor.js index 20ccb739..2c7cd7b4 100644 --- a/packages/netlify-cms-core/src/components/Editor/Editor.js +++ b/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']); - if (!this.props.slug && newSlug && nextProps.newEntry) { - navigateToEntry(this.props.collection.get('name'), newSlug); - nextProps.loadEntry(nextProps.collection, newSlug); + const newSlug = this.props.entryDraft && this.props.entryDraft.getIn(['entry', 'slug']); + if (!prevProps.slug && newSlug && this.props.newEntry) { + navigateToEntry(prevProps.collection.get('name'), newSlug); + this.props.loadEntry(this.props.collection, newSlug); } - if (this.props.entry === nextProps.entry) return; - const { entry, newEntry, fields, collection } = nextProps; + if (prevProps.entry === this.props.entry) return; + 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); } } diff --git a/packages/netlify-cms-core/src/components/Editor/EditorScrollSync/ScrollSyncPane.js b/packages/netlify-cms-core/src/components/Editor/EditorScrollSync/ScrollSyncPane.js index b3a22c5f..2b813beb 100644 --- a/packages/netlify-cms-core/src/components/Editor/EditorScrollSync/ScrollSyncPane.js +++ b/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) { - if (this.props.group !== nextProps.group) { - this.context.unregisterPane(this.node, this.props.group) - this.context.registerPane(this.node, nextProps.group) + componentDidUpdate(prevProps) { + if (prevProps.group !== this.props.group) { + this.context.unregisterPane(this.node, prevProps.group) + this.context.registerPane(this.node, this.props.group) } } diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js index be77032b..266d31cf 100644 --- a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js +++ b/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)) { - this.props.loadMedia({ privateUpload: nextProps.privateUpload }); + componentDidUpdate(prevProps) { + const isOpening = !prevProps.isVisible && this.props.isVisible; + + if (isOpening && (prevProps.privateUpload !== this.props.privateUpload)) { + this.props.loadMedia({ privateUpload: this.props.privateUpload }); } } diff --git a/packages/netlify-cms-widget-file/src/withFileControl.js b/packages/netlify-cms-widget-file/src/withFileControl.js index 91455f47..de3cd0a0 100644 --- a/packages/netlify-cms-widget-file/src/withFileControl.js +++ b/packages/netlify-cms-widget-file/src/withFileControl.js @@ -91,8 +91,8 @@ export default function withFileControl({ forImage } = {}) { return false; } - componentWillReceiveProps(nextProps) { - const { mediaPaths, value, onRemoveInsertedMedia, onChange } = nextProps; + componentDidUpdate() { + const { mediaPaths, value, onRemoveInsertedMedia, onChange } = this.props; const mediaPath = mediaPaths.get(this.controlID); if (mediaPath && mediaPath !== value) { onChange(mediaPath); diff --git a/packages/netlify-cms-widget-list/src/ListControl.js b/packages/netlify-cms-widget-list/src/ListControl.js index bf86dbd0..ee46db02 100644 --- a/packages/netlify-cms-widget-list/src/ListControl.js +++ b/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] : {}), }; diff --git a/packages/netlify-cms-widget-relation/src/RelationControl.js b/packages/netlify-cms-widget-relation/src/RelationControl.js index 2e7c75e9..55026b2a 100644 --- a/packages/netlify-cms-widget-relation/src/RelationControl.js +++ b/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 } }); } } }