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

This commit is contained in:
Caleb
2018-07-31 14:59:22 -06:00
committed by Shawn Erquhart
parent 95c744ee3e
commit d5f59de2d2
10 changed files with 53 additions and 57 deletions

View File

@ -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);
}
}

View File

@ -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() {

View File

@ -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 };
return <EntryCard {...entryCardProps} />;
const entryCardProps = { collection, entry, inferedFields, publicFolder, collectionLabel };
return <EntryCard {...entryCardProps} key={idx} />;
});
};

View File

@ -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);
}
}

View File

@ -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)
}
}

View File

@ -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 });
}
}