Rename unsafe React lifecycle methods (codesandbox#2159)

skovy · CompuIves · commit a3852efc177b · 2019-07-15T15:15:18.000+02:00
diff --git a/packages/app/src/app/components/CodeEditor/FuzzySearch/index.js b/packages/app/src/app/components/CodeEditor/FuzzySearch/index.js
@@ -23,7 +23,7 @@ export default class FuzzySearch extends React.PureComponent {
   // This is a precached map of paths to module
   paths = {};
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { modules, directories } = this.props;
     const modulePathData = modules.map(m => {
       const path = getModulePath(modules, directories, m.id);
diff --git a/packages/app/src/app/components/CodeEditor/MonacoDiff/index.js b/packages/app/src/app/components/CodeEditor/MonacoDiff/index.js
@@ -29,7 +29,7 @@ export default class MonacoDiff extends React.Component<Props>
     this.settings = props.settings;
   }
 
-  componentWillUpdate(nextProps: Props) {
+  UNSAFE_componentWillUpdate(nextProps: Props) {
     if (
       this.props.originalCode !== nextProps.originalCode ||
       this.props.modifiedCode !== nextProps.modifiedCode
diff --git a/packages/app/src/app/components/ModeIcons/index.js b/packages/app/src/app/components/ModeIcons/index.js
@@ -81,7 +81,7 @@ export default class ModeIcons extends React.PureComponent {
     }
   };
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { currentMode, otherModes } = getCurrentMode(nextProps);
 
     if (!this.state.hovering) {
diff --git a/packages/app/src/app/components/Preview/DevTools/Console/index.tsx b/packages/app/src/app/components/Preview/DevTools/Console/index.tsx
@@ -163,7 +163,7 @@ class Console extends React.Component<StyledProps> {
 
   list;
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.sandboxId !== this.props.sandboxId) {
       this.clearConsole(true);
     }
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/index.tsx
@@ -175,7 +175,7 @@ class Tests extends React.Component<DevToolProps, State> {
     }
   }
 
-  componentWillReceiveProps(nextProps: DevToolProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: DevToolProps) {
     if (nextProps.sandboxId !== this.props.sandboxId) {
       this.setState({
         files: {},
diff --git a/packages/app/src/app/components/SubscribeForm/CheckoutForm/index.tsx b/packages/app/src/app/components/SubscribeForm/CheckoutForm/index.tsx
@@ -43,7 +43,7 @@ class CheckoutForm extends React.PureComponent<Props, State> {
     loading: false,
   };
 
-  componentWillReceiveProps(nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (nextProps.name !== this.props.name) {
       this.setState({ errors: {}, name: nextProps.name });
     }
diff --git a/packages/app/src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems/AnimatedSandboxItem.js b/packages/app/src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems/AnimatedSandboxItem.js
@@ -20,7 +20,7 @@ type Props = {
 
 export default class AnimatedSandboxItem extends React.Component<Props> {
   state = { render: true };
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const sandboxBrotherItem = document.getElementById(this.props.id);
 
     if (sandboxBrotherItem) {
diff --git a/packages/app/src/app/pages/Dashboard/Content/SandboxCard/index.tsx b/packages/app/src/app/pages/Dashboard/Content/SandboxCard/index.tsx
@@ -120,7 +120,7 @@ class SandboxItem extends React.PureComponent<Props, State> {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.id !== this.props.id) {
       this.setState({ screenshotUrl: nextProps.screenshotUrl }, () => {
         this.checkScreenshot();
diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/Item/index.js b/packages/app/src/app/pages/Dashboard/Sidebar/Item/index.js
@@ -31,7 +31,7 @@ export default class Item extends React.Component {
     this.setState(state => ({ open: !state.open }));
   };
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.openByDefault === true && !this.props.openByDefault) {
       this.setState({ open: true });
     }
diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/index.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/index.tsx
@@ -82,7 +82,7 @@ class FolderEntry extends React.Component<Props, State> {
     depth: 0,
   };
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (
       (this.state.open == null || this.state.open === false) &&
       nextProps.open === true
diff --git a/packages/app/src/app/pages/Live/index.js b/packages/app/src/app/pages/Live/index.js
@@ -20,7 +20,7 @@ import BlinkingDot from './BlinkingDot';
 class LivePage extends React.Component {
   loggedIn = this.props.store.hasLogIn;
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.initializeLive();
   }
 
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.js
@@ -70,7 +70,7 @@ export default class VersionEntry extends React.PureComponent {
       });
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { dependencies, dependency } = this.props;
     const client = algoliasearch(
       'OFCNCOG2CU',
diff --git a/packages/app/src/app/pages/Sandbox/index.js b/packages/app/src/app/pages/Sandbox/index.js
@@ -17,7 +17,7 @@ import GithubIntegration from 'app/src/app/pages/common/GithubIntegration';
 import Editor from './Editor';
 
 class SandboxPage extends React.Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (window.screen.availWidth < 800) {
       if (!document.location.search.includes('from-embed')) {
         const addedSign = document.location.search ? '&' : '?';
diff --git a/packages/app/src/app/pages/common/Modals/ForkServerModal/index.js b/packages/app/src/app/pages/common/Modals/ForkServerModal/index.js
@@ -6,7 +6,7 @@ import SignInButton from 'app/pages/common/SignInButton';
 import { Container, Heading, Explanation } from '../elements';
 
 class ForkServerModal extends React.Component {
-  componentWillUpdate() {
+  UNSAFE_componentWillUpdate() {
     // Which means that the user signed in in the meantime with the intention to
     // fork
     if (this.props.store.loggedIn) {
diff --git a/packages/app/src/embed/components/App/index.js b/packages/app/src/embed/components/App/index.js
@@ -181,7 +181,7 @@ export default class App extends React.PureComponent<
     }
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (window.__SANDBOX_DATA__) {
       this.setState({ sandbox: camelizeKeys(window.__SANDBOX_DATA__) });
     } else {
diff --git a/packages/app/src/embed/components/Content/index.tsx b/packages/app/src/embed/components/Content/index.tsx
@@ -163,7 +163,7 @@ export default class Content extends React.PureComponent<Props, State> {
   editor?: Editor;
   preview?: BasePreview;
 
-  componentWillReceiveProps(nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (this.props.currentModule !== nextProps.currentModule) {
       if (!this.state.tabs.some(x => x.id === nextProps.currentModule.id)) {
         const module = nextProps.sandbox.modules.find(
diff --git a/packages/common/src/components/ContributorsBadge/index.tsx b/packages/common/src/components/ContributorsBadge/index.tsx
@@ -28,7 +28,7 @@ export default class ContributorsBadge extends React.Component<Props, State> {
     this.updateContributorStatus();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.updateContributorStatus(nextProps);
   }
 
diff --git a/packages/common/src/components/Preview/index.tsx b/packages/common/src/components/Preview/index.tsx
@@ -114,7 +114,7 @@ class BasePreview extends React.Component<Props, State> {
     }, 800);
   }
 
-  componentWillUpdate(nextProps: Props, nextState: State) {
+  UNSAFE_componentWillUpdate(nextProps: Props, nextState: State) {
     if (
       nextState.frameInitialized !== this.state.frameInitialized &&
       nextState.frameInitialized
diff --git a/packages/homepage/src/screens/explore/SandboxModal.js b/packages/homepage/src/screens/explore/SandboxModal.js
@@ -112,7 +112,7 @@ export default class SandboxModal extends React.PureComponent {
     }
   };
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.sandboxId !== this.props.sandboxId) {
       this.setState({
         sandbox: undefined,
diff --git a/packages/homepage/src/screens/home/Animation/Cubes.js b/packages/homepage/src/screens/home/Animation/Cubes.js
@@ -135,7 +135,7 @@ export default class Cubes extends React.Component {
     }
   };
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const nextTemplate = nextProps.template;
     const { templates } = this.state;
     const currentTemplate =
diff --git a/packages/react-embed/src/SandboxEmbed/SandboxEmbed.tsx b/packages/react-embed/src/SandboxEmbed/SandboxEmbed.tsx
@@ -202,7 +202,7 @@ export default class SandboxEmbed extends React.PureComponent<Props> {
     }
   };
 
-  componentWillUpdate(nextProps) {
+  UNSAFE_componentWillUpdate(nextProps) {
     if (nextProps.sandboxOptions !== this.props.sandboxOptions) {
       // This will help smoothen the transition between two sandboxes
 

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ export default class MonacoDiff extends React.Component<Props>`
`29`	`29`	`this.settings = props.settings;`
`30`	`30`	`}`
`31`	`31`
`32`		`- componentWillUpdate(nextProps: Props) {`
	`32`	`+ UNSAFE_componentWillUpdate(nextProps: Props) {`
`33`	`33`	`if (`
`34`	`34`	`this.props.originalCode !== nextProps.originalCode \|\|`
`35`	`35`	`this.props.modifiedCode !== nextProps.modifiedCode`
Original file line number	Diff line number	Diff line change
`@@ -81,7 +81,7 @@ export default class ModeIcons extends React.PureComponent {`
`81`	`81`	`}`
`82`	`82`	`};`
`83`	`83`
`84`		`- componentWillReceiveProps(nextProps) {`
	`84`	`+ UNSAFE_componentWillReceiveProps(nextProps) {`
`85`	`85`	`const { currentMode, otherModes } = getCurrentMode(nextProps);`
`86`	`86`
`87`	`87`	`if (!this.state.hovering) {`
Original file line number	Diff line number	Diff line change
`@@ -163,7 +163,7 @@ class Console extends React.Component<StyledProps> {`
`163`	`163`
`164`	`164`	`list;`
`165`	`165`
`166`		`- componentWillReceiveProps(nextProps) {`
	`166`	`+ UNSAFE_componentWillReceiveProps(nextProps) {`
`167`	`167`	`if (nextProps.sandboxId !== this.props.sandboxId) {`
`168`	`168`	`this.clearConsole(true);`
`169`	`169`	`}`
Original file line number	Diff line number	Diff line change
`@@ -175,7 +175,7 @@ class Tests extends React.Component<DevToolProps, State> {`
`175`	`175`	`}`
`176`	`176`	`}`
`177`	`177`
`178`		`- componentWillReceiveProps(nextProps: DevToolProps) {`
	`178`	`+ UNSAFE_componentWillReceiveProps(nextProps: DevToolProps) {`
`179`	`179`	`if (nextProps.sandboxId !== this.props.sandboxId) {`
`180`	`180`	`this.setState({`
`181`	`181`	`files: {},`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ class CheckoutForm extends React.PureComponent<Props, State> {`
`43`	`43`	`loading: false,`
`44`	`44`	`};`
`45`	`45`
`46`		`- componentWillReceiveProps(nextProps: Props) {`
	`46`	`+ UNSAFE_componentWillReceiveProps(nextProps: Props) {`
`47`	`47`	`if (nextProps.name !== this.props.name) {`
`48`	`48`	`this.setState({ errors: {}, name: nextProps.name });`
`49`	`49`	`}`
Original file line number	Diff line number	Diff line change
`@@ -120,7 +120,7 @@ class SandboxItem extends React.PureComponent<Props, State> {`
`120`	`120`	`}`
`121`	`121`	`}`
`122`	`122`
`123`		`- componentWillReceiveProps(nextProps) {`
	`123`	`+ UNSAFE_componentWillReceiveProps(nextProps) {`
`124`	`124`	`if (nextProps.id !== this.props.id) {`
`125`	`125`	`this.setState({ screenshotUrl: nextProps.screenshotUrl }, () => {`
`126`	`126`	`this.checkScreenshot();`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ export default class Item extends React.Component {`
`31`	`31`	`this.setState(state => ({ open: !state.open }));`
`32`	`32`	`};`
`33`	`33`
`34`		`- componentWillReceiveProps(nextProps) {`
	`34`	`+ UNSAFE_componentWillReceiveProps(nextProps) {`
`35`	`35`	`if (nextProps.openByDefault === true && !this.props.openByDefault) {`
`36`	`36`	`this.setState({ open: true });`
`37`	`37`	`}`