feat: Integrate Metric services to component

Pearson-Advance · Mar 2, 2024 · eda0642 · eda0642
1 parent 3a4c215
commit eda0642
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 38 deletions.
diff --git a/src/features/Students/StudentsMetrics/index.jsx b/src/features/Students/StudentsMetrics/index.jsx
@@ -2,28 +2,34 @@ import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Card, CardGrid, ToggleButton } from '@edx/paragon';
 import { ToggleButtonGroup } from 'react-paragon-topaz';
-import { fetchMetricsData } from 'features/Students/data/thunks';
+import { fetchClassesMetricsData, fetchStudentsMetricsData } from 'features/Students/data/thunks';
 
 import 'features/Students/StudentsMetrics/index.scss';
 
 const StudentsMetrics = () => {
   const dispatch = useDispatch();
-  const stateMetrics = useSelector((state) => state.students.metrics.data);
+  const selectedInstitution = useSelector((state) => state.main.selectedInstitution);
+  const stateStudentsMetrics = useSelector((state) => state.students.studentsMetrics.data);
+  const stateClassesMetrics = useSelector((state) => state.students.classesMetrics.data);
+  const days = 100; // Temporal variable
 
   useEffect(() => {
-    dispatch(fetchMetricsData());
-  }, [dispatch]);
+    if (Object.keys(selectedInstitution).length > 0) {
+      dispatch(fetchStudentsMetricsData(selectedInstitution.id, days));
+      dispatch(fetchClassesMetricsData(selectedInstitution.id, days));
+    }
+  }, [selectedInstitution, dispatch]);
 
   return (
     <div className="container-cards d-flex flex-column">
       <ToggleButtonGroup type="radio" defaultValue={1} name="period">
-        <ToggleButton id="tbg-radio-1" value={1} variant="outline-primary">
+        <ToggleButton id="tbg-radio-1" value={1} variant="outline-primary" disabled>
           This week
         </ToggleButton>
-        <ToggleButton id="tbg-radio-2" value={2} variant="outline-primary">
+        <ToggleButton id="tbg-radio-2" value={2} variant="outline-primary" disabled>
           Next week
         </ToggleButton>
-        <ToggleButton id="tbg-radio-3" value={3} variant="outline-primary">
+        <ToggleButton id="tbg-radio-3" value={3} variant="outline-primary" disabled>
           Next month
         </ToggleButton>
       </ToggleButtonGroup>
@@ -39,15 +45,15 @@ const StudentsMetrics = () => {
             title="New students registered"
           />
           <Card.Section>
-            <div className="card-number">{stateMetrics.newStudentsRegistered}</div>
+            <div className="card-number">{stateStudentsMetrics.numberOfEnrollments}</div>
           </Card.Section>
         </Card>
         <Card className="card-green">
           <Card.Header
             title="Classes scheduled"
           />
           <Card.Section>
-            <div className="card-number">{stateMetrics.classesScheduled}</div>
+            <div className="card-number">{stateClassesMetrics.numberOfClassesCreated}</div>
           </Card.Section>
         </Card>
       </CardGrid>

diff --git a/src/features/Students/data/api.js b/src/features/Students/data/api.js
@@ -24,18 +24,33 @@ function handleEnrollments(data, courseId) {
   );
 }
 
-function getMetricsStudents() {
-  const metricsData = {
-    data: {
-      new_students_registered: '367',
-      classes_scheduled: '71%',
-    },
+function getStudentsMetrics(institutionId, days) {
+  const params = {
+    institution_id: institutionId,
+    days,
   };
-  return metricsData;
+
+  return getAuthenticatedHttpClient().get(
+    `${getConfig().COURSE_OPERATIONS_API_METRICS_BASE_URL}/students-number/`,
+    { params },
+  );
+}
+
+function getClassesMetrics(institutionId, days) {
+  const params = {
+    institution_id: institutionId,
+    days,
+  };
+
+  return getAuthenticatedHttpClient().get(
+    `${getConfig().COURSE_OPERATIONS_API_METRICS_BASE_URL}/classes-number/`,
+    { params },
+  );
 }
 
 export {
   getStudentbyInstitutionAdmin,
   handleEnrollments,
-  getMetricsStudents,
+  getStudentsMetrics,
+  getClassesMetrics,
 };
diff --git a/src/features/Students/data/slice.js b/src/features/Students/data/slice.js
@@ -17,7 +17,10 @@ const initialState = {
   classes: {
     ...initialStateService,
   },
-  metrics: {
+  classesMetrics: {
+    ...initialStateService,
+  },
+  studentsMetrics: {
     ...initialStateService,
   },
   filters: {},
@@ -66,15 +69,25 @@ export const studentsSlice = createSlice({
     fetchClassesDataFailed: (state) => {
       state.classes.status = RequestStatus.ERROR;
     },
-    fetchMetricsDataRequest: (state) => {
-      state.metrics.status = RequestStatus.LOADING;
+    fetchClassesMetricsDataRequest: (state) => {
+      state.classesMetrics.status = RequestStatus.LOADING;
+    },
+    fetchClassesMetricsDataSuccess: (state, { payload }) => {
+      state.classesMetrics.status = RequestStatus.SUCCESS;
+      state.classesMetrics.data = payload;
+    },
+    fetchClassesMetricsDataFailed: (state) => {
+      state.classesMetrics.status = RequestStatus.ERROR;
+    },
+    fetchStudentsMetricsDataRequest: (state) => {
+      state.studentsMetrics.status = RequestStatus.LOADING;
     },
-    fetchMetricsDataSuccess: (state, { payload }) => {
-      state.metrics.status = RequestStatus.SUCCESS;
-      state.metrics.data = payload;
+    fetchStudentsMetricsDataSuccess: (state, { payload }) => {
+      state.studentsMetrics.status = RequestStatus.SUCCESS;
+      state.studentsMetrics.data = payload;
     },
-    fetchMetricsDataFailed: (state) => {
-      state.metrics.status = RequestStatus.ERROR;
+    fetchStudentsMetricsDataFailed: (state) => {
+      state.studentsMetrics.status = RequestStatus.ERROR;
     },
   },
 });
@@ -91,9 +104,12 @@ export const {
   fetchClassesDataRequest,
   fetchClassesDataSuccess,
   fetchClassesDataFailed,
-  fetchMetricsDataRequest,
-  fetchMetricsDataSuccess,
-  fetchMetricsDataFailed,
+  fetchClassesMetricsDataRequest,
+  fetchClassesMetricsDataSuccess,
+  fetchClassesMetricsDataFailed,
+  fetchStudentsMetricsDataRequest,
+  fetchStudentsMetricsDataSuccess,
+  fetchStudentsMetricsDataFailed,
 } = studentsSlice.actions;
 
 export const { reducer } = studentsSlice;
diff --git a/src/features/Students/data/thunks.js b/src/features/Students/data/thunks.js
@@ -10,11 +10,18 @@ import {
   fetchClassesDataRequest,
   fetchClassesDataSuccess,
   fetchClassesDataFailed,
-  fetchMetricsDataRequest,
-  fetchMetricsDataSuccess,
-  fetchMetricsDataFailed,
+  fetchClassesMetricsDataRequest,
+  fetchClassesMetricsDataSuccess,
+  fetchClassesMetricsDataFailed,
+  fetchStudentsMetricsDataRequest,
+  fetchStudentsMetricsDataSuccess,
+  fetchStudentsMetricsDataFailed,
 } from 'features/Students/data/slice';
-import { getStudentbyInstitutionAdmin, getMetricsStudents } from 'features/Students/data/api';
+import {
+  getClassesMetrics,
+  getStudentsMetrics,
+  getStudentbyInstitutionAdmin,
+} from 'features/Students/data/api';
 import { getCoursesByInstitution, getClassesByInstitution } from 'features/Common/data/api';
 
 function fetchStudentsData(id, currentPage, filtersData) {
@@ -59,15 +66,29 @@ function fetchClassesData(id, courseName) {
   };
 }
 
-function fetchMetricsData() {
+function fetchClassesMetricsData(institutionId, days) {
+  return async (dispatch) => {
+    dispatch(fetchClassesMetricsDataRequest());
+
+    try {
+      const response = camelCaseObject(await getClassesMetrics(institutionId, days));
+      dispatch(fetchClassesMetricsDataSuccess(response.data));
+    } catch (error) {
+      dispatch(fetchClassesMetricsDataFailed());
+      logError(error);
+    }
+  };
+}
+
+function fetchStudentsMetricsData(institutionId, days) {
   return async (dispatch) => {
-    dispatch(fetchMetricsDataRequest());
+    dispatch(fetchStudentsMetricsDataRequest());
 
     try {
-      const response = camelCaseObject(await getMetricsStudents());
-      dispatch(fetchMetricsDataSuccess(response.data));
+      const response = camelCaseObject(await getStudentsMetrics(institutionId, days));
+      dispatch(fetchStudentsMetricsDataSuccess(response.data));
     } catch (error) {
-      dispatch(fetchMetricsDataFailed());
+      dispatch(fetchStudentsMetricsDataFailed());
       logError(error);
     }
   };
@@ -77,5 +98,6 @@ export {
   fetchStudentsData,
   fetchCoursesData,
   fetchClassesData,
-  fetchMetricsData,
+  fetchClassesMetricsData,
+  fetchStudentsMetricsData,
 };