SubscriptionsTable.js in katello-3.17.0.rc1

- old
+ new

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { cloneDeep, findIndex, isEqual } from 'lodash';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { LoadingState } from '../../../../move_to_pf/LoadingState';
+import { LoadingState } from '../../../../components/LoadingState';
 import { recordsValid } from '../../SubscriptionValidations';
 import { buildTableRows, groupSubscriptionsByProductId } from './SubscriptionsTableHelpers';
 import Table from './components/Table';
 import Dialogs from './components/Dialogs';
 
@@ -27,11 +27,14 @@
   static getDerivedStateFromProps(nextProps, prevState) {
     if (
       nextProps.subscriptions !== undefined &&
       !isEqual(nextProps.subscriptions, prevState.subscriptions)
     ) {
-      const groupedSubscriptions = groupSubscriptionsByProductId(nextProps.subscriptions);
+      const groupedSubscriptions = groupSubscriptionsByProductId(
+        nextProps.subscriptions,
+        prevState.groupedSubscriptions,
+      );
       const rows = buildTableRows(
         groupedSubscriptions,
         nextProps.subscriptions.availableQuantities,
         prevState.updatedQuantity,
       );
@@ -190,41 +193,44 @@
     deleteDialog: this.getDeleteDialogProps(),
   });
 
 
   toggleSubscriptionGroup = (groupId) => {
-    const { subscriptions } = this.props;
-    const { groupedSubscriptions, updatedQuantity } = this.state;
-    const { open } = groupedSubscriptions[groupId];
+    this.setState((prevState) => {
+      const { subscriptions } = this.props;
+      const { groupedSubscriptions, updatedQuantity } = prevState;
+      const { open } = groupedSubscriptions[groupId];
 
-    groupedSubscriptions[groupId].open = !open;
+      groupedSubscriptions[groupId].open = !open;
 
-    const rows = buildTableRows(
-      groupedSubscriptions,
-      subscriptions.availableQuantities,
-      updatedQuantity,
-    );
-
-    this.setState({ rows, groupedSubscriptions });
+      const rows = buildTableRows(
+        groupedSubscriptions,
+        subscriptions.availableQuantities,
+        updatedQuantity,
+      );
+      return { rows, groupedSubscriptions };
+    });
   };
 
   enableEditing = (editingState) => {
     this.setState({
       updatedQuantity: {},
       editing: editingState,
     });
   };
 
   updateRows = (updatedQuantity) => {
-    const { groupedSubscriptions } = this.state;
-    const { subscriptions } = this.props;
+    this.setState((prevState) => {
+      const { groupedSubscriptions } = prevState;
+      const { subscriptions } = this.props;
 
-    const rows = buildTableRows(
-      groupedSubscriptions,
-      subscriptions.availableQuantities,
-      updatedQuantity,
-    );
-    this.setState({ rows, updatedQuantity });
+      const rows = buildTableRows(
+        groupedSubscriptions,
+        subscriptions.availableQuantities,
+        updatedQuantity,
+      );
+      return { rows, updatedQuantity };
+    });
   };
 
   showUpdateConfirm = (show) => {
     this.setState({
       showUpdateConfirmDialog: show,