Merge pull request #24 from edx/pagination

feat(pagination) added next and previous buttons to grades page

src/components/Gradebook/index.jsx

@@ -294,6 +294,23 @@ export default class Gradebook extends React.Component {
                   onClear={() => this.props.getUserGrades(this.props.match.params.courseId, this.props.selectedCohort, this.props.selectedTrack)}
                   value={this.state.filterValue}
                 />
+                <div className="d-flex justify-content-end" style={{ marginTop : '20px'}}>
+                  <button
+                    className="btn btn-secondary"
+                    disabled={!this.props.prevPage}
+                    onClick={() => this.props.getPrevNextGrades(this.props.prevPage, this.props.selectedCohort, this.props.selectedTrack)}
+                  >
+                    Previous
+                  </button>
+                  <div style={{width: '10px'}} />
+                  <button
+                    className="btn btn-secondary"
+                    disabled={!this.props.nextPage}
+                    onClick={() => this.props.getPrevNextGrades(this.props.nextPage, this.props.selectedCohort, this.props.selectedTrack)}
+                  >
+                    Next
+                  </button>
+                </div>
               </div>
             </div>
             <br />

src/containers/GradebookPage/index.jsx

@@ -4,6 +4,7 @@ import Gradebook from '../../components/Gradebook';
 import {
   fetchGrades,
   fetchMatchingUserGrades,
+  fetchPrevNextGrades,
   updateGrades,
   toggleGradeFormat,
   filterColumns,
@@ -22,6 +23,8 @@ const mapStateToProps = state => (
     selectedCohort: state.grades.selectedCohort,
     format: state.grades.gradeFormat,
     showSuccess: state.grades.showSuccess,
+    prevPage: state.grades.prevPage,
+    nextPage: state.grades.nextPage,
   }
 );
 
@@ -33,6 +36,9 @@ const mapDispatchToProps = dispatch => (
     searchForUser: (courseId, searchText, cohort, track) => {
       dispatch(fetchMatchingUserGrades(courseId, searchText, cohort, track));
     },
+    getPrevNextGrades : (endpoint, cohort, track) => {
+      dispatch(fetchPrevNextGrades(endpoint, cohort, track));
+    },
     getCohorts: (courseId) => {
       dispatch(fetchCohorts(courseId));
     },

src/data/actions/grades.js

@@ -14,6 +14,7 @@ import {
 import LmsApiService from '../services/LmsApiService';
 import store from '../store';
 import { headingMapper, gradeSortMap, sortAlphaAsc } from './utils';
+import apiClient from "../apiClient";
 
 
 const sortGrades = (columnName, direction) => {
@@ -30,12 +31,14 @@ const sortGrades = (columnName, direction) => {
 const startedFetchingGrades = () => ({ type: STARTED_FETCHING_GRADES });
 const finishedFetchingGrades = () => ({ type: FINISHED_FETCHING_GRADES });
 const errorFetchingGrades = () => ({ type: ERROR_FETCHING_GRADES });
-const gotGrades = (grades, cohort, track, headings) => ({
+const gotGrades = (grades, cohort, track, headings, prev, next) => ({
   type: GOT_GRADES,
   grades,
   cohort,
   track,
   headings,
+  prev,
+  next,
 });
 
 const gradeUpdateRequest = () => ({ type: GRADE_UPDATE_REQUEST });
@@ -70,6 +73,8 @@ const fetchGrades = (courseId, cohort, track, showSuccess) => (
           cohort,
           track,
           headingMapper.all(dispatch, data.results[0]),
+          data.previous,
+          data.next,
         ));
         dispatch(finishedFetchingGrades());
         dispatch(updateBanner(!!showSuccess));
@@ -91,6 +96,8 @@ const fetchMatchingUserGrades = (courseId, searchText, cohort, track) => (
           cohort,
           track,
           headingMapper.all(dispatch, data.results[0]),
+          data.previous,
+          data.next,
         ));
         dispatch(finishedFetchingGrades());
       })
@@ -100,6 +107,29 @@ const fetchMatchingUserGrades = (courseId, searchText, cohort, track) => (
   }
 );
 
+const fetchPrevNextGrades = (endpoint, cohort, track) => (
+  (dispatch) => {
+    dispatch(startedFetchingGrades());
+    return apiClient.get(endpoint)
+      .then(response => response.data)
+      .then((data) => {
+        dispatch(gotGrades(
+          data.results.sort(sortAlphaAsc),
+          cohort,
+          track,
+          headingMapper.all(dispatch, data.results[0]),
+          data.previous,
+          data.next,
+        ));
+        dispatch(finishedFetchingGrades());
+      })
+      .catch(() => {
+        dispatch(errorFetchingGrades());
+      });
+  }
+);
+
+
 const updateGrades = (courseId, updateData) => (
   (dispatch) => {
     dispatch(gradeUpdateRequest());
@@ -122,6 +152,7 @@ export {
   gotGrades,
   fetchGrades,
   fetchMatchingUserGrades,
+  fetchPrevNextGrades,
   gradeUpdateRequest,
   gradeUpdateSuccess,
   gradeUpdateFailure,

src/data/reducers/grades.js

@@ -17,6 +17,8 @@ const initialState = {
   errorFetching: false,
   gradeFormat: 'percent',
   showSuccess: false,
+  prevPage: null,
+  nextPage: null,
 };
 
 const grades = (state = initialState, action) => {
@@ -30,6 +32,8 @@ const grades = (state = initialState, action) => {
         errorFetching: false,
         selectedTrack: action.track,
         selectedCohort: action.cohort,
+        prevPage: action.prev,
+        nextPage: action.next,
       };
     case STARTED_FETCHING_GRADES:
       return {