From 71ab70c6d5b9a0f2a9738f9274a65c92069e0312 Mon Sep 17 00:00:00 2001 From: Joseph Ryan IV Date: Sun, 16 Mar 2025 20:14:02 -0700 Subject: [PATCH 1/3] Refactor UNSAFE components UNSAFE_componentWillReceiveProps is a deprecated lifecycle method in React 16.3+ and has been removed in Strict Mode and React 18+ --- src/core/components/content-type.jsx | 46 ++++++++++++++-------- src/core/containers/OperationContainer.jsx | 12 +++--- 2 files changed, 35 insertions(+), 23 deletions(-) diff --git a/src/core/components/content-type.jsx b/src/core/components/content-type.jsx index 45b63a25907..17211eb22a2 100644 --- a/src/core/components/content-type.jsx +++ b/src/core/components/content-type.jsx @@ -6,7 +6,6 @@ import { fromJS } from "immutable" const noop = ()=>{} export default class ContentType extends React.Component { - static propTypes = { ariaControls: PropTypes.string, contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set, ImPropTypes.seq]), @@ -24,38 +23,51 @@ export default class ContentType extends React.Component { } componentDidMount() { - // Needed to populate the form, initially - if(this.props.contentTypes) { - this.props.onChange(this.props.contentTypes.first()) + // Populate the form initially + const { contentTypes, onChange } = this.props + if (contentTypes && contentTypes.size) { + onChange(contentTypes.first()) } } - UNSAFE_componentWillReceiveProps(nextProps) { - if(!nextProps.contentTypes || !nextProps.contentTypes.size) { + componentDidUpdate(prevProps) { + const { contentTypes, value, onChange } = this.props + + if (!contentTypes || !contentTypes.size) { return } - if(!nextProps.contentTypes.includes(nextProps.value)) { - nextProps.onChange(nextProps.contentTypes.first()) + if (contentTypes !== prevProps.contentTypes || !contentTypes.includes(value)) { + onChange(contentTypes.first()) } } - onChangeWrapper = e => this.props.onChange(e.target.value) + onChangeWrapper = (e) => this.props.onChange(e.target.value) render() { - let { ariaControls, ariaLabel, className, contentTypes, controlId, value } = this.props + const { ariaControls, ariaLabel, className, contentTypes, controlId, value } = this.props - if ( !contentTypes || !contentTypes.size ) + if (!contentTypes || !contentTypes.size) return null return ( -
- + {contentTypes.map((val) => ( + + )).toArray()}
) } -} + +} \ No newline at end of file diff --git a/src/core/containers/OperationContainer.jsx b/src/core/containers/OperationContainer.jsx index 6efd7dfc2fb..5802176b0d8 100644 --- a/src/core/containers/OperationContainer.jsx +++ b/src/core/containers/OperationContainer.jsx @@ -90,15 +90,15 @@ export default class OperationContainer extends PureComponent { } } - UNSAFE_componentWillReceiveProps(nextProps) { - const { response, isShown } = nextProps + componentDidUpdate(prevProps) { + const { response, isShown } = this.props const resolvedSubtree = this.getResolvedSubtree() - - if(response !== this.props.response) { + + if (response !== prevProps.response) { this.setState({ executeInProgress: false }) } - - if(isShown && resolvedSubtree === undefined) { + + if (isShown && resolvedSubtree === undefined && !prevProps.isShown) { this.requestResolvedSubtree() } } From 0181ac007ff536e618d4d76851cf1c429e42a429 Mon Sep 17 00:00:00 2001 From: Joseph Ryan IV Date: Sun, 16 Mar 2025 20:24:00 -0700 Subject: [PATCH 2/3] Fix reactDOM import error Fix reactDOM inmport error: Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client". --- src/core/plugins/view/root-injects.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/plugins/view/root-injects.jsx b/src/core/plugins/view/root-injects.jsx index 96a130d56fd..a833c4e6c7d 100644 --- a/src/core/plugins/view/root-injects.jsx +++ b/src/core/plugins/view/root-injects.jsx @@ -1,5 +1,5 @@ import React, { Component } from "react" -import ReactDOM from "react-dom" +import ReactDOM from "react-dom/client" import { compose } from "redux" import { connect, Provider } from "react-redux" import omit from "lodash/omit" From 2c68d82e9029e62116f2a641d7fa0f886920fc0f Mon Sep 17 00:00:00 2001 From: Joseph Ryan IV Date: Fri, 25 Apr 2025 15:08:26 -0700 Subject: [PATCH 3/3] Revert change Addressing the ReactDOM warning would lead to the loss of support for React 16 and 17, given that the client API was introduced in React 18 --- src/core/plugins/view/root-injects.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/plugins/view/root-injects.jsx b/src/core/plugins/view/root-injects.jsx index a833c4e6c7d..96a130d56fd 100644 --- a/src/core/plugins/view/root-injects.jsx +++ b/src/core/plugins/view/root-injects.jsx @@ -1,5 +1,5 @@ import React, { Component } from "react" -import ReactDOM from "react-dom/client" +import ReactDOM from "react-dom" import { compose } from "redux" import { connect, Provider } from "react-redux" import omit from "lodash/omit"