Use the new GSFP hook for CWRP lifecycle hook, refs UIU-484.

- There is one lint issue which is still WIP according to jsx-eslint/eslint-plugin-react#1759
- ComponentWillUpdate is left as is

LoanActionsHistory.js

@@ -71,42 +71,44 @@ class LoanActionsHistory extends React.Component {
     },
   });
 
-  constructor(props) {
-    super(props);
-    this.connectedProxy = props.stripes.connect(LoanActionsHistoryProxy);
-    this.renew = this.renew.bind(this);
-    this.getContributorslist = this.getContributorslist.bind(this);
-    this.showContributors = this.showContributors.bind(this);
-    this.formatDateTime = this.props.stripes.formatDateTime;
-    this.hideNonRenewedLoansModal = this.hideNonRenewedLoansModal.bind(this);
-    this.showTitle = this.showTitle.bind(this);
-    this.state = {
-      loanActionCount: 0,
-      nonRenewedLoanItems: [],
-      nonRenewedLoansModalOpen: false
-    };
-  }
-
   // TODO: refactor after join is supported in stripes-connect
-  componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(nextProps, prevState) {
     const { loan, resources: { loanActions, userIds, users, loanActionsWithUser } } = nextProps;
 
     if (!loanActions.records.length ||
-      loanActions.records[0].id !== loan.id) return;
+      loanActions.records[0].id !== loan.id) return null;
     if (!userIds.query || userIds.loan.id !== loan.id) {
       const query = loanActions.records.map(r => {
         return `id==${r.metadata.updatedByUserId}`;
       }).join(' or ');
       this.props.mutator.userIds.replace({ query, loan });
     }
 
-    if (!users.records.length) return;
+    if (!users.records.length) return null;
 
     if (!loanActionsWithUser.records || loanActionsWithUser.loan.id !== loan.id
-      || this.state.loanActionCount !== loanActions.other.totalRecords) {
+      || prevState.loanActionCount !== loanActions.other.totalRecords) {
       this.joinLoanActionsWithUser(loanActions.records, users.records, loan);
-      this.setState({ loanActionCount: loanActions.other.totalRecords });
+      return ({ loanActionCount: loanActions.other.totalRecords });
     }
+
+    return null;
+  }
+
+  constructor(props) {
+    super(props);
+    this.connectedProxy = props.stripes.connect(LoanActionsHistoryProxy);
+    this.renew = this.renew.bind(this);
+    this.getContributorslist = this.getContributorslist.bind(this);
+    this.showContributors = this.showContributors.bind(this);
+    this.formatDateTime = this.props.stripes.formatDateTime;
+    this.hideNonRenewedLoansModal = this.hideNonRenewedLoansModal.bind(this);
+    this.showTitle = this.showTitle.bind(this);
+    this.state = {
+      loanActionCount: 0,
+      nonRenewedLoanItems: [],
+      nonRenewedLoansModalOpen: false
+    };
   }
 
   joinLoanActionsWithUser(loanActions, users, loan) {

ViewUser.js

@@ -174,10 +174,11 @@ class ViewUser extends React.Component {
       if (loansHistory.length) {
         const selectedLoan = find(loansHistory, { id: query.loan });
         if (selectedLoan) {
-          this.setState({ selectedLoan });
+          return ({ selectedLoan });
         }
       }
     }
+    return null;
   }
 
   onClickViewOpenLoans(e) {

withProxy.js

@@ -74,6 +74,14 @@ const withProxy = WrappedComponent =>
       }),
     );
 
+    static getDerivedStateFromProps() {
+      if (!this.props.stripes.hasPerm('proxiesfor.collection.get')) {
+        return null;
+      }
+
+      return null;
+    }
+
     constructor(props) {
       super(props);
       this.getProxies = this.getProxies.bind(this);
@@ -92,12 +100,8 @@ const withProxy = WrappedComponent =>
       this.loadProxies(userId);
     }
 
-    componentWillReceiveProps(nextProps) {
-      if (!this.props.stripes.hasPerm('proxiesfor.collection.get')) {
-        return;
-      }
-
-      const { match: { params: { id } } } = nextProps;
+    componentDidUpdate(prevProps) {
+      const { match: { params: { id } } } = prevProps;
 
       if (id !== this.props.match.params.id) {
         this.loadSponsors(id);