refactor: address Nico's comments

.env.development

@@ -20,3 +20,4 @@ ACCOUNT_PROFILE_URL='http://localhost:1995/u'
 MFE_CONFIG_API_URL='http://localhost:18000/api/mfe_config/v1'
 INSTITUTION_PORTAL_PATH=''
 COURSE_OPERATIONS_API_V2_BASE_URL='http://localhost:18000/pearson_course_operation/api/v2'
+COURSE_OPERATIONS_API_METRICS_BASE_URL='http://localhost:18000/pearson_course_operation/api/metrics'

src/features/Students/StudentsMetrics/index.jsx

@@ -8,17 +8,17 @@ import 'features/Students/StudentsMetrics/index.scss';
 
 const StudentsMetrics = () => {
   const dispatch = useDispatch();
-  const selectedInstitution = useSelector((state) => state.main.selectedInstitution);
-  const stateStudentsMetrics = useSelector((state) => state.students.studentsMetrics.data);
-  const stateClassesMetrics = useSelector((state) => state.students.classesMetrics.data);
+  const institution = useSelector((state) => state.main.selectedInstitution);
+  const studentsMetrics = useSelector((state) => state.students.studentsMetrics.data);
+  const classesMetrics = useSelector((state) => state.students.classesMetrics.data);
   const days = 100; // Temporal variable
 
   useEffect(() => {
-    if (Object.keys(selectedInstitution).length > 0) {
-      dispatch(fetchStudentsMetricsData(selectedInstitution.id, days));
-      dispatch(fetchClassesMetricsData(selectedInstitution.id, days));
+    if (Object.keys(institution).length > 0) {
+      dispatch(fetchStudentsMetricsData(institution.id, days));
+      dispatch(fetchClassesMetricsData(institution.id, days));
     }
-  }, [selectedInstitution, dispatch]);
+  }, [institution, dispatch]);
 
   return (
     <div className="container-cards d-flex flex-column">
@@ -45,15 +45,19 @@ const StudentsMetrics = () => {
             title="New students registered"
           />
           <Card.Section>
-            <div className="card-number">{stateStudentsMetrics.numberOfEnrollments}</div>
+            <p className="card-number">
+              {studentsMetrics.numberOfEnrollments ? studentsMetrics.numberOfEnrollments : '-'}
+            </p>
           </Card.Section>
         </Card>
         <Card className="card-green">
           <Card.Header
             title="Classes scheduled"
           />
           <Card.Section>
-            <div className="card-number">{stateClassesMetrics.numberOfClassesCreated}</div>
+            <p className="card-number">
+              {classesMetrics.numberOfClassesCreated ? classesMetrics.numberOfClassesCreated : '-'}
+            </p>
           </Card.Section>
         </Card>
       </CardGrid>

src/features/Students/StudentsPage/_test_/index.test.jsx

@@ -45,8 +45,19 @@ const mockStore = {
       num_pages: 1,
       current_page: 1,
     },
-    metrics: {
-      data: [],
+    classesMetrics: {
+      data: [
+        {
+          numberOfClassesCreated: 10,
+        }
+      ],
+    },
+    studentsMetrics: {
+      data: [
+        {
+          numberOfEnrollments: 2,
+        }
+      ],
     },
     classes: {
       data: [],
@@ -75,6 +86,8 @@ describe('StudentsPage', () => {
       expect(component.container).toHaveTextContent('Instructor 2');
       expect(component.container).toHaveTextContent('active');
       expect(component.container).toHaveTextContent('pending');
+      expect(component.container).toHaveTextContent('10');
+      expect(component.container).toHaveTextContent('2');
     });
   });
 });