Transfer pagination work from frontend to backend

src/commons/application/ApplicationTypes.ts

@@ -402,8 +402,7 @@ export const defaultWorkspaceManager: WorkspaceManagerState = {
   grading: {
     ...createDefaultWorkspace('grading'),
     submissionsTableFilters: {
-      columnFilters: [],
-      globalFilter: null
+      columnFilters: []
     },
     currentSubmission: undefined,
     currentQuestion: undefined,

src/commons/application/actions/SessionActions.ts

@@ -1,6 +1,10 @@
+import {
+  paginationToBackendParams,
+  ungradedToBackendParams
+} from 'src/features/grading/GradingUtils';
 import { action } from 'typesafe-actions'; // EDITED
 
-import { GradingOverview, GradingQuery } from '../../../features/grading/GradingTypes';
+import { GradingOverviews, GradingQuery } from '../../../features/grading/GradingTypes';
 import {
   Assessment,
   AssessmentConfiguration,
@@ -102,11 +106,20 @@ export const fetchTotalXpAdmin = (courseRegId: number) => action(FETCH_TOTAL_XP_
 export const fetchGrading = (submissionId: number) => action(FETCH_GRADING, submissionId);
 
 /**
- * @param filterToGroup - param when set to true, only shows submissions under the group
+ * @param filterToGroup - param that when set to true, only shows submissions under the group
  * of the grader
+ * @param gradedFilter - backend params to filter to ungraded
+ * @param pageParams - param that contains offset and pageSize, informing backend about how
+ * many entries, starting from what offset, to get
+ * @param filterParams - param that contains columnFilters converted into JSON for
+ * processing into query parameters
  */
-export const fetchGradingOverviews = (filterToGroup = true) =>
-  action(FETCH_GRADING_OVERVIEWS, filterToGroup);
+export const fetchGradingOverviews = (
+  filterToGroup = true,
+  gradedFilter = ungradedToBackendParams(false),
+  pageParams = paginationToBackendParams(0, 10),
+  filterParams = {}
+) => action(FETCH_GRADING_OVERVIEWS, { filterToGroup, gradedFilter, pageParams, filterParams });
 
 export const login = (providerId: string) => action(LOGIN, providerId);
 
@@ -202,7 +215,7 @@ export const updateTotalXp = (totalXp: number) => action(UPDATE_TOTAL_XP, totalX
 
 export const updateAssessment = (assessment: Assessment) => action(UPDATE_ASSESSMENT, assessment);
 
-export const updateGradingOverviews = (overviews: GradingOverview[]) =>
+export const updateGradingOverviews = (overviews: GradingOverviews) =>
   action(UPDATE_GRADING_OVERVIEWS, overviews);
 
 /**

src/commons/application/actions/__tests__/SessionActions.ts

@@ -1,6 +1,10 @@
 import { Chapter, Variant } from 'js-slang/dist/types';
+import {
+  paginationToBackendParams,
+  ungradedToBackendParams
+} from 'src/features/grading/GradingUtils';
 
-import { GradingOverview, GradingQuery } from '../../../../features/grading/GradingTypes';
+import { GradingOverviews, GradingQuery } from '../../../../features/grading/GradingTypes';
 import { Assessment, AssessmentOverview } from '../../../assessment/AssessmentTypes';
 import { Notification } from '../../../notificationBadge/NotificationBadgeTypes';
 import { GameState, Role, Story } from '../../ApplicationTypes';
@@ -150,16 +154,29 @@ test('fetchGradingOverviews generates correct default action object', () => {
   const action = fetchGradingOverviews();
   expect(action).toEqual({
     type: FETCH_GRADING_OVERVIEWS,
-    payload: true
+    payload: {
+      filterToGroup: true,
+      gradedFilter: ungradedToBackendParams(false),
+      pageParams: paginationToBackendParams(0, 10),
+      filterParams: {}
+    }
   });
 });
 
 test('fetchGradingOverviews generates correct action object', () => {
   const filterToGroup = false;
-  const action = fetchGradingOverviews(filterToGroup);
+  const gradedFilter = ungradedToBackendParams(true);
+  const pageParams = { offset: 123, pageSize: 456 };
+  const filterParams = { abc: 'xxx', def: 'yyy' };
+  const action = fetchGradingOverviews(filterToGroup, gradedFilter, pageParams, filterParams);
   expect(action).toEqual({
     type: FETCH_GRADING_OVERVIEWS,
-    payload: filterToGroup
+    payload: {
+      filterToGroup: filterToGroup,
+      gradedFilter: gradedFilter,
+      pageParams: pageParams,
+      filterParams: filterParams
+    }
   });
 });
 
@@ -510,28 +527,31 @@ test('updateAssessment generates correct action object', () => {
 });
 
 test('updateGradingOverviews generates correct action object', () => {
-  const overviews: GradingOverview[] = [
-    {
-      assessmentId: 1,
-      assessmentNumber: 'M1A',
-      assessmentName: 'test assessment',
-      assessmentType: 'Contests',
-      initialXp: 0,
-      xpBonus: 100,
-      xpAdjustment: 50,
-      currentXp: 50,
-      maxXp: 500,
-      studentId: 100,
-      studentName: 'test student',
-      studentUsername: 'E0123456',
-      submissionId: 1,
-      submissionStatus: 'attempting',
-      groupName: 'group',
-      gradingStatus: 'excluded',
-      questionCount: 6,
-      gradedCount: 0
-    }
-  ];
+  const overviews: GradingOverviews = {
+    count: 1,
+    data: [
+      {
+        assessmentId: 1,
+        assessmentNumber: 'M1A',
+        assessmentName: 'test assessment',
+        assessmentType: 'Contests',
+        initialXp: 0,
+        xpBonus: 100,
+        xpAdjustment: 50,
+        currentXp: 50,
+        maxXp: 500,
+        studentId: 100,
+        studentName: 'test student',
+        studentUsername: 'E0123456',
+        submissionId: 1,
+        submissionStatus: 'attempting',
+        groupName: 'group',
+        gradingStatus: 'excluded',
+        questionCount: 6,
+        gradedCount: 0
+      }
+    ]
+  };
 
   const action = updateGradingOverviews(overviews);
   expect(action).toEqual({

src/commons/application/reducers/__tests__/SessionReducer.ts

@@ -556,7 +556,10 @@ test('UPDATE_GRADING_OVERVIEWS works correctly in inserting grading overviews',
 test('UPDATE_GRADING_OVERVIEWS works correctly in updating grading overviews', () => {
   const newDefaultSession = {
     ...defaultSession,
-    gradingOverviews: gradingOverviewTest1
+    gradingOverviews: {
+      count: gradingOverviewTest1.length,
+      data: gradingOverviewTest1
+    }
   };
   const gradingOverviewsPayload = [...gradingOverviewTest2, ...gradingOverviewTest1];
   const action = {

src/commons/application/types/SessionTypes.ts

@@ -1,7 +1,7 @@
 import { Octokit } from '@octokit/rest';
 import { Chapter, Variant } from 'js-slang/dist/types';
 
-import { GradingOverview, GradingQuery } from '../../../features/grading/GradingTypes';
+import { GradingOverviews, GradingQuery } from '../../../features/grading/GradingTypes';
 import { Device, DeviceSession } from '../../../features/remoteExecution/RemoteExecutionTypes';
 import {
   Assessment,
@@ -114,7 +114,7 @@ export type SessionState = {
 
   readonly assessmentOverviews?: AssessmentOverview[];
   readonly assessments: Map<number, Assessment>;
-  readonly gradingOverviews?: GradingOverview[];
+  readonly gradingOverviews?: GradingOverviews;
   readonly gradings: Map<number, GradingQuery>;
   readonly notifications: Notification[];
   readonly googleUser?: string;

src/commons/assessment/AssessmentTypes.ts

@@ -46,8 +46,8 @@ export enum QuestionTypes {
 export type QuestionType = keyof typeof QuestionTypes;
 
 /*
-W* Used to display information regarding an assessment in the UI.
-*
+ * Used to display information regarding an assessment in the UI.
+ *
  * @property closeAt an ISO 8601 compliant date string specifiying when
  *   the assessment closes
  * @property openAt an ISO 8601 compliant date string specifiying when

src/commons/mocks/BackendMocks.ts

@@ -3,7 +3,7 @@ import { call, put, select, takeEvery } from 'redux-saga/effects';
 
 import { FETCH_GROUP_GRADING_SUMMARY } from '../../features/dashboard/DashboardTypes';
 import {
-  GradingOverview,
+  GradingOverviews,
   GradingQuery,
   GradingQuestion
 } from '../../features/grading/GradingTypes';
@@ -166,12 +166,12 @@ export function* mockBackendSaga(): SagaIterator {
     FETCH_GRADING_OVERVIEWS,
     function* (action: ReturnType<typeof actions.fetchGradingOverviews>): any {
       const accessToken = yield select((state: OverallState) => state.session.accessToken);
-      const filterToGroup = action.payload;
+      const { filterToGroup, pageParams, filterParams } = action.payload;
       const gradingOverviews = yield call(() =>
-        mockFetchGradingOverview(accessToken, filterToGroup)
+        mockFetchGradingOverview(accessToken, filterToGroup, pageParams, filterParams)
       );
       if (gradingOverviews !== null) {
-        yield put(actions.updateGradingOverviews([...gradingOverviews]));
+        yield put(actions.updateGradingOverviews(gradingOverviews));
       }
     }
   );
@@ -189,25 +189,29 @@ export function* mockBackendSaga(): SagaIterator {
     UNSUBMIT_SUBMISSION,
     function* (action: ReturnType<typeof actions.unsubmitSubmission>) {
       const { submissionId } = action.payload;
-      const overviews: GradingOverview[] = yield select(
-        (state: OverallState) => state.session.gradingOverviews || []
+      const overviews: GradingOverviews = yield select(
+        (state: OverallState) =>
+          state.session.gradingOverviews || {
+            count: 0,
+            data: []
+          }
       );
-      const index = overviews.findIndex(
+      const index = overviews.data.findIndex(
         overview =>
           overview.submissionId === submissionId && overview.submissionStatus === 'submitted'
       );
       if (index === -1) {
         yield call(showWarningMessage, '400: Bad Request');
         return;
       }
-      const newOverviews = (overviews as GradingOverview[]).map(overview => {
+      const newOverviews = overviews.data.map(overview => {
         if (overview.submissionId === submissionId) {
           return { ...overview, submissionStatus: 'attempted' };
         }
         return overview;
       });
       yield call(showSuccessMessage, 'Unsubmit successful!', 1000);
-      yield put(actions.updateGradingOverviews(newOverviews));
+      yield put(actions.updateGradingOverviews({ ...overviews, data: newOverviews }));
     }
   );
 

src/commons/mocks/GradingMocks.ts

@@ -79,10 +79,14 @@ export const mockGradingOverviews: GradingOverview[] = [
  *
  * @param accessToken a valid access token for the cadet backend.
  * @param group a boolean if true, only fetches submissions from the grader's group
+ * @param pageParams contains pagination details on offset and page index.
+ * @param backendParams contains filters to set conditions in SQL query.
  */
 export const mockFetchGradingOverview = (
   accessToken: string,
-  group: boolean
+  group: boolean,
+  pageParams: { offset: number; pageSize: number },
+  backendParams: Object
 ): GradingOverview[] | null => {
   // mocks backend role fetching
   const permittedRoles: Role[] = [Role.Admin, Role.Staff];

src/commons/sagas/BackendSaga.ts

@@ -11,6 +11,7 @@ import {
 } from '../../features/dashboard/DashboardTypes';
 import {
   GradingOverview,
+  GradingOverviews,
   GradingQuery,
   GradingQuestion
 } from '../../features/grading/GradingTypes';
@@ -414,12 +415,15 @@ function* BackendSaga(): SagaIterator {
     function* (action: ReturnType<typeof actions.fetchGradingOverviews>) {
       const tokens: Tokens = yield selectTokens();
 
-      const filterToGroup = action.payload;
+      const { filterToGroup, gradedFilter, pageParams, filterParams } = action.payload;
 
-      const gradingOverviews: GradingOverview[] | null = yield call(
+      const gradingOverviews: GradingOverviews | null = yield call(
         getGradingOverviews,
         tokens,
-        filterToGroup
+        filterToGroup,
+        gradedFilter,
+        pageParams,
+        filterParams
       );
       if (gradingOverviews) {
         yield put(actions.updateGradingOverviews(gradingOverviews));
@@ -452,7 +456,7 @@ function* BackendSaga(): SagaIterator {
       }
 
       const overviews: GradingOverview[] = yield select(
-        (state: OverallState) => state.session.gradingOverviews || []
+        (state: OverallState) => state.session.gradingOverviews?.data || []
       );
       const newOverviews = overviews.map(overview => {
         if (overview.submissionId === submissionId) {
@@ -461,8 +465,14 @@ function* BackendSaga(): SagaIterator {
         return overview;
       });
 
+      const totalPossibleEntries = yield select(
+        (state: OverallState) => state.session.gradingOverviews?.count
+      );
+
       yield call(showSuccessMessage, 'Unsubmit successful', 1000);
-      yield put(actions.updateGradingOverviews(newOverviews));
+      yield put(
+        actions.updateGradingOverviews({ count: totalPossibleEntries, data: newOverviews })
+      );
     }
   );