feat: refactored to remove duplicate api calls

openedx · Sep 18, 2024 · 75ed8f9 · 75ed8f9
1 parent 34ebc58
commit 75ed8f9
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 75 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -33,7 +33,6 @@ const mockData = {
     ],
   },
   fetchEnterpriseUsersData: mockFetchEnterpriseUsersData,
-  showTable: true,
 };
 
 jest.mock('../../data/hooks/useCustomerUsersTableData');

diff --git 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,
   };
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,7 +33,6 @@ const mockData = { @@
         ],
       },
       fetchEnterpriseUsersData: mockFetchEnterpriseUsersData,
-      showTable: true,
     };
     jest.mock('../../data/hooks/useCustomerUsersTableData');
@@ Expand Down @@