From 1f465aeeaac4c0ad1f728f378c9cbfa8dc220bf0 Mon Sep 17 00:00:00 2001
From: katrinan029 <katrinan@usc.edu>
Date: Wed, 18 Sep 2024 18:16:23 +0000
Subject: [PATCH] feat: refactored to remove duplicate api calls

---
 .../CustomerIntegrations.jsx                  |  3 +
 .../CustomerPlanContainer.jsx                 |  9 +-
 .../CustomerDetailView/CustomerViewCard.jsx   | 12 ++-
 .../EnterpriseCustomerUsersTable.jsx          | 95 +++++++++----------
 .../EnterpriseCustomerUsersTable.test.jsx     | 21 ----
 .../data/hooks/useCustomerUsersTableData.js   | 16 +---
 6 files changed, 61 insertions(+), 95 deletions(-)

diff --git a/src/Configuration/Customers/CustomerDetailView/CustomerIntegrations.jsx b/src/Configuration/Customers/CustomerDetailView/CustomerIntegrations.jsx
index c81ff8883..057b09d88 100644
--- a/src/Configuration/Customers/CustomerDetailView/CustomerIntegrations.jsx
+++ b/src/Configuration/Customers/CustomerDetailView/CustomerIntegrations.jsx
@@ -27,6 +27,7 @@ const CustomerIntegrations = ({
         <hr />
         {activeSSO && activeSSO.map((sso) => (
           <CustomerViewCard
+            key={sso.displayName}
             slug={slug}
             header="SSO"
             title={sso.displayName}
@@ -37,6 +38,7 @@ const CustomerIntegrations = ({
         ))}
         {activeIntegrations && activeIntegrations.map((config) => (
           <CustomerViewCard
+            key={config.channelCode[0].toUpperCase()}
             slug={slug}
             header="Learning platform"
             title={config.channelCode[0].toUpperCase() + config.channelCode.substr(1).toLowerCase()}
@@ -47,6 +49,7 @@ const CustomerIntegrations = ({
         ))}
         {apiCredentialsEnabled && (
         <CustomerViewCard
+          key="api"
           slug={slug}
           header="Integration"
           title="API"
diff --git a/src/Configuration/Customers/CustomerDetailView/CustomerPlanContainer.jsx b/src/Configuration/Customers/CustomerDetailView/CustomerPlanContainer.jsx
index 4896796ed..cd8b4776d 100644
--- a/src/Configuration/Customers/CustomerDetailView/CustomerPlanContainer.jsx
+++ b/src/Configuration/Customers/CustomerDetailView/CustomerPlanContainer.jsx
@@ -13,6 +13,9 @@ const CustomerPlanContainer = ({
   isLoading,
 }) => {
   const [showInactive, setShowInactive] = useState(false);
+  const countOfActivePlans = activeSubscriptions.length + activePolicies.length;
+  const countOfInactivePlans = inactiveSubscriptions.length + inactivePolicies.length;
+  const countOfAllPlans = countOfActivePlans + countOfInactivePlans;
   useEffect(() => {
     if (!countOfActivePlans && countOfAllPlans) {
       setShowInactive(true);
@@ -31,10 +34,6 @@ const CustomerPlanContainer = ({
     <SubscriptionPlanCard key={subscription.uuid} isActive={false} slug={slug} subscription={subscription} />
   ));
 
-  const countOfActivePlans = activeSubscriptions.length + activePolicies.length;
-  const countOfInactivePlans = inactiveSubscriptions.length + inactivePolicies.length;
-  const countOfAllPlans = countOfActivePlans + countOfInactivePlans;
-
   return (
     <div>
       {!isLoading ? (
@@ -84,8 +83,6 @@ CustomerPlanContainer.propTypes = {
     expirationDate: PropTypes.string.isRequired,
     created: PropTypes.string.isRequired,
   })).isRequired,
-  countOfActivePlans: PropTypes.number.isRequired,
-  countOfAllPlans: PropTypes.number.isRequired,
   inactivePolicies: PropTypes.arrayOf(PropTypes.shape({
     uuid: PropTypes.string.isRequired,
     subsidyActiveDatetime: PropTypes.string.isRequired,
diff --git a/src/Configuration/Customers/CustomerDetailView/CustomerViewCard.jsx b/src/Configuration/Customers/CustomerDetailView/CustomerViewCard.jsx
index bbe316c23..8f12c7fbc 100644
--- a/src/Configuration/Customers/CustomerDetailView/CustomerViewCard.jsx
+++ b/src/Configuration/Customers/CustomerDetailView/CustomerViewCard.jsx
@@ -40,9 +40,15 @@ const CustomerViewCard = (
 CustomerViewCard.propTypes = {
   header: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
-  subtext: PropTypes.string.isRequired,
-  buttonText: PropTypes.string.isRequired,
-  buttonLink: PropTypes.string.isRequired,
+  subtext: PropTypes.string,
+  buttonText: PropTypes.string,
+  buttonLink: PropTypes.string,
+};
+
+CustomerViewCard.defaultProps = {
+  subtext: null,
+  buttonText: null,
+  buttonLink: null,
 };
 
 export default CustomerViewCard;
diff --git a/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUsersTable.jsx b/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUsersTable.jsx
index e3b310346..f36104186 100644
--- a/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUsersTable.jsx
+++ b/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUsersTable.jsx
@@ -9,60 +9,55 @@ const EnterpriseCustomerUsersTable = () => {
     isLoading,
     enterpriseUsersTableData,
     fetchEnterpriseUsersData,
-    showTable,
   } = useCustomerUsersTableData(id);
 
   return (
     <div>
-      {showTable ? (
-        <div>
-          <h2>Associated users {enterpriseUsersTableData.itemCount > 0
-            && <span>({enterpriseUsersTableData.itemCount})</span>}
-          </h2>
-          <hr />
-          <DataTable
-            isLoading={isLoading}
-            isExpandable
-            isPaginated
-            manualPagination
-            isFilterable
-            manualFilters
-            initialState={{
-              pageSize: 8,
-              pageIndex: 0,
-              sortBy: [],
-              filters: [],
-            }}
-            defaultColumnValues={{ Filter: TextFilter }}
-            fetchData={fetchEnterpriseUsersData}
-            data={enterpriseUsersTableData.results}
-            itemCount={enterpriseUsersTableData.itemCount}
-            pageCount={enterpriseUsersTableData.pageCount}
-            columns={[
-              {
-                id: 'details',
-                Header: 'User details',
-                accessor: 'details',
-                Cell: EnterpriseCustomerUserDetail,
-              },
-              {
-                id: 'administrator',
-                Header: 'Administrator',
-                accessor: 'administrator',
-                disableFilters: true,
-                Cell: AdministratorCell,
-              },
-              {
-                id: 'learner',
-                Header: 'Learner',
-                accessor: 'learner',
-                disableFilters: true,
-                Cell: LearnerCell,
-              },
-            ]}
-          />
-        </div>
-      ) : null}
+      <h2>Associated users {enterpriseUsersTableData.itemCount > 0
+        && <span>({enterpriseUsersTableData.itemCount})</span>}
+      </h2>
+      <hr />
+      <DataTable
+        isLoading={isLoading}
+        isExpandable
+        isPaginated
+        manualPagination
+        isFilterable
+        manualFilters
+        initialState={{
+          pageSize: 8,
+          pageIndex: 0,
+          sortBy: [],
+          filters: [],
+        }}
+        defaultColumnValues={{ Filter: TextFilter }}
+        fetchData={fetchEnterpriseUsersData}
+        data={enterpriseUsersTableData.results}
+        itemCount={enterpriseUsersTableData.itemCount}
+        pageCount={enterpriseUsersTableData.pageCount}
+        columns={[
+          {
+            id: 'details',
+            Header: 'User details',
+            accessor: 'details',
+            Cell: EnterpriseCustomerUserDetail,
+          },
+          {
+            id: 'administrator',
+            Header: 'Administrator',
+            accessor: 'administrator',
+            disableFilters: true,
+            Cell: AdministratorCell,
+          },
+          {
+            id: 'learner',
+            Header: 'Learner',
+            accessor: 'learner',
+            disableFilters: true,
+            Cell: LearnerCell,
+          },
+        ]}
+      />
     </div>
   );
 };
diff --git a/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUsersTable.test.jsx b/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUsersTable.test.jsx
index 4fde961e5..1848313a9 100644
--- a/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUsersTable.test.jsx
+++ b/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUsersTable.test.jsx
@@ -33,7 +33,6 @@ const mockData = {
     ],
   },
   fetchEnterpriseUsersData: mockFetchEnterpriseUsersData,
-  showTable: true,
 };
 
 jest.mock('../../data/hooks/useCustomerUsersTableData');
@@ -81,24 +80,4 @@ describe('EnterpriseCustomerUsersTable', () => {
       });
     });
   });
-
-  it('does not render user table section', () => {
-    const emptyResults = {
-      isLoading: false,
-      enterpriseUsersTableData: {
-        itemCount: 0,
-        pageCount: 1,
-        results: [],
-      },
-      fetchEnterpriseUsersData: mockFetchEnterpriseUsersData,
-    };
-    useCustomerUsersTableData.mockReturnValue(emptyResults);
-    render(
-      <IntlProvider locale="en">
-        <EnterpriseCustomerUsersTable />
-      </IntlProvider>,
-    );
-    expect(screen.queryByText('Search user details')).not.toBeInTheDocument();
-    expect(screen.queryByText('Associated users (0)')).not.toBeInTheDocument();
-  });
 });
diff --git a/src/Configuration/Customers/data/hooks/useCustomerUsersTableData.js b/src/Configuration/Customers/data/hooks/useCustomerUsersTableData.js
index e7e52efc4..ab673e938 100644
--- a/src/Configuration/Customers/data/hooks/useCustomerUsersTableData.js
+++ b/src/Configuration/Customers/data/hooks/useCustomerUsersTableData.js
@@ -1,5 +1,5 @@
 import {
-  useCallback, useMemo, useState, useEffect,
+  useCallback, useMemo, useState,
 } from 'react';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
 import { logError } from '@edx/frontend-platform/logging';
@@ -9,7 +9,6 @@ import LmsApiService from '../../../../data/services/EnterpriseApiService';
 
 const useCustomerUsersTableData = (enterpriseUuid) => {
   const [isLoading, setIsLoading] = useState(true);
-  const [showTable, setShowTable] = useState(false);
   const [enterpriseUsersTableData, setEnterpriseUsersTableData] = useState({
     itemCount: 0,
     pageCount: 0,
@@ -67,23 +66,10 @@ const useCustomerUsersTableData = (enterpriseUuid) => {
     [fetchEnterpriseUsersData],
   );
 
-  useEffect(() => {
-    const args = {
-      pageIndex: 0,
-      filters: [],
-      sortBy: [],
-    };
-    fetchEnterpriseUsersData(args);
-    if (enterpriseUsersTableData.itemCount) {
-      setShowTable(true);
-    }
-  }, [fetchEnterpriseUsersData, enterpriseUsersTableData.itemCount]);
-
   return {
     isLoading,
     enterpriseUsersTableData,
     fetchEnterpriseUsersData: debouncedFetchEnterpriseUsersData,
-    showTable,
   };
 };