Load editorValue from solutionTemplate or answer (#215)

ning-y · remo5000 · commit 74805012127c · 2018-07-20T20:58:23.000+08:00
* Allow all questions loaded to use solutionTemplate

* Implement the submit answer api call

* Lengthen duration of toasters aka notifications

* Load saved answer into editorValue for ProgrammingQuestions

* Fix typing wrt IQuestion

* Add specific error message for status code 403

* Update answer in local store on SUBMIT_ANSWER

* Use tslint directly in travis CI

* Update editorValue on assessment workspace mount

* Add warning for trying to save an empty answer

* Change empty editorValue to use null

* Fix editor value in state not being updated initially

* Bump version number v0.1.4 -&gt; v0.1.5
diff --git a/.travis.yml b/.travis.yml
@@ -8,5 +8,5 @@ branches:
 script:
   - yarn format:ci
   - yarn build-css
-  - yarn build-js
+  - yarn tslint -p .
   - yarn test-coveralls
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "cadet-frontend",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "scripts-info": {
     "format": "Format source code",
     "start": "Start the Webpack development server",
diff --git a/src/actions/actionTypes.ts b/src/actions/actionTypes.ts
@@ -53,6 +53,7 @@ export const LOGIN = 'LOGIN'
 export const SET_ROLE = 'SET_ROLE'
 export const SET_TOKENS = 'SET_TOKENS'
 export const SET_USERNAME = 'SET_USERNAME'
+export const SUBMIT_ANSWER = 'SUBMIT_ANSWER'
 export const UPDATE_HISTORY_HELPERS = 'UPDATE_HISTORY_HELPERS'
 export const UPDATE_ASSESSMENT_OVERVIEWS = 'UPDATE_ASSESSMENT_OVERVIEWS'
 export const UPDATE_ASSESSMENT = 'UPDATE_ASSESSMENT'
diff --git a/src/actions/session.ts b/src/actions/session.ts
@@ -55,6 +55,17 @@ export const setUsername: ActionCreator<actionTypes.IAction> = (username: string
   payload: username
 })
 
+export const submitAnswer: ActionCreator<actionTypes.IAction> = (
+  id: number,
+  answer: string | number
+) => ({
+  type: actionTypes.SUBMIT_ANSWER,
+  payload: {
+    id,
+    answer
+  }
+})
+
 export const updateHistoryHelpers: ActionCreator<actionTypes.IAction> = (loc: string) => ({
   type: actionTypes.UPDATE_HISTORY_HELPERS,
   payload: loc
diff --git a/src/components/academy/grading/GradingWorkspace.tsx b/src/components/academy/grading/GradingWorkspace.tsx
@@ -22,7 +22,7 @@ export type GradingWorkspaceProps = DispatchProps & OwnProps & StateProps
 export type StateProps = {
   activeTab: number
   grading?: Grading
-  editorValue?: string
+  editorValue: string | null
   editorWidth: string
   isRunning: boolean
   output: InterpreterOutput[]
@@ -69,15 +69,16 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
    * occurs after the call to checkWorkspaceReset finishes.
    */
   public componentDidMount() {
-    this.checkWorkspaceReset(this.props)
     this.props.handleGradingFetch(this.props.submissionId)
   }
 
   /**
    * After the Grading is fetched, there is a check for wether the
    * workspace needs to be udpated (a change in submissionId or questionId)
    */
-  public componentDidUpdate() {}
+  public componentDidUpdate() {
+    this.checkWorkspaceReset(this.props)
+  }
 
   public render() {
     if (this.props.grading === undefined) {
@@ -97,15 +98,18 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
         : this.props.questionId
     /* Get the question to be graded */
     const question = this.props.grading[questionId].question as IQuestion
+    const editorValue =
+      question.type === QuestionTypes.programming
+        ? question.answer !== null
+          ? ((question as IProgrammingQuestion).answer as string)
+          : (question as IProgrammingQuestion).solutionTemplate
+        : null
     const workspaceProps: WorkspaceProps = {
       controlBarProps: this.controlBarProps(this.props, questionId),
       editorProps:
         question.type === QuestionTypes.programming
           ? {
-              editorValue:
-                this.props.editorValue !== undefined
-                  ? this.props.editorValue
-                  : (question as IProgrammingQuestion).solutionTemplate,
+              editorValue: editorValue!,
               handleEditorEval: this.props.handleEditorEval,
               handleEditorValueChange: this.props.handleEditorValueChange
             }
@@ -150,12 +154,22 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
       this.props.storedSubmissionId !== submissionId ||
       this.props.storedQuestionId !== questionId
     ) {
-      const chapter = this.props.grading[questionId].question.library.chapter
-      const externalName = this.props.grading[questionId].question.library.externalLibraryName
-      const externals = this.props.grading[questionId].question.library.externals
+      const question = this.props.grading[questionId].question as IQuestion
+      const chapter = question.library.chapter
+      const externalName = question.library.externalLibraryName
+      const externals = question.library.externals
+      const editorValue =
+        question.type === QuestionTypes.programming
+          ? question.answer !== null
+            ? ((question as IProgrammingQuestion).answer as string)
+            : (question as IProgrammingQuestion).solutionTemplate
+          : null
       this.props.handleUpdateCurrentSubmissionId(submissionId, questionId)
       this.props.handleResetWorkspace()
       this.props.handleClearContext(chapter, externals, externalName)
+      if (editorValue) {
+        this.props.handleEditorValueChange(editorValue)
+      }
     }
   }
 
diff --git a/src/components/academy/grading/gradingShape.ts b/src/components/academy/grading/gradingShape.ts
@@ -43,7 +43,7 @@ export type GradingQuestion = {
  */
 interface IAnsweredQuestion extends IQuestion {
   solution?: number
-  answer?: string | number
+  answer: string | number | null
   solutionTemplate?: string
   choices?: MCQChoice[]
 }
diff --git a/src/components/assessment/AssessmentWorkspace.tsx b/src/components/assessment/AssessmentWorkspace.tsx
@@ -23,7 +23,7 @@ export type AssessmentWorkspaceProps = DispatchProps & OwnProps & StateProps
 export type StateProps = {
   activeTab: number
   assessment?: IAssessment
-  editorValue?: string
+  editorValue: string | null
   editorWidth: string
   isRunning: boolean
   output: InterpreterOutput[]
@@ -58,6 +58,7 @@ export type DispatchProps = {
   handleReplOutputClear: () => void
   handleReplValueChange: (newValue: string) => void
   handleResetWorkspace: () => void
+  handleSave: (id: number, answer: number | string) => void
   handleSideContentHeightChange: (heightChange: number) => void
   handleUpdateCurrentAssessmentId: (assessmentId: number, questionId: number) => void
 }
@@ -76,13 +77,16 @@ class AssessmentWorkspace extends React.Component<
    * occurs after the call to checkWorkspaceReset finishes.
    */
   public componentDidMount() {
-    this.checkWorkspaceReset(this.props)
     this.props.handleAssessmentFetch(this.props.assessmentId)
     if (this.props.questionId === 0) {
       this.setState({ showOverlay: true })
     }
   }
 
+  public componentDidUpdate() {
+    this.checkWorkspaceReset(this.props)
+  }
+
   public render() {
     if (this.props.assessment === undefined || this.props.assessment.questions.length === 0) {
       return (
@@ -112,15 +116,18 @@ class AssessmentWorkspace extends React.Component<
         ? this.props.assessment.questions.length - 1
         : this.props.questionId
     const question: IQuestion = this.props.assessment.questions[questionId]
+    const editorValue =
+      question.type === QuestionTypes.programming
+        ? question.answer !== null
+          ? ((question as IProgrammingQuestion).answer as string)
+          : (question as IProgrammingQuestion).solutionTemplate
+        : null
     const workspaceProps: WorkspaceProps = {
       controlBarProps: this.controlBarProps(this.props, questionId),
       editorProps:
         question.type === QuestionTypes.programming
           ? {
-              editorValue:
-                this.props.editorValue !== undefined
-                  ? this.props.editorValue
-                  : (question as IProgrammingQuestion).solutionTemplate,
+              editorValue: editorValue!,
               handleEditorEval: this.props.handleEditorEval,
               handleEditorValueChange: this.props.handleEditorValueChange
             }
@@ -151,8 +158,6 @@ class AssessmentWorkspace extends React.Component<
   /**
    * Checks if there is a need to reset the workspace, then executes
    * a dispatch (in the props) if needed.
-   *
-   * @param props the props passed to the component
    */
   private checkWorkspaceReset(props: AssessmentWorkspaceProps) {
     /* Don't reset workspace if assessment not fetched yet. */
@@ -168,12 +173,22 @@ class AssessmentWorkspace extends React.Component<
       this.props.storedAssessmentId !== assessmentId ||
       this.props.storedQuestionId !== questionId
     ) {
-      const chapter = this.props.assessment.questions[questionId].library.chapter
-      const externalName = this.props.assessment.questions[questionId].library.externalLibraryName
-      const externals = this.props.assessment.questions[questionId].library.externals
+      const question = this.props.assessment.questions[questionId]
+      const chapter = question.library.chapter
+      const externalName = question.library.externalLibraryName
+      const externals = question.library.externals
+      const editorValue =
+        question.type === QuestionTypes.programming
+          ? question.answer !== null
+            ? ((question as IProgrammingQuestion).answer as string)
+            : (question as IProgrammingQuestion).solutionTemplate
+          : null
       this.props.handleUpdateCurrentAssessmentId(assessmentId, questionId)
       this.props.handleResetWorkspace()
       this.props.handleClearContext(chapter, externals, externalName)
+      if (editorValue) {
+        this.props.handleEditorValueChange(editorValue)
+      }
     }
   }
 
@@ -223,6 +238,11 @@ class AssessmentWorkspace extends React.Component<
       onClickNext: () => history.push(assessmentWorkspacePath + `/${(questionId + 1).toString()}`),
       onClickPrevious: () =>
         history.push(assessmentWorkspacePath + `/${(questionId - 1).toString()}`),
+      onClickSave: () =>
+        this.props.handleSave(
+          this.props.assessment!.questions[questionId].id,
+          this.props.editorValue!
+        ),
       sourceChapter: this.props.assessment!.questions[questionId].library.chapter
     }
   }
diff --git a/src/components/assessment/__tests__/AssessmentWorkspace.tsx b/src/components/assessment/__tests__/AssessmentWorkspace.tsx
@@ -8,6 +8,7 @@ const defaultProps: AssessmentWorkspaceProps = {
   activeTab: 0,
   assessmentId: 0,
   closeDate: '2048-06-18T05:24:26.026Z',
+  editorValue: null,
   editorWidth: '50%',
   handleAssessmentFetch: (assessmentId: number) => {},
   handleBrowseHistoryDown: () => {},
@@ -23,6 +24,7 @@ const defaultProps: AssessmentWorkspaceProps = {
   handleReplOutputClear: () => {},
   handleReplValueChange: (newValue: string) => {},
   handleResetWorkspace: () => {},
+  handleSave: (id: number, answer: string | number) => {},
   handleSideContentHeightChange: (heightChange: number) => {},
   handleUpdateCurrentAssessmentId: (a: number, q: number) => {},
   isRunning: false,
diff --git a/src/components/assessment/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap b/src/components/assessment/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
@@ -14,7 +14,7 @@ exports[`AssessmentWorkspace page with MCQ question renders correctly 1`] = `
       <Blueprint2.Button className=\\"assessment-briefing-button\\" onClick={[Function: onClick]} text=\\"Continue\\" />
     </Blueprint2.Card>
   </Blueprint2.Dialog>
-  <Workspace controlBarProps={{...}} editorProps={{...}} editorWidth=\\"50%\\" handleEditorWidthChange={[Function: handleEditorWidthChange]} handleSideContentHeightChange={[Function: handleSideContentHeightChange]} mcq={{...}} sideContentHeight={[undefined]} sideContentProps={{...}} replProps={{...}} />
+  <Workspace controlBarProps={{...}} editorProps={[undefined]} editorWidth=\\"50%\\" handleEditorWidthChange={[Function: handleEditorWidthChange]} handleSideContentHeightChange={[Function: handleSideContentHeightChange]} mcq={{...}} sideContentHeight={[undefined]} sideContentProps={{...}} replProps={{...}} />
 </div>"
 `;
 
diff --git a/src/components/assessment/assessmentShape.ts b/src/components/assessment/assessmentShape.ts
@@ -45,6 +45,7 @@ export interface IMCQQuestion extends IQuestion {
 }
 
 export interface IQuestion {
+  answer: string | number | null
   content: string
   id: number
   library: Library
diff --git a/src/containers/PlaygroundContainer.ts b/src/containers/PlaygroundContainer.ts
@@ -25,7 +25,7 @@ import { IState } from '../reducers/states'
 const mapStateToProps: MapStateToProps<IStateProps, {}, IState> = state => ({
   activeTab: state.workspaces.playground.sideContentActiveTab,
   editorWidth: state.workspaces.playground.editorWidth,
-  editorValue: state.workspaces.playground.editorValue,
+  editorValue: state.workspaces.playground.editorValue!,
   isRunning: state.workspaces.playground.context.runtime.isRunning,
   output: state.workspaces.playground.output,
   queryString: state.playground.queryString,
diff --git a/src/containers/assessment/AssessmentWorkspaceContainer.ts b/src/containers/assessment/AssessmentWorkspaceContainer.ts
@@ -14,6 +14,7 @@ import {
   evalEditor,
   evalRepl,
   fetchAssessment,
+  submitAnswer,
   updateEditorValue,
   updateReplValue
 } from '../../actions'
@@ -70,6 +71,7 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dis
       handleReplOutputClear: () => clearReplOutput(workspaceLocation),
       handleReplValueChange: (newValue: string) => updateReplValue(newValue, workspaceLocation),
       handleResetWorkspace: () => resetWorkspace(workspaceLocation),
+      handleSave: submitAnswer,
       handleSideContentHeightChange: (heightChange: number) =>
         changeSideContentHeight(heightChange, workspaceLocation),
       handleUpdateCurrentAssessmentId: updateCurrentAssessmentId
diff --git a/src/mocks/assessmentAPI.ts b/src/mocks/assessmentAPI.ts
@@ -114,27 +114,23 @@ const mockCurveLibrary: Library = {
 
 export const mockAssessmentQuestions: Array<IProgrammingQuestion | IMCQQuestion> = [
   {
-    content: 'Hello and welcome to this assessment! This is the 0th question, using 2d runes.',
+    answer: 'display("answer1");',
+    content: 'Hello and welcome to this assessment! This is the 0th question.',
     id: 0,
-    library: mock2DRuneLibrary,
+    library: mockSoundLibrary,
     solutionTemplate: '0th question mock solution template',
     type: 'programming'
   },
   {
-    content: 'Hello and welcome to this assessment! This is the 1st question, using 3d runes',
+    answer: null,
+    content: 'Hello and welcome to this assessment! This is the 1st question.',
     id: 1,
     library: mock3DRuneLibrary,
     solutionTemplate: '1st question mock solution template',
     type: 'programming'
   },
   {
-    content: 'Hello and welcome to this assessment! This is the 2nd question, using sounds!',
-    id: 1,
-    library: mockSoundLibrary,
-    solutionTemplate: '1st question mock solution template',
-    type: 'programming'
-  },
-  {
+    answer: 3,
     content:
       'This is the 3rd question. Oddly enough, it is an MCQ question that uses the curves library!',
     choices: [
diff --git a/src/mocks/gradingAPI.ts b/src/mocks/gradingAPI.ts
@@ -89,6 +89,7 @@ const mockGrading: Grading = [
   {
     question: {
       // C is the answer
+      answer: 3,
       solution: 2,
       content:
         'Hello and welcome to this assessment! This is the 2nd question. Oddly enough, it is an MCQ question!',
diff --git a/src/reducers/states.ts b/src/reducers/states.ts
@@ -58,7 +58,7 @@ export interface IWorkspaceManagerState {
 
 interface IWorkspaceState {
   readonly context: Context
-  readonly editorValue: string
+  readonly editorValue: string | null
   readonly editorWidth: string
   readonly output: InterpreterOutput[]
   readonly replHistory: ReplHistory
@@ -186,7 +186,7 @@ export const defaultEditorValue = '// Type your program in here!'
  */
 export const createDefaultWorkspace = (location: WorkspaceLocation): IWorkspaceState => ({
   context: createContext<WorkspaceLocation>(latestSourceChapter, undefined, location),
-  editorValue: defaultEditorValue,
+  editorValue: location === WorkspaceLocations.playground ? defaultEditorValue : null,
   editorWidth: '50%',
   output: [],
   replHistory: {
diff --git a/src/sagas/backend.ts b/src/sagas/backend.ts
diff --git a/src/sagas/index.ts b/src/sagas/index.ts
diff --git a/src/utils/notification.ts b/src/utils/notification.ts

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"private": true,`
`3`	`3`	`"name": "cadet-frontend",`
`4`		`- "version": "0.1.4",`
	`4`	`+ "version": "0.1.5",`
`5`	`5`	`"scripts-info": {`
`6`	`6`	`"format": "Format source code",`
`7`	`7`	`"start": "Start the Webpack development server",`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ export type GradingQuestion = {`
`43`	`43`	`*/`
`44`	`44`	`interface IAnsweredQuestion extends IQuestion {`
`45`	`45`	`solution?: number`
`46`		`- answer?: string \| number`
	`46`	`+ answer: string \| number \| null`
`47`	`47`	`solutionTemplate?: string`
`48`	`48`	`choices?: MCQChoice[]`
`49`	`49`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,6 +45,7 @@ export interface IMCQQuestion extends IQuestion {`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`export interface IQuestion {`
	`48`	`+ answer: string \| number \| null`
`48`	`49`	`content: string`
`49`	`50`	`id: number`
`50`	`51`	`library: Library`