Fix 0-based task number (#370)

* Use typescript tuple type for question progress

* Use questionProgress prop in workspace parents

* Use questionProgress in ControlBar

* Revert ControlBarProps order

This was causing problems with the order of private properties (some
tslint thing)

This reverts commit f278e6e.

* Fix props order

* Fix 0-index usage

* Format and update tests

src/components/Playground.tsx

@@ -80,9 +80,6 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
  public render() {
  const workspaceProps: WorkspaceProps = {
  controlBarProps: {
- hasAssessment: false,
- currentQuestion: 0,
- assessmentLength: 0,
  externalLibraryName: this.props.externalLibraryName,
  handleChapterSelect: ({ chapter }: { chapter: number }, e: any) =>
  this.props.handleChapterSelect(chapter),
@@ -98,6 +95,7 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
  hasShareButton: true,
  isRunning: this.props.isRunning,
  queryString: this.props.queryString,
+ questionProgress: null,
  sourceChapter: this.props.sourceChapter
  },
  editorProps: {

src/components/academy/grading/GradingWorkspace.tsx

@@ -198,7 +198,7 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
  )
  },
  {
- label: `Task ${questionId}`,
+ label: `Task ${questionId + 1}`,
  icon: IconNames.NINJA,
  body: <Markdown content={props.grading![questionId].question.content} />
  }
@@ -213,9 +213,6 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
  const listingPath = `/academy/grading`
  const gradingWorkspacePath = listingPath + `/${this.props.submissionId}`
  return {
- hasAssessment: true,
- currentQuestion: questionId + 1,
- assessmentLength: this.props.grading!.length,
  handleChapterSelect: this.props.handleChapterSelect,
  handleEditorEval: this.props.handleEditorEval,
  handleInterruptEval: this.props.handleInterruptEval,
@@ -228,6 +225,7 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
  onClickNext: () => history.push(gradingWorkspacePath + `/${(questionId + 1).toString()}`),
  onClickPrevious: () => history.push(gradingWorkspacePath + `/${(questionId - 1).toString()}`),
  onClickReturn: () => history.push(listingPath),
+ questionProgress: [questionId + 1, this.props.grading!.length],
  sourceChapter: this.props.grading![questionId].question.library.chapter
  }
  }

src/components/assessment/AssessmentWorkspace.tsx

@@ -211,7 +211,7 @@ class AssessmentWorkspace extends React.Component<
  ) => {
  const tabs = [
  {
- label: `Task ${questionId}`,
+ label: `Task ${questionId + 1}`,
  icon: IconNames.NINJA,
  body: <Markdown content={props.assessment!.questions[questionId].content} />
  },
@@ -253,9 +253,6 @@ class AssessmentWorkspace extends React.Component<
  const listingPath = `/academy/${assessmentCategoryLink(this.props.assessment!.category)}`
  const assessmentWorkspacePath = listingPath + `/${this.props.assessment!.id.toString()}`
  return {
- hasAssessment: true,
- currentQuestion: questionId + 1,
- assessmentLength: this.props.assessment!.questions.length,
  handleChapterSelect: this.props.handleChapterSelect,
  handleEditorEval: this.props.handleEditorEval,
  handleInterruptEval: this.props.handleInterruptEval,
@@ -277,6 +274,7 @@ class AssessmentWorkspace extends React.Component<
  this.props.assessment!.questions[questionId].id,
  this.props.editorValue!
  ),
+ questionProgress: [questionId + 1, this.props.assessment!.questions.length],
  sourceChapter: this.props.assessment!.questions[questionId].library.chapter
  }
  }

src/components/assessment/__tests__/__snapshots__/index.tsx.snap

@@ -136,7 +136,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
  <path d=\\"M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 0 0 1.42-1.42L9 7.59z\\" fillRule=\\"evenodd\\" />
  </svg>
  </Blueprint2.Icon>
- Opens at: 17th June, 22:24
+ Opens at: 18th June, 13:24
  </div>
  </Text>
  </div>
@@ -230,7 +230,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
  <path d=\\"M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 0 0 1.42-1.42L9 7.59z\\" fillRule=\\"evenodd\\" />
  </svg>
  </Blueprint2.Icon>
- Due: 17th June, 22:24
+ Due: 18th June, 13:24
  </div>
  </Text>
  <NavLink to=\\"/academy/missions/0/0\\" activeClassName=\\"active\\" ariaCurrent=\\"true\\">
@@ -326,7 +326,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
  <path d=\\"M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 0 0 1.42-1.42L9 7.59z\\" fillRule=\\"evenodd\\" />
  </svg>
  </Blueprint2.Icon>
- Due: 17th June, 22:24
+ Due: 18th June, 13:24
  </div>
  </Text>
  <NavLink to=\\"/academy/missions/1/0\\" activeClassName=\\"active\\" ariaCurrent=\\"true\\">
@@ -422,7 +422,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
  <path d=\\"M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 0 0 1.42-1.42L9 7.59z\\" fillRule=\\"evenodd\\" />
  </svg>
  </Blueprint2.Icon>
