✨ feat: add total xp table (#2281)

* ✨ feat: add api call to redux and saga

* ✨ feat: add new Xp Calculation page

* ✨ feat: add nav-link to new page

* 🧪 tests: add academy navigation bar test

* ✨ feat: add conditional render for xp calculation

* 🧪 tests: remove unused snapshot

* use React.FC typing for component

* shift constants out of react component

* memoize callbacks as per PR comment

* remove commented out table filter code

* shift to useDispatch

* update actions to fit naming convention

Co-authored-by: En Rong <53928333+chownces@users.noreply.github.com>

Author: ShenyiCui

src/commons/application/ApplicationTypes.ts

@@ -339,6 +339,7 @@ export const defaultSession: SessionState = {
     collectibles: {}
   },
   xp: 0,
+  allUserXp: undefined,
   story: {
     story: '',
     playStory: false

src/commons/application/actions/SessionActions.ts

@@ -21,6 +21,7 @@ import {
   DELETE_ASSESSMENT_CONFIG,
   DELETE_USER_COURSE_REGISTRATION,
   FETCH_ADMIN_PANEL_COURSE_REGISTRATIONS,
+  FETCH_ALL_USER_XP,
   FETCH_ASSESSMENT,
   FETCH_ASSESSMENT_ADMIN,
   FETCH_ASSESSMENT_CONFIGS,
@@ -56,6 +57,7 @@ import {
   SUBMIT_GRADING_AND_CONTINUE,
   Tokens,
   UNSUBMIT_SUBMISSION,
+  UPDATE_ALL_USER_XP,
   UPDATE_ASSESSMENT,
   UPDATE_ASSESSMENT_CONFIGS,
   UPDATE_ASSESSMENT_OVERVIEWS,
@@ -90,6 +92,8 @@ export const fetchTotalXp = () => action(FETCH_TOTAL_XP);
 
 export const fetchTotalXpAdmin = (courseRegId: number) => action(FETCH_TOTAL_XP_ADMIN, courseRegId);
 
+export const fetchAllUserXp = () => action(FETCH_ALL_USER_XP);
+
 export const fetchGrading = (submissionId: number) => action(FETCH_GRADING, submissionId);
 
 /**
@@ -187,6 +191,8 @@ export const updateAssessmentOverviews = (overviews: AssessmentOverview[]) =>
 
 export const updateTotalXp = (totalXp: number) => action(UPDATE_TOTAL_XP, totalXp);
 
+export const updateAllUserXp = (allUserXp: string[][]) => action(UPDATE_ALL_USER_XP, allUserXp);
+
 export const updateAssessment = (assessment: Assessment) => action(UPDATE_ASSESSMENT, assessment);
 
 export const updateGradingOverviews = (overviews: GradingOverview[]) =>

src/commons/application/reducers/SessionsReducer.ts

@@ -20,6 +20,7 @@ import {
   SET_GOOGLE_USER,
   SET_TOKENS,
   SET_USER,
+  UPDATE_ALL_USER_XP,
   UPDATE_ASSESSMENT,
   UPDATE_ASSESSMENT_OVERVIEWS,
   UPDATE_GRADING,
@@ -100,6 +101,8 @@ export const SessionsReducer: Reducer<SessionState> = (
       };
     case UPDATE_TOTAL_XP:
       return { ...state, xp: action.payload };
+    case UPDATE_ALL_USER_XP:
+      return { ...state, allUserXp: action.payload };
     case UPDATE_GRADING:
       const newGradings = new Map(state.gradings);
       newGradings.set(action.payload.submissionId, action.payload.grading);

src/commons/application/types/SessionTypes.ts

@@ -18,6 +18,7 @@ export const FETCH_COURSE_CONFIG = 'FETCH_COURSE_CONFIG';
 export const FETCH_ASSESSMENT = 'FETCH_ASSESSMENT';
 export const FETCH_ASSESSMENT_ADMIN = 'FETCH_ASSESSMENT_ADMIN';
 export const FETCH_ASSESSMENT_OVERVIEWS = 'FETCH_ASSESSMENT_OVERVIEWS';
+export const FETCH_ALL_USER_XP = 'FETCH_ALL_USER_XP';
 export const FETCH_TOTAL_XP = 'FETCH_TOTAL_XP';
 export const FETCH_TOTAL_XP_ADMIN = 'FETCH_TOTAL_XP_ADMIN';
 export const FETCH_GRADING = 'FETCH_GRADING';
@@ -47,6 +48,7 @@ export const REMOVE_GITHUB_OCTOKIT_OBJECT_AND_ACCESS_TOKEN =
 export const UNSUBMIT_SUBMISSION = 'UNSUBMIT_SUBMISSION';
 export const UPDATE_ASSESSMENT_OVERVIEWS = 'UPDATE_ASSESSMENT_OVERVIEWS';
 export const UPDATE_TOTAL_XP = 'UPDATE_TOTAL_XP';
+export const UPDATE_ALL_USER_XP = 'UPDATE_ALL_USER_XP';
 export const UPDATE_ASSESSMENT = 'UPDATE_ASSESSMENT';
 export const UPDATE_GRADING_OVERVIEWS = 'UPDATE_GRADING_OVERVIEWS';
 export const UPDATE_GRADING = 'UPDATE_GRADING';
@@ -84,6 +86,7 @@ export type SessionState = {
   readonly gameState: GameState;
   readonly courseId?: number;
   readonly xp: number;
+  readonly allUserXp: string[][] | undefined;
   readonly story: Story;
 
   // Course Configuration

src/commons/navigationBar/subcomponents/AcademyNavigationBar.tsx

@@ -64,6 +64,17 @@ const AcademyNavigationBar: React.FunctionComponent<OwnProps> = props => (
           <div className="navbar-button-text hidden-xs hidden-sm hidden-md">Sourcereel</div>
         </NavLink>
 
+        {props.role === Role.Admin && (
+          <NavLink
+            to={`/courses/${props.courseId}/xpcalculation`}
+            activeClassName={Classes.ACTIVE}
+            className={classNames('NavigationBar__link', Classes.BUTTON, Classes.MINIMAL)}
+          >
+            <Icon icon={IconNames.CALCULATOR} />
+            <div className="navbar-button-text hidden-xs hidden-sm">XP Calculation</div>
+          </NavLink>
+        )}
+
         <NavLink
           to={`/courses/${props.courseId}/grading`}
           activeClassName={Classes.ACTIVE}

src/commons/navigationBar/subcomponents/__tests__/AcademyNavigationBar.tsx

@@ -30,6 +30,9 @@ test('MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, Grad
   expect(
     tree.filterWhere(shallowTree => shallowTree.find({ to: '/courses/0/adminpanel' }).exists())
   ).toHaveLength(0);
+  expect(
+    tree.filterWhere(shallowTree => shallowTree.find({ to: '/courses/0/xpcalculation' }).exists())
+  ).toHaveLength(0);
 });
 
 test('MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard and Grading NavLinks render for Role.Staff', () => {
@@ -56,12 +59,15 @@ test('MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard and G
   expect(
     tree.filterWhere(shallowTree => shallowTree.find({ to: '/courses/0/dashboard' }).exists())
   ).toHaveLength(1);
+  expect(
+    tree.filterWhere(shallowTree => shallowTree.find({ to: '/courses/0/xpcalculation' }).exists())
+  ).toHaveLength(0);
   expect(
     tree.filterWhere(shallowTree => shallowTree.find({ to: '/courses/0/adminpanel' }).exists())
   ).toHaveLength(0);
 });
 
-test('MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, Grading and AdminPanel NavLinks render for Role.Admin', () => {
+test('MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, Grading, XP Calculation and AdminPanel NavLinks render for Role.Admin', () => {
   const props = {
     role: Role.Admin,
     notifications: [],
@@ -85,6 +91,9 @@ test('MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, Grad
   expect(
     tree.filterWhere(shallowTree => shallowTree.find({ to: '/courses/0/dashboard' }).exists())
   ).toHaveLength(1);
+  expect(
+    tree.filterWhere(shallowTree => shallowTree.find({ to: '/courses/0/xpcalculation' }).exists())
+  ).toHaveLength(1);
   expect(
     tree.filterWhere(shallowTree => shallowTree.find({ to: '/courses/0/adminpanel' }).exists())
   ).toHaveLength(1);

src/commons/navigationBar/subcomponents/__tests__/__snapshots__/AcademyNavigationBar.tsx.snap

@@ -117,7 +117,7 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
 </Blueprint4.Navbar>"
 `;
 
-exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, Grading and AdminPanel NavLinks render for Role.Admin 1`] = `
+exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, Grading, XP Calculation and AdminPanel NavLinks render for Role.Admin 1`] = `
 "<Blueprint4.Navbar className=\\"NavigationBar secondary-navbar\\">
   <Blueprint4.NavbarGroup align=\\"left\\">
     <NavLink to=\\"/courses/0/missions\\" activeClassName=\\"bp4-active\\" className=\\"NavigationBar__link bp4-button bp4-minimal\\">
@@ -175,6 +175,12 @@ exports[`MissionControl, GroundControl, Sourcereel, StorySimulator, Dashboard, G
         Sourcereel
       </div>
     </NavLink>
+    <NavLink to=\\"/courses/0/xpcalculation\\" activeClassName=\\"bp4-active\\" className=\\"NavigationBar__link bp4-button bp4-minimal\\">
+      <Blueprint4.Icon icon=\\"calculator\\" />
+      <div className=\\"navbar-button-text hidden-xs hidden-sm\\">
+        XP Calculation
+      </div>
+    </NavLink>
     <NavLink to=\\"/courses/0/grading\\" activeClassName=\\"bp4-active\\" className=\\"NavigationBar__link bp4-button bp4-minimal\\">
       <Blueprint4.Icon icon=\\"endorsed\\" />
       <div className=\\"navbar-button-text hidden-xs hidden-sm hidden-md\\">

src/commons/sagas/BackendSaga.ts

@@ -45,6 +45,7 @@ import {
   DELETE_ASSESSMENT_CONFIG,
   DELETE_USER_COURSE_REGISTRATION,
   FETCH_ADMIN_PANEL_COURSE_REGISTRATIONS,
+  FETCH_ALL_USER_XP,
   FETCH_ASSESSMENT,
   FETCH_ASSESSMENT_ADMIN,
   FETCH_ASSESSMENT_CONFIGS,
@@ -78,6 +79,7 @@ import { showSuccessMessage, showWarningMessage } from '../utils/NotificationsHe
 import {
   deleteAssessment,
   deleteSourcecastEntry,
+  getAllUserXp,
   getAssessment,
   getAssessmentConfigs,
   getAssessmentOverviews,
@@ -237,6 +239,15 @@ function* BackendSaga(): SagaIterator {
     }
   });
 
+  yield takeEvery(FETCH_ALL_USER_XP, function* () {
+    const tokens: Tokens = yield selectTokens();
+
+    const res: { all_users_xp: string[][] } = yield call(getAllUserXp, tokens);
+    if (res) {
+      yield put(actions.updateAllUserXp(res.all_users_xp));
+    }
+  });
+
   yield takeEvery(FETCH_TOTAL_XP, function* () {
     const tokens: Tokens = yield selectTokens();
 

src/commons/sagas/RequestsSaga.ts

@@ -491,6 +491,21 @@ export const getTotalXp = async (tokens: Tokens, courseRegId?: number): Promise<
   return totalXp;
 };
 
+/**
+ * GET /courses/{courseId}/admin/users/total_xp
+ */
+export const getAllUserXp = async (tokens: Tokens): Promise<number | null> => {
+  const resp = await request(`${courseId()}/admin/users/total_xp`, 'GET', {
+    ...tokens,
+    shouldRefresh: true
+  });
+  if (!resp || !resp.ok) {
+    return null; // invalid accessToken _and_ refreshToken
+  }
+  const totalXp = await resp.json();
+  return totalXp;
+};
+
 /**
  * GET /courses/{courseId}/admin/users/{course_reg_id}/assessments
  */

src/pages/academy/Academy.tsx

@@ -22,6 +22,7 @@ import Grading from './grading/GradingContainer';
 import GroundControl from './groundControl/GroundControlContainer';
 import Sourcereel from './sourcereel/SourcereelContainer';
 import StorySimulator from './storySimulator/StorySimulator';
+import XpCalculation from './xpCalculation/XpCalculation';
 
 const Academy: React.FC<{}> = () => {
   const { path, url } = useRouteMatch();
@@ -41,9 +42,10 @@ const Academy: React.FC<{}> = () => {
       ? [
           <Route path={`${path}/groundcontrol`} component={GroundControl} key={0} />,
           <Route path={`${path}/grading/${gradingRegExp}`} component={Grading} key={1} />,
-          <Route path={`${path}/sourcereel`} component={Sourcereel} key={2} />,
-          <Route path={`${path}/storysimulator`} component={StorySimulator} key={3} />,
-          <Route path={`${path}/dashboard`} component={DashboardContainer} key={4} />
+          <Route path={`${path}/xpcalculation`} component={XpCalculation} key={2} />,
+          <Route path={`${path}/sourcereel`} component={Sourcereel} key={3} />,
+          <Route path={`${path}/storysimulator`} component={StorySimulator} key={4} />,
+          <Route path={`${path}/dashboard`} component={DashboardContainer} key={5} />
         ]
       : null;
   return (