Rename React unsafe lifecycles methods

src/components/CreateCollectiveForm.js

@@ -80,7 +80,7 @@ class CreateCollectiveForm extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.collective && (!this.props.collective || get(nextProps, 'collective.name') != get(this.props, 'collective.name'))) {
       this.setState({ collective: nextProps.collective, tiers: nextProps.collective.tiers });
     }

src/components/CreateExpenseForm.js

@@ -97,7 +97,7 @@ class CreateExpenseForm extends React.Component {
     this.props.onChange && this.props.onChange(expense);
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (!this.props.LoggedInUser && newProps.LoggedInUser && !this.state.expense.paypalEmail) {
       this.handleChange('paypalEmail', newProps.LoggedInUser.paypalEmail);
     }

src/components/EditCollectiveForm.js

@@ -93,7 +93,7 @@ class EditCollectiveForm extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.collective && (!this.props.collective || nextProps.collective.name != this.props.collective.name)) {
       this.setState({ collective: nextProps.collective, tiers: nextProps.collective.tiers });
     }

src/components/EditEventForm.js

@@ -36,7 +36,7 @@ class EditEventForm extends React.Component {
 
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.event && (!this.props.event || nextProps.event.name != this.props.event.name)) {
       this.setState({ event: nextProps.event, tiers: nextProps.event.tiers });
     }

src/components/InputField.js

@@ -93,7 +93,7 @@ class InputField extends React.Component {
 
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value != this.props.value) {
       this.setState({value: nextProps.value});
     }

src/components/InputTypeCreditCard.js

@@ -55,7 +55,7 @@ class InputTypeCreditCard extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.options && nextProps.options.length > 0) {
       if (typeof this.state.uuid !== 'string') {
         this.handleChange("uuid", nextProps.options[0].uuid);

src/components/InputTypeLocation.js

@@ -19,7 +19,7 @@ class InputTypeLocation extends React.Component {
     this.state = { value: props.value || {} };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value != this.props.value) {
       this.setState({value: nextProps.value});
     }

src/components/MatchingFundWithData.js

@@ -25,7 +25,7 @@ class MatchingFundWithData extends React.Component {
   }
 
   // Whenever this.props.order.totalAmount changes, we update the status
-  async componentWillReceiveProps(newProps) {
+  async UNSAFE_componentWillReceiveProps(newProps) {
     const { data: { loading, MatchingFund }, collective, order, uuid } = newProps;
     if (loading) return;
 

src/components/OrderForm.js

@@ -168,7 +168,7 @@ class OrderForm extends React.Component {
 
   componentDidMount() {
     this._isMounted = true;
-    this.componentWillReceiveProps(this.props);
+    this.UNSAFE_componentWillReceiveProps(this.props);
   }
 
   populatePaymentMethodTypes() {
@@ -251,7 +251,7 @@ class OrderForm extends React.Component {
     return fromCollectiveOptions;
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     const { LoggedInUser } = props;
     if (!LoggedInUser) return;
     if (!this._isMounted) return; // Fixes error: Can only update a mounted or mounting component

src/components/PaymentMethodChooser.js

@@ -48,7 +48,7 @@ class PaymentMethodChooser extends React.Component {
     });
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     // TODO: Remove these hacky fixes
     // Most likely means need to rework the logic split between this and SubscriptionCard component
 

src/components/Subscriptions.js

@@ -25,7 +25,7 @@ class Subscriptions extends React.Component {
     })
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (!this.props.LoggedInUser && nextProps.LoggedInUser) {
       return this.props.refetch();
     }

src/components/TransactionsWithData.js

@@ -19,7 +19,7 @@ class TransactionsWithData extends React.Component {
     super(props);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (!this.props.LoggedInUser && nextProps.LoggedInUser) {
       return this.props.data.refetch();
     }

src/components/UpdatesWithData.js

@@ -26,7 +26,7 @@ class UpdatesWithData extends React.Component {
     }
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     const { data, collective } = this.props;
     const { LoggedInUser } = newProps;
     if (LoggedInUser && LoggedInUser.canEditCollective(collective)) {

src/pages/banner-iframe.js

@@ -31,7 +31,7 @@ class Banner extends React.Component {
     this.sendMessageToParentWindow();
   }
 
-  componentWillReceiveProps() {
+  UNSAFE_componentWillReceiveProps() {
     this.onChange();
   }
 

src/pages/createOrder.js

@@ -81,7 +81,7 @@ class CreateOrderPage extends React.Component {
     this.setState(newState);
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (this.state.matchingFund) return;
     const matchingFund = get(newProps, 'data.Collective.settings.matchingFund');
     if (matchingFund) {