Merge pull request #132 from edx/azan/PROD-2394

refactor: self-contain license component

src/users/UserPage.jsx

@@ -167,8 +167,7 @@ export default function UserPage({ location }) {
             changeHandler={handleUserSummaryChange}
           />
           <Licenses
-            data={data.licenses.results}
-            status={data.licenses.status}
+            userEmail={data.user.email}
             expanded={showLicenses}
           />
           <Entitlements

src/users/data/api.js

@@ -225,7 +225,6 @@ export async function getAllUserData(userIdentifier) {
   let enrollments = [];
   let verificationStatus = null;
   let ssoRecords = null;
-  let licenses = [];
   let onboardingStatus = {};
   try {
     user = await getUser(userIdentifier);
@@ -242,7 +241,6 @@ export async function getAllUserData(userIdentifier) {
     verificationStatus = await getUserVerificationStatus(user.username);
     ssoRecords = await getSsoRecords(user.username);
     user.passwordStatus = await getUserPasswordStatus(user.username);
-    licenses = await getLicense(user.email);
     onboardingStatus = await getOnboardingStatus(enrollments, user.username);
   }
 
@@ -253,7 +251,6 @@ export async function getAllUserData(userIdentifier) {
     enrollments,
     verificationStatus,
     ssoRecords,
-    licenses,
     onboardingStatus,
   };
 }

src/users/data/api.test.js

@@ -354,7 +354,6 @@ describe('API', () => {
       mockAdapter.onGet(verificationDetailsApiUrl).reply(200, {});
       mockAdapter.onGet(verificationStatusApiUrl).reply(200, {});
       mockAdapter.onGet(passwordStatusApiUrl).reply(200, {});
-      mockAdapter.onPost(licensesApiUrl, { user_email: testEmail }).reply(200, []);
       mockAdapter.onGet(onboardingStatusApiUrl).reply(200, onboardingDefaultResponse);
 
       const response = await api.getAllUserData(testUsername);
@@ -365,7 +364,6 @@ describe('API', () => {
         verificationStatus: { extraData: {} },
         enrollments: [],
         entitlements: { results: [], next: null },
-        licenses: { results: [], status: '' },
         onboardingStatus: { ...onboardingDefaultResponse, onboardingStatus: 'No Paid Enrollment' },
       });
     });

src/users/data/test/licenses.js

@@ -1,5 +1,5 @@
 const licensesData = {
-  data: [
+  results: [
     {
       status: 'unassigned',
       assignedDate: null,
@@ -22,7 +22,6 @@ const licensesData = {
     },
   ],
   status: '',
-  expanded: true,
 };
 
 export default licensesData;

src/users/licenses/Licenses.jsx

@@ -2,23 +2,37 @@ import React, {
   useMemo,
   useState,
   useCallback,
+  useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
 import { Collapsible, Badge } from '@edx/paragon';
+import { camelCaseObject } from '@edx/frontend-platform';
 import Table from '../../Table';
 import { formatDate, sort } from '../../utils';
+import { getLicense } from '../data/api';
 
 export default function Licenses({
-  data, status, expanded,
+  userEmail, expanded,
 }) {
   const [sortColumn, setSortColumn] = useState('status');
   const [sortDirection, setSortDirection] = useState('desc');
+  const [licenses, setLicensesData] = useState([]);
+  const [status, setStatus] = useState('Loading...');
+
+  useEffect(() => {
+    getLicense(userEmail).then((data) => {
+      const camelCaseData = camelCaseObject(data);
+      setLicensesData(camelCaseData.results);
+      setStatus(camelCaseData.status);
+    });
+  }, [userEmail]);
+
   const responseStatus = useMemo(() => status, [status]);
   const tableData = useMemo(() => {
-    if (data === null || data.length === 0) {
+    if (licenses === null || licenses.length === 0) {
       return [];
     }
-    return data.map(result => ({
+    return licenses.map(result => ({
       status: {
         value: result.status,
       },
@@ -50,7 +64,7 @@ export default function Licenses({
         value: result.activationLink,
       },
     }));
-  }, [data]);
+  }, [licenses]);
 
   const setSort = useCallback((column) => {
     if (sortColumn === column) {
@@ -122,22 +136,11 @@ export default function Licenses({
 }
 
 Licenses.propTypes = {
-  data: PropTypes.arrayOf(PropTypes.shape({
-    status: PropTypes.string,
-    assignedDate: PropTypes.string,
-    revokedDate: PropTypes.string,
-    activationDate: PropTypes.string,
-    subscriptionPlanTitle: PropTypes.string,
-    lastRemindDate: PropTypes.string,
-    activationLink: PropTypes.string,
-    subscriptionPlanExpirationDate: PropTypes.string,
-  })),
-  status: PropTypes.string,
+  userEmail: PropTypes.string,
   expanded: PropTypes.bool,
 };
 
 Licenses.defaultProps = {
-  data: null,
-  status: '',
+  userEmail: null,
   expanded: false,
 };

src/users/licenses/Licenses.test.jsx

@@ -1,6 +1,7 @@
 import { mount } from 'enzyme';
 import React from 'react';
-
+import { waitForComponentToPaint } from '../../setupTest';
+import * as api from '../data/api';
 import Licenses from './Licenses';
 import licensesData from '../data/test/licenses';
 import UserMessagesProvider from '../../userMessages/UserMessagesProvider';
@@ -13,23 +14,46 @@ const LicensesPageWrapper = (props) => (
 
 describe('User Licenses Listing', () => {
   let wrapper;
+  const props = {
+    userEmail: '[email protected]',
+    expanded: true,
+  };
 
-  beforeEach(() => {
-    wrapper = mount(<LicensesPageWrapper {...licensesData} />);
+  afterEach(() => {
+    wrapper.unmount();
   });
 
-  it('default collapsible with enrollment data', () => {
+  it('License Data Loading', async () => {
+    const licenseData = { ...licensesData, results: [], status: 'No record found' };
+    jest.spyOn(api, 'getLicense').mockImplementationOnce(() => Promise.resolve(licenseData));
+
+    wrapper = mount(<LicensesPageWrapper {...props} />);
     const collapsible = wrapper.find('CollapsibleAdvanced').find('.collapsible-trigger').hostNodes();
-    expect(collapsible.text()).toEqual('Licenses (2)');
+    expect(collapsible.text()).toEqual('Licenses (0)Fetch Status: Loading...');
   });
 
-  it('No License Data', () => {
-    const licenseData = { ...licensesData, data: [], status: 'No record found' };
-    wrapper = mount(<Licenses {...licenseData} />);
+  it('No License Data', async () => {
+    const licenseData = { ...licensesData, results: [], status: 'No record found' };
+    jest.spyOn(api, 'getLicense').mockImplementationOnce(() => Promise.resolve(licenseData));
+
+    wrapper = mount(<LicensesPageWrapper {...props} />);
+    await waitForComponentToPaint(wrapper);
+
     const collapsible = wrapper.find('CollapsibleAdvanced').find('.collapsible-trigger').hostNodes();
     expect(collapsible.text()).toEqual('Licenses (0)Fetch Status: No record found');
   });
 
+  beforeEach(async () => {
+    jest.spyOn(api, 'getLicense').mockImplementationOnce(() => Promise.resolve(licensesData));
+    wrapper = mount(<LicensesPageWrapper {...props} />);
+    await waitForComponentToPaint(wrapper);
+  });
+
+  it('default collapsible with enrollment data', () => {
+    const collapsible = wrapper.find('CollapsibleAdvanced').find('.collapsible-trigger').hostNodes();
+    expect(collapsible.text()).toEqual('Licenses (2)');
+  });
+
   it('Sorting Columns Button Enabled by default', () => {
     const dataTable = wrapper.find('table.table');
     const tableHeaders = dataTable.find('thead tr th');
@@ -56,6 +80,6 @@ describe('User Licenses Listing', () => {
   it('Table Header Lenght', () => {
     const dataTable = wrapper.find('table.table');
     const tableHeaders = dataTable.find('thead tr th');
-    expect(tableHeaders).toHaveLength(Object.keys(licensesData.data[0]).length);
+    expect(tableHeaders).toHaveLength(Object.keys(licensesData.results[0]).length);
   });
 });