refactor: prefix lifecycle methods with UNSAFE_

char0n · char0n · commit 1918b36b2a2c · 2021-08-12T08:57:56.000+02:00
Refs #7341
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/core/components/content-type.jsx b/src/core/components/content-type.jsx
@@ -30,7 +30,7 @@ export default class ContentType extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if(!nextProps.contentTypes || !nextProps.contentTypes.size) {
       return
     }
diff --git a/src/core/components/examples-select-value-retainer.jsx b/src/core/components/examples-select-value-retainer.jsx
@@ -117,7 +117,7 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {
   }
 
   _getValueForExample = (exampleKey, props) => {
-    // props are accepted so that this can be used in componentWillReceiveProps,
+    // props are accepted so that this can be used in UNSAFE_componentWillReceiveProps,
     // which has access to `nextProps`
     const { examples } = props || this.props
     return stringifyUnlessList(
@@ -126,7 +126,7 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {
   }
 
   _getCurrentExampleValue = props => {
-    // props are accepted so that this can be used in componentWillReceiveProps,
+    // props are accepted so that this can be used in UNSAFE_componentWillReceiveProps,
     // which has access to `nextProps`
     const { currentKey } = props || this.props
     return this._getValueForExample(currentKey, props || this.props)
@@ -169,7 +169,7 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     // update `lastUserEditedValue` as new currentUserInput values come in
 
     const {
diff --git a/src/core/components/examples-select.jsx b/src/core/components/examples-select.jsx
@@ -78,7 +78,7 @@ export default class ExamplesSelect extends React.PureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { currentExampleKey, examples } = nextProps
     if (examples !== this.props.examples && !examples.has(currentExampleKey)) {
       // examples have changed from under us, and the currentExampleKey is no longer
diff --git a/src/core/components/layout-utils.jsx b/src/core/components/layout-utils.jsx
@@ -181,7 +181,7 @@ export class Select extends React.Component {
     onChange && onChange(value)
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     // TODO: this puts us in a weird area btwn un/controlled selection... review
     if(nextProps.value !== this.props.value) {
       this.setState({ value: nextProps.value })
diff --git a/src/core/components/model-collapse.jsx b/src/core/components/model-collapse.jsx
@@ -48,7 +48,7 @@ export default class ModelCollapse extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps){
+  UNSAFE_componentWillReceiveProps(nextProps){
     if(this.props.expanded !== nextProps.expanded){
         this.setState({expanded: nextProps.expanded})
     }
diff --git a/src/core/components/model-example.jsx b/src/core/components/model-example.jsx
@@ -43,7 +43,7 @@ export default class ModelExample extends React.Component {
     })
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (
       nextProps.isExecute &&
       !this.props.isExecute &&
diff --git a/src/core/components/online-validator-badge.jsx b/src/core/components/online-validator-badge.jsx
@@ -30,7 +30,7 @@ export default class OnlineValidatorBadge extends React.Component {
       return urlObject.toString()
     }
 
-    componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
         let { getConfigs } = nextProps
         let { validatorUrl } = getConfigs()
 
@@ -91,7 +91,7 @@ class ValidatorImage extends React.Component {
     img.src = this.props.src
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.src !== this.props.src) {
       const img = new Image()
       img.onload = () => {
diff --git a/src/core/components/param-body.jsx b/src/core/components/param-body.jsx
@@ -43,7 +43,7 @@ export default class ParamBody extends PureComponent {
     this.updateValues.call(this, this.props)
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.updateValues.call(this, nextProps)
   }
 
@@ -140,11 +140,11 @@ export default class ParamBody extends PureComponent {
           }
           <label htmlFor="">
             <span>Parameter content type</span>
-            <ContentType 
-              value={ consumesValue } 
-              contentTypes={ consumes } 
-              onChange={onChangeConsumes} 
-              className="body-param-content-type" 
+            <ContentType
+              value={ consumesValue }
+              contentTypes={ consumes }
+              onChange={onChangeConsumes}
+              className="body-param-content-type"
               ariaLabel="Parameter content type" />
           </label>
         </div>
diff --git a/src/core/components/parameter-row.jsx b/src/core/components/parameter-row.jsx
@@ -30,7 +30,7 @@ export default class ParameterRow extends Component {
     this.setDefaultValue()
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     let { specSelectors, pathMethod, rawParam } = props
     let isOAS3 = specSelectors.isOAS3()
 
@@ -127,7 +127,7 @@ export default class ParameterRow extends Component {
           : (schema && schema.getIn(["default"]))
       } else if (specSelectors.isOAS3()) {
         const currentExampleKey = oas3Selectors.activeExamplesMember(...pathMethod, "parameters", this.getParamKey())
-        initialValue = 
+        initialValue =
           paramWithMeta.getIn(["examples", currentExampleKey, "value"]) !== undefined
           ? paramWithMeta.getIn(["examples", currentExampleKey, "value"])
           : paramWithMeta.getIn(["content", parameterMediaType, "example"]) !== undefined
diff --git a/src/core/components/schemes.jsx b/src/core/components/schemes.jsx
@@ -11,14 +11,14 @@ export default class Schemes extends React.Component {
     method: PropTypes.string,
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     let { schemes } = this.props
 
     //fire 'change' event to set default 'value' of select
     this.setScheme(schemes.first())
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if ( !this.props.currentScheme || !nextProps.schemes.includes(this.props.currentScheme) ) {
       // if we don't have a selected currentScheme or if our selected scheme is no longer an option,
       // then fire 'change' event and select the first scheme in the list of options
diff --git a/src/core/containers/OperationContainer.jsx b/src/core/containers/OperationContainer.jsx
@@ -91,7 +91,7 @@ export default class OperationContainer extends PureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { response, isShown } = nextProps
     const resolvedSubtree = this.getResolvedSubtree()
 
diff --git a/src/core/json-schema-components.jsx b/src/core/json-schema-components.jsx
@@ -130,7 +130,7 @@ export class JsonSchema_array extends PureComponent {
     this.state = { value: valueOrEmptyList(props.value), schema: props.schema}
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     const value = valueOrEmptyList(props.value)
     if(value !== this.state.value)
       this.setState({ value })
diff --git a/src/core/plugins/oas3/components/request-body-editor.jsx b/src/core/plugins/oas3/components/request-body-editor.jsx
@@ -55,7 +55,7 @@ export default class RequestBodyEditor extends PureComponent {
     }, () => this.onChange(inputValue))
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if(
       this.props.value !== nextProps.value &&
       nextProps.value !== this.state.value
diff --git a/src/core/plugins/oas3/components/servers.jsx b/src/core/plugins/oas3/components/servers.jsx
@@ -25,7 +25,7 @@ export default class Servers extends React.Component {
     this.setServer(servers.first().get("url"))
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let {
       servers,
       setServerVariableValue,
diff --git a/src/core/plugins/view/root-injects.jsx b/src/core/plugins/view/root-injects.jsx
@@ -50,7 +50,7 @@ export const makeMappedContainer = (getSystem, getStore, memGetComponent, getCom
       handleProps(getSystem, mapping, props, {})
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       handleProps(getSystem, mapping, nextProps, this.props)
     }
 
@@ -76,7 +76,7 @@ const createClass = component => class extends Component {
   }
 }
 
-const Fallback = ({ 
+const Fallback = ({
   name // eslint-disable-line react/prop-types
 }) => <div className="fallback">😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i></div>
 
diff --git a/src/plugins/topbar/topbar.jsx b/src/plugins/topbar/topbar.jsx
@@ -17,7 +17,7 @@ export default class Topbar extends React.Component {
     this.state = { url: props.specSelectors.url(), selectedIndex: 0 }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({ url: nextProps.specSelectors.url() })
   }
 
diff --git a/test/unit/components/schemes.jsx b/test/unit/components/schemes.jsx
@@ -61,7 +61,7 @@ describe("<Schemes/>", function(){
     expect(setSchemeSpy.mock.calls.length).toEqual(1)
 
     // After an update
-    wrapper.instance().componentWillReceiveProps(props)
+    wrapper.instance().UNSAFE_componentWillReceiveProps(props)
 
     // Should not be called again, since `currentScheme` is in schemes
     expect(setSchemeSpy.mock.calls.length).toEqual(1)

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ export default class ContentType extends React.Component {`
`30`	`30`	`}`
`31`	`31`	`}`
`32`	`32`
`33`		`- componentWillReceiveProps(nextProps) {`
	`33`	`+ UNSAFE_componentWillReceiveProps(nextProps) {`
`34`	`34`	`if(!nextProps.contentTypes \|\| !nextProps.contentTypes.size) {`
`35`	`35`	`return`
`36`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -117,7 +117,7 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {`
`117`	`117`	`}`
`118`	`118`
`119`	`119`	`_getValueForExample = (exampleKey, props) => {`
`120`		`- // props are accepted so that this can be used in componentWillReceiveProps,`
	`120`	`+ // props are accepted so that this can be used in UNSAFE_componentWillReceiveProps,`
`121`	`121`	// which has access to `nextProps`
`122`	`122`	`const { examples } = props \|\| this.props`
`123`	`123`	`return stringifyUnlessList(`
`@@ -126,7 +126,7 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {`
`126`	`126`	`}`
`127`	`127`
`128`	`128`	`_getCurrentExampleValue = props => {`
`129`		`- // props are accepted so that this can be used in componentWillReceiveProps,`
	`129`	`+ // props are accepted so that this can be used in UNSAFE_componentWillReceiveProps,`
`130`	`130`	// which has access to `nextProps`
`131`	`131`	`const { currentKey } = props \|\| this.props`
`132`	`132`	`return this._getValueForExample(currentKey, props \|\| this.props)`
`@@ -169,7 +169,7 @@ export default class ExamplesSelectValueRetainer extends React.PureComponent {`
`169`	`169`	`}`
`170`	`170`	`}`
`171`	`171`
`172`		`- componentWillReceiveProps(nextProps) {`
	`172`	`+ UNSAFE_componentWillReceiveProps(nextProps) {`
`173`	`173`	// update `lastUserEditedValue` as new currentUserInput values come in
`174`	`174`
`175`	`175`	`const {`
Original file line number	Diff line number	Diff line change
`@@ -78,7 +78,7 @@ export default class ExamplesSelect extends React.PureComponent {`
`78`	`78`	`}`
`79`	`79`	`}`
`80`	`80`
`81`		`- componentWillReceiveProps(nextProps) {`
	`81`	`+ UNSAFE_componentWillReceiveProps(nextProps) {`
`82`	`82`	`const { currentExampleKey, examples } = nextProps`
`83`	`83`	`if (examples !== this.props.examples && !examples.has(currentExampleKey)) {`
`84`	`84`	`// examples have changed from under us, and the currentExampleKey is no longer`
Original file line number	Diff line number	Diff line change
`@@ -181,7 +181,7 @@ export class Select extends React.Component {`
`181`	`181`	`onChange && onChange(value)`
`182`	`182`	`}`
`183`	`183`
`184`		`- componentWillReceiveProps(nextProps) {`
	`184`	`+ UNSAFE_componentWillReceiveProps(nextProps) {`
`185`	`185`	`// TODO: this puts us in a weird area btwn un/controlled selection... review`
`186`	`186`	`if(nextProps.value !== this.props.value) {`
`187`	`187`	`this.setState({ value: nextProps.value })`
Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@ export default class ModelCollapse extends Component {`
`48`	`48`	`}`
`49`	`49`	`}`
`50`	`50`
`51`		`- componentWillReceiveProps(nextProps){`
	`51`	`+ UNSAFE_componentWillReceiveProps(nextProps){`
`52`	`52`	`if(this.props.expanded !== nextProps.expanded){`
`53`	`53`	`this.setState({expanded: nextProps.expanded})`
`54`	`54`	`}`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ export default class ModelExample extends React.Component {`
`43`	`43`	`})`
`44`	`44`	`}`
`45`	`45`
`46`		`- componentWillReceiveProps(nextProps) {`
	`46`	`+ UNSAFE_componentWillReceiveProps(nextProps) {`
`47`	`47`	`if (`
`48`	`48`	`nextProps.isExecute &&`
`49`	`49`	`!this.props.isExecute &&`