CP3108 Staff Dashboard - Playground Default Source Version Selector (#1073)

chrystalquek · seanlowjk · web-flow · commit 3f929bd9bd14 · 2020-05-20T11:02:25.000+08:00
* Added Dropdown to change Default Source version

* Added some tests

* Run check format

* Changed position of dropdown

* Fixed syntax error

* Fixed syntax error

* Modified variant state

* Modified fetchChapter

Co-authored-by: Low Jun Kai, Sean &lt;42912708+seanlowjk@users.noreply.github.com&gt;
diff --git a/src/actions/__tests__/workspaces.ts b/src/actions/__tests__/workspaces.ts
@@ -6,6 +6,7 @@ import {
   beginClearContext,
   browseReplHistoryDown,
   browseReplHistoryUp,
+  changeChapter,
   changeEditorHeight,
   changeEditorWidth,
   changeExternalLibrary,
@@ -20,6 +21,7 @@ import {
   evalRepl,
   evalTestcase,
   externalLibrarySelect,
+  fetchChapter,
   highlightEditorLine,
   moveCursor,
   navigateToDeclaration,
@@ -29,6 +31,7 @@ import {
   setEditorBreakpoint,
   toggleEditorAutorun,
   updateActiveTab,
+  updateChapter,
   updateCurrentAssessmentId,
   updateCurrentSubmissionId,
   updateEditorValue,
@@ -417,3 +420,36 @@ test('moveCursor generates correct action object', () => {
     }
   });
 });
+
+test('fetchChapter generates correct action object', () => {
+  const action = fetchChapter();
+  expect(action).toEqual({
+    type: actionTypes.FETCH_CHAPTER
+  });
+});
+
+test('changeChapter generates correct action object', () => {
+  const chapter = 1;
+  const variant = 'default';
+  const action = changeChapter(chapter, variant);
+  expect(action).toEqual({
+    type: actionTypes.CHANGE_CHAPTER,
+    payload: {
+      chapter,
+      variant
+    }
+  });
+});
+
+test('updateChapter generates correct action object', () => {
+  const chapter = 1;
+  const variant = 'default';
+  const action = updateChapter(chapter, variant);
+  expect(action).toEqual({
+    type: actionTypes.UPDATE_CHAPTER,
+    payload: {
+      chapter,
+      variant
+    }
+  });
+});
diff --git a/src/actions/actionTypes.ts b/src/actions/actionTypes.ts
@@ -59,6 +59,9 @@ export const UPDATE_EDITOR_BREAKPOINTS = 'UPDATE_EDITOR_BREAKPOINTS';
 export const UPDATE_HAS_UNSAVED_CHANGES = 'UPDATE_HAS_UNSAVED_CHANGES';
 export const UPDATE_REPL_VALUE = 'UPDATE_REPL_VALUE';
 export const UPDATE_WORKSPACE = 'UPDATE_WORKSPACE';
+export const FETCH_CHAPTER = 'FETCH_CHAPTER';
+export const UPDATE_CHAPTER = 'UPDATE_CHAPTER';
+export const CHANGE_CHAPTER = 'CHANGE_CHAPTER';
 
 /** Collab Editing */
 export const INIT_INVITE = 'INIT_INVITE';
diff --git a/src/actions/workspaces.ts b/src/actions/workspaces.ts
@@ -216,6 +216,14 @@ export const updateHasUnsavedChanges = (
     hasUnsavedChanges
   });
 
+export const fetchChapter = () => action(actionTypes.FETCH_CHAPTER);
+
+export const changeChapter = (chapter: number, variant: Variant) =>
+  action(actionTypes.CHANGE_CHAPTER, { chapter, variant });
+
+export const updateChapter = (chapter: number, variant: Variant) =>
+  action(actionTypes.UPDATE_CHAPTER, { chapter, variant });
+
 export const promptAutocomplete = (
   workspaceLocation: WorkspaceLocation,
   row: number,
diff --git a/src/components/Playground.tsx b/src/components/Playground.tsx
@@ -89,6 +89,7 @@ export interface IDispatchProps {
   handleDebuggerResume: () => void;
   handleDebuggerReset: () => void;
   handleToggleEditorAutorun: () => void;
+  handleFetchChapter: () => void;
   handlePromptAutocomplete: (row: number, col: number, callback: any) => void;
 }
 
@@ -111,6 +112,7 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
     };
     this.handlers.goGreen = this.toggleIsGreen.bind(this);
     (window as any).thePlayground = this;
