Merge pull request #34 from edx/schen/EDUCATOR-3754

Add hardcoded page size on frontend

src/components/Gradebook/gradebook.scss

@@ -1,3 +1,20 @@
+.spinner-overlay {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: #999;
+    opacity: 0.5;
+    z-index: 99999;
+    display:flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 200px;
+}
+
+.color-black {
+    color: black;
+}
+
 .gradebook-container{
     width: 500px;
     @media only screen and (min-width: 640px) {
@@ -10,6 +27,7 @@
         width: 1024px;
     }
 }
+
 .back-link{
     float:right;
 }

src/components/Gradebook/index.jsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { Button, InputSelect, Modal, SearchField, StatusAlert, Table } from '@edx/paragon';
+import {
+  Button,
+  InputSelect,
+  Modal,
+  SearchField,
+  StatusAlert,
+  Table,
+  Icon,
+} from '@edx/paragon';
 import queryString from 'query-string';
 import { configuration } from '../../config';
 
@@ -51,15 +59,20 @@ export default class Gradebook extends React.Component {
   }
 
   handleAdjustedGradeClick = () => {
-    this.props.updateGrades(this.props.match.params.courseId, [
-      {
-        user_id: this.state.updateUserId,
-        usage_id: this.state.updateModuleId,
-        grade: {
-          earned_graded_override: this.state.updateVal,
+    this.props.updateGrades(
+      this.props.match.params.courseId, [
+        {
+          user_id: this.state.updateUserId,
+          usage_id: this.state.updateModuleId,
+          grade: {
+            earned_graded_override: this.state.updateVal,
+          },
         },
-      },
-    ]);
+      ],
+      this.state.filterValue,
+      this.props.selectedCohort,
+      this.props.selectedTrack,
+    );
 
     this.setState({
       modalModel: [{}],
@@ -205,6 +218,7 @@ export default class Gradebook extends React.Component {
   render() {
     return (
       <div className="d-flex justify-content-center">
+        { this.props.showSpinner && <div className="spinner-overlay"><Icon className={['fa', 'fa-spinner', 'fa-spin', 'fa-5x', 'color-black']} /></div>}
         <div className="card gradebook-container">
           <div className="card-body">
             <a

src/containers/GradebookPage/index.jsx

@@ -26,7 +26,8 @@ const mapStateToProps = state => (
     showSuccess: state.grades.showSuccess,
     prevPage: state.grades.prevPage,
     nextPage: state.grades.nextPage,
-    assignmnetTypes: state.assignmentTypes.results || [],
+    assignmnetTypes: state.assignmentTypes.results,
+    showSpinner: state.grades.showSpinner,
   }
 );
 
@@ -50,8 +51,8 @@ const mapDispatchToProps = dispatch => (
     getAssignmentTypes: (courseId) => {
       dispatch(fetchAssignmentTypes(courseId));
     },
-    updateGrades: (courseId, updateData) => {
-      dispatch(updateGrades(courseId, updateData));
+    updateGrades: (courseId, updateData, searchText, cohort, track) => {
+      dispatch(updateGrades(courseId, updateData, searchText, cohort, track));
     },
     toggleFormat: (formatType) => {
       dispatch(toggleGradeFormat(formatType));

src/data/actions/grades.js

@@ -132,14 +132,14 @@ const fetchPrevNextGrades = (endpoint, cohort, track) => (
 );
 
 
-const updateGrades = (courseId, updateData) => (
+const updateGrades = (courseId, updateData, searchText, cohort, track) => (
   (dispatch) => {
     dispatch(gradeUpdateRequest());
     return LmsApiService.updateGradebookData(courseId, updateData)
       .then(response => response.data)
       .then((data) => {
         dispatch(gradeUpdateSuccess(data));
-        dispatch(fetchGrades(courseId, null, null, true));
+        dispatch(fetchMatchingUserGrades(courseId, searchText, cohort, track));
       })
       .catch((error) => {
         dispatch(gradeUpdateFailure(error));

src/data/reducers/grades.js

@@ -19,6 +19,7 @@ const initialState = {
   showSuccess: false,
   prevPage: null,
   nextPage: null,
+  showSpinner: true,
 };
 
 const grades = (state = initialState, action) => {
@@ -34,12 +35,14 @@ const grades = (state = initialState, action) => {
         selectedCohort: action.cohort,
         prevPage: action.prev,
         nextPage: action.next,
+        showSpinner: false,
       };
     case STARTED_FETCHING_GRADES:
       return {
         ...state,
         startedFetching: true,
         finishedFetching: false,
+        showSpinner: true,
       };
     case ERROR_FETCHING_GRADES:
       return {

src/data/services/LmsApiService.js

@@ -3,12 +3,12 @@ import { configuration } from '../../config';
 
 class LmsApiService {
   static baseUrl = configuration.LMS_BASE_URL;
+  static pageSize = 10
 
   static fetchGradebookData(courseId, searchText, cohort, track) {
     let gradebookUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/`;
-    if (searchText || track || cohort) {
-      gradebookUrl += '?';
-    }
+
+    gradebookUrl += `?page_size=${LmsApiService.pageSize}&`;
     if (searchText) {
       gradebookUrl += `username_contains=${searchText}&`;
     }