- Due: 17th June, 22:24
+ Due: 18th June, 13:24
  </div>
  </Text>
  <NavLink to=\\"/academy/quests/2/0\\" activeClassName=\\"active\\" ariaCurrent=\\"true\\">
@@ -626,7 +626,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
  <path d=\\"M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 0 0 1.42-1.42L9 7.59z\\" fillRule=\\"evenodd\\" />
  </svg>
  </Blueprint2.Icon>
- Opens at: 17th June, 22:24
+ Opens at: 18th June, 13:24
  </div>
  </Text>
  <NavLink to=\\"/academy/missions/0/0\\" activeClassName=\\"active\\" ariaCurrent=\\"true\\">
@@ -744,7 +744,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
  <path d=\\"M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 0 0 1.42-1.42L9 7.59z\\" fillRule=\\"evenodd\\" />
  </svg>
  </Blueprint2.Icon>
- Due: 17th June, 22:24
+ Due: 18th June, 13:24
  </div>
  </Text>
  <NavLink to=\\"/academy/missions/0/0\\" activeClassName=\\"active\\" ariaCurrent=\\"true\\">
@@ -840,7 +840,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
  <path d=\\"M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 0 0 1.42-1.42L9 7.59z\\" fillRule=\\"evenodd\\" />
  </svg>
  </Blueprint2.Icon>
- Due: 17th June, 22:24
+ Due: 18th June, 13:24
  </div>
  </Text>
  <NavLink to=\\"/academy/missions/1/0\\" activeClassName=\\"active\\" ariaCurrent=\\"true\\">
@@ -936,7 +936,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
  <path d=\\"M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 0 0 1.42-1.42L9 7.59z\\" fillRule=\\"evenodd\\" />
  </svg>
  </Blueprint2.Icon>
- Due: 17th June, 22:24
+ Due: 18th June, 13:24
  </div>
  </Text>
  <NavLink to=\\"/academy/quests/2/0\\" activeClassName=\\"active\\" ariaCurrent=\\"true\\">

src/components/workspace/ControlBar.tsx

@@ -9,25 +9,27 @@ import { sourceChapters } from '../../reducers/states'
 import { ExternalLibraryName } from '../assessment/assessmentShape'
 import { controlButton } from '../commons'
 
+/**
+ * @prop questionProgress a tuple of (current question number, question length) where
+ * the current question number is 1-based.
+ */
 export type ControlBarProps = {
- hasAssessment: boolean
- currentQuestion: number
- assessmentLength: number
- hasChapterSelect: boolean
- hasSaveButton: boolean
- hasShareButton: boolean
- hasUnsavedChanges?: boolean
- isRunning: boolean
  queryString?: string
+ questionProgress: [number, number] | null
  sourceChapter: number
  externalLibraryName?: string
  handleChapterSelect?: (i: IChapter, e: React.ChangeEvent<HTMLSelectElement>) => void
- handleExternalSelect?: (i: IExternal, e: React.ChangeEvent<HTMLSelectElement>) => void
  handleEditorEval: () => void
+ handleExternalSelect?: (i: IExternal, e: React.ChangeEvent<HTMLSelectElement>) => void
  handleGenerateLz?: () => void
  handleInterruptEval: () => void
  handleReplEval: () => void
  handleReplOutputClear: () => void
+ hasChapterSelect: boolean
+ hasSaveButton: boolean
+ hasShareButton: boolean
+ hasUnsavedChanges?: boolean
+ isRunning: boolean
  onClickNext?(): any
  onClickPrevious?(): any
  onClickReturn?(): any
@@ -52,9 +54,6 @@ interface IExternal {
 
 class ControlBar extends React.PureComponent<ControlBarProps, {}> {
  public static defaultProps: Partial<ControlBarProps> = {
- hasAssessment: false,
- currentQuestion: 0,
- assessmentLength: 0,
  hasChapterSelect: false,
  hasSaveButton: false,
  hasShareButton: true,
@@ -137,9 +136,9 @@ class ControlBar extends React.PureComponent<ControlBarProps, {}> {
  }
 
  private flowControl() {
- const questionView = this.props.hasAssessment
+ const questionView = this.props.questionProgress
  ? controlButton(
- `Question ${this.props.currentQuestion} of ${this.props.assessmentLength} `,
+ `Question ${this.props.questionProgress[0]} of ${this.props.questionProgress[1]} `,
  null,
  null,
  {},
@@ -185,15 +184,20 @@ class ControlBar extends React.PureComponent<ControlBarProps, {}> {
  }
 
  private hasNextButton() {
- return this.props.hasAssessment && this.props.currentQuestion < this.props.assessmentLength
+ return (
+ this.props.questionProgress && this.props.questionProgress[0] < this.props.questionProgress[1]
+ )
  }
 
  private hasPreviousButton() {
- return this.props.hasAssessment && this.props!.currentQuestion > 0
+ return this.props.questionProgress && this.props.questionProgress[0] > 0
  }
 
  private hasReturnButton() {
- return this.props.hasAssessment && this.props.currentQuestion === this.props.assessmentLength
+ return (
+ this.props.questionProgress &&
+ this.props.questionProgress[0] === this.props.questionProgress[1]
+ )
  }
 }