+    this.props.handleFetchChapter();
   }
 
   public render() {
diff --git a/src/components/__tests__/Playground.tsx b/src/components/__tests__/Playground.tsx
@@ -58,6 +58,7 @@ const baseProps = {
   handleDebuggerPause: () => {},
   handleDebuggerResume: () => {},
   handleDebuggerReset: () => {},
+  handleFetchChapter: () => {},
   handlePromptAutocomplete: (row: number, col: number, callback: any) => {}
 };
 
diff --git a/src/components/academy/DefaultChapter.tsx b/src/components/academy/DefaultChapter.tsx
@@ -0,0 +1,76 @@
+import { Button, Classes, MenuItem } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { ItemRenderer, Select } from '@blueprintjs/select';
+
+import * as React from 'react';
+
+import { RouteComponentProps } from 'react-router';
+
+import { Variant } from 'js-slang/dist/types';
+import { ISourceLanguage, sourceLanguages, styliseChapter } from '../../reducers/states';
+
+export interface IChapterProps extends IDispatchProps, IStateProps, RouteComponentProps<{}> {}
+
+export type IDispatchProps = {
+  handleFetchChapter: () => void;
+  handleUpdateChapter: (chapter: IChapter) => void;
+  handleChapterSelect?: (i: IChapter, e: React.ChangeEvent<HTMLSelectElement>) => void;
+};
+
+export interface IStateProps {
+  sourceChapter: number;
+  sourceVariant: Variant;
+}
+
+export interface IChapter {
+  chapter: number;
+  variant: Variant;
+  displayName: string;
+}
+
+export function DefaultChapter(props: IChapterProps) {
+  props.handleFetchChapter();
+
+  const chapters = sourceLanguages.map((lang: ISourceLanguage) => {
+    return {
+      chapter: lang.chapter,
+      variant: lang.variant,
+      displayName: styliseChapter(lang.chapter, lang.variant)
+    };
+  });
+
+  const chapterRenderer: ItemRenderer<IChapter> = (lang, { handleClick }) => (
+    <MenuItem
+      active={false}
+      key={lang.chapter + lang.variant}
+      onClick={handleClick}
+      text={lang.displayName}
+    />
+  );
+
+  const ChapterSelectComponent = Select.ofType<IChapter>();
+
+  const chapSelect = (
+    currentChap: number,
+    currentVariant: Variant,
+    handleSelect = (i: IChapter) => {}
+  ) => (
+    <ChapterSelectComponent
+      className={Classes.MINIMAL}
+      items={chapters}
+      onItemSelect={handleSelect}
+      itemRenderer={chapterRenderer}
+      filterable={false}
+    >
+      <Button
+        className={Classes.MINIMAL}
+        text={styliseChapter(currentChap, currentVariant)}
+        rightIcon={IconNames.DOUBLE_CARET_VERTICAL}
+      />
+    </ChapterSelectComponent>
+  );
+
+  return (
+    <div> {chapSelect(props.sourceChapter, props.sourceVariant, props.handleUpdateChapter)} </div>
+  );
+}
diff --git a/src/components/academy/NavigationBar.tsx b/src/components/academy/NavigationBar.tsx
@@ -11,6 +11,8 @@ import { AssessmentCategories } from '../assessment/assessmentShape';
 import NotificationBadge from '../../containers/notification/NotificationBadge';
 import { filterNotificationsByType } from '../notification/NotificationHelpers';
 
+import DefaultChapter from '../../containers/DefaultChapterContainer';
+
 type OwnProps = {
   role: Role;
 };
@@ -81,6 +83,8 @@ const NavigationBar: React.SFC<OwnProps> = props => (
     </NavbarGroup>
     {props.role === Role.Admin || props.role === Role.Staff ? (
       <NavbarGroup align={Alignment.RIGHT}>
+        <DefaultChapter />
+
         <NavLink
           to={'/academy/dashboard'}
           activeClassName={Classes.ACTIVE}
diff --git a/src/components/academy/__tests__/__snapshots__/NavigationBar.tsx.snap b/src/components/academy/__tests__/__snapshots__/NavigationBar.tsx.snap
@@ -80,6 +80,7 @@ exports[`Grading NavLink renders for Role.Admin 1`] = `
     </NavLink>
   </Blueprint3.NavbarGroup>
   <Blueprint3.NavbarGroup align=\\"right\\">
+    <withRouter(Connect(DefaultChapter)) />
     <NavLink to=\\"/academy/dashboard\\" activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" aria-current=\\"page\\">
       <Blueprint3.Icon icon=\\"globe\\" />
       <div className=\\"navbar-button-text hidden-xs\\">
@@ -148,6 +149,7 @@ exports[`Grading NavLink renders for Role.Staff 1`] = `
     </NavLink>
   </Blueprint3.NavbarGroup>
   <Blueprint3.NavbarGroup align=\\"right\\">
+    <withRouter(Connect(DefaultChapter)) />
     <NavLink to=\\"/academy/dashboard\\" activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" aria-current=\\"page\\">
       <Blueprint3.Icon icon=\\"globe\\" />
       <div className=\\"navbar-button-text hidden-xs\\">
diff --git a/src/containers/DefaultChapterContainer.ts b/src/containers/DefaultChapterContainer.ts
@@ -0,0 +1,30 @@
+import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
+import { withRouter } from 'react-router';
+import { bindActionCreators, Dispatch } from 'redux';
+
+import { changeChapter, fetchChapter } from '../actions';
+
+import { DefaultChapter, IDispatchProps, IStateProps } from '../components/academy/DefaultChapter';
+import { IChapter } from '../components/workspace/controlBar';
+import { IState } from '../reducers/states';
+
+const mapStateToProps: MapStateToProps<IStateProps, {}, IState> = state => ({
+  sourceChapter: state.workspaces.playground.context.chapter,
+  sourceVariant: state.workspaces.playground.context.variant
+});
+
+const mapDispatchToProps: MapDispatchToProps<IDispatchProps, {}> = (dispatch: Dispatch<any>) =>
+  bindActionCreators(
+    {
+      handleFetchChapter: () => fetchChapter(),
+      handleUpdateChapter: (chapter: IChapter) => changeChapter(chapter.chapter, chapter.variant)
+    },
+    dispatch
+  );
+
+export default withRouter(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(DefaultChapter)
+);
diff --git a/src/containers/PlaygroundContainer.ts b/src/containers/PlaygroundContainer.ts
@@ -19,6 +19,7 @@ import {
   evalEditor,
   evalRepl,
   externalLibrarySelect,
+  fetchChapter,
   finishInvite,
   generateLzString,
   initInvite,
@@ -111,6 +112,7 @@ const mapDispatchToProps: MapDispatchToProps<IDispatchProps, {}> = (dispatch: Di
       handleDebuggerPause: () => beginDebuggerPause(workspaceLocation),
       handleDebuggerResume: () => debuggerResume(workspaceLocation),
       handleDebuggerReset: () => debuggerReset(workspaceLocation),
+      handleFetchChapter: () => fetchChapter(),
       handlePromptAutocomplete: (row: number, col: number, callback: any) =>
         promptAutocomplete(workspaceLocation, row, col, callback)
     },
diff --git a/src/reducers/workspaces.ts b/src/reducers/workspaces.ts
@@ -38,6 +38,7 @@ import {
   SET_WEBSOCKET_STATUS,
   TOGGLE_EDITOR_AUTORUN,
   UPDATE_ACTIVE_TAB,
+  UPDATE_CHAPTER,
   UPDATE_CURRENT_ASSESSMENT_ID,
   UPDATE_CURRENT_SUBMISSION_ID,
   UPDATE_EDITOR_VALUE,
@@ -656,6 +657,19 @@ export const reducer: Reducer<IWorkspaceManagerState> = (
           hasUnsavedChanges: action.payload.hasUnsavedChanges
         }
       };
+    case UPDATE_CHAPTER:
+      return {
+        ...state,
+        playground: {
+          ...state.playground,
+          context: {
+            ...state.playground.context,
+            chapter: action.payload.chapter,
+            variant: action.payload.variant
+          }
+        }
+      };
+
     default:
       return state;
   }
diff --git a/src/sagas/__tests__/backend.ts b/src/sagas/__tests__/backend.ts
@@ -386,6 +386,23 @@ describe('Test NOTIFY_CHATKIT_USERS Action', () => {
   });
 });
 
+describe('Test FETCH_CHAPTER Action', () => {
+  test('when chapter is obtained', () => {
+    return expectSaga(backendSaga)
+      .dispatch({ type: actionTypes.FETCH_CHAPTER })
+      .silentRun();
+  });
+});
+
+describe('Test CHANGE_CHAPTER Action', () => {
+  test('when chapter is changed', () => {
+    return expectSaga(backendSaga)
+      .withState({ session: { role: Role.Staff } })
+      .dispatch({ type: actionTypes.CHANGE_CHAPTER, payload: { chapterNo: 1, variant: 'default' } })
+      .silentRun();
+  });
+});
+
 describe('Test FETCH_GROUP_OVERVIEWS Action', () => {
   test('when group overviews are obtained', () => {
     return expectSaga(backendSaga)
diff --git a/src/sagas/backend.ts b/src/sagas/backend.ts
@@ -556,6 +556,34 @@ function* backendSaga(): SagaIterator {
     yield call(showSuccessMessage, 'Deleted successfully!', 1000);
   });
 
+  yield takeEvery(actionTypes.FETCH_CHAPTER, function*() {
+    const chapter = yield call(request.fetchChapter);
+
+    if (chapter) {
+      yield put(actions.updateChapter(chapter.chapter.chapterno, chapter.chapter.variant));
+    }
+  });
+
+  yield takeEvery(actionTypes.CHANGE_CHAPTER, function*(
+    action: ReturnType<typeof actions.changeChapter>
+  ) {
+    const tokens = yield select((state: IState) => ({
+      accessToken: state.session.accessToken,
+      refreshToken: state.session.refreshToken
+    }));
+
+    const chapter = action.payload;
+    const resp: Response = yield request.changeChapter(chapter.chapter, chapter.variant, tokens);
+
+    if (!resp || !resp.ok) {
+      yield request.handleResponseError(resp);
+      return;
+    }
+
+    yield put(actions.updateChapter(chapter.chapter, chapter.variant));
+    yield call(showSuccessMessage, 'Updated successfully!', 1000);
+  });
+
   yield takeEvery(actionTypes.FETCH_GROUP_OVERVIEWS, function*(
     action: ReturnType<typeof actions.fetchGroupOverviews>
   ) {
diff --git a/src/sagas/requests.ts b/src/sagas/requests.ts
@@ -611,6 +611,38 @@ export async function getGroupOverviews(tokens: Tokens): Promise<IGroupOverview[
   });
 }
 
+/**
+ * GET /chapter
+ */
+export async function fetchChapter(): Promise<Response | null> {
+  const resp = await request('chapter', 'GET', {
+    noHeaderAccept: true,
+    shouldAutoLogout: false,
+    shouldRefresh: true
+  });
+
+  if (!resp || !resp.ok) {
+    return null;
+  }
+
+  return await resp.json();
+}
+
+/**
+ * POST /chapter/update/1
+ */
+export async function changeChapter(chapterno: number, variant: string, tokens: Tokens) {
+  const resp = await request(`chapter/update/1`, 'POST', {
+    accessToken: tokens.accessToken,
+    body: { chapterno, variant },
+    noHeaderAccept: true,
+    refreshToken: tokens.refreshToken,
+    shouldAutoLogout: false,
+    shouldRefresh: true
+  });
+  return resp;
+}
+
 /**
  * @returns {(Response|null)} Response if successful, otherwise null.
  *

Original file line number	Diff line number	Diff line change
`@@ -89,6 +89,7 @@ export interface IDispatchProps {`
`89`	`89`	`handleDebuggerResume: () => void;`
`90`	`90`	`handleDebuggerReset: () => void;`
`91`	`91`	`handleToggleEditorAutorun: () => void;`
	`92`	`+ handleFetchChapter: () => void;`
`92`	`93`	`handlePromptAutocomplete: (row: number, col: number, callback: any) => void;`
`93`	`94`	`}`
`94`	`95`
`@@ -111,6 +112,7 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {`
`111`	`112`	`};`
`112`	`113`	`this.handlers.goGreen = this.toggleIsGreen.bind(this);`
`113`	`114`	`(window as any).thePlayground = this;`
	`115`	`+ this.props.handleFetchChapter();`
`114`	`116`	`}`
`115`	`117`
`116`	`118`	`public render() {`