Refactor Assessment files naming

src/components/academy/grading/index.tsx

@@ -62,7 +62,7 @@ class Grading extends React.Component<GradingProps, State> {
     if (this.props.gradingOverviews === undefined) {
       const loadingDisplay = (
         <NonIdealState
-          className="GradingListing"
+          className="Grading"
           description="Fetching submissions..."
           visual={<Spinner large={true} />}
         />
@@ -75,7 +75,7 @@ class Grading extends React.Component<GradingProps, State> {
       )
     }
     const grid = (
-      <div className="GradingListing">
+      <div className="Grading">
         <div className="ag-grid-parent ag-theme-balham">
           <AgGridReact
             gridAutoHeight={true}

src/components/academy/index.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import { Redirect, Route, RouteComponentProps, Switch } from 'react-router'
 
 import Grading from '../../containers/academy/grading'
-import AssessmentListingContainer from '../../containers/assessment/AssessmentListingContainer'
+import AssessmentContainer from '../../containers/assessment'
 import Game from '../../containers/GameContainer'
 import { isAcademyRe } from '../../reducers/session'
 import { HistoryHelper } from '../../utils/history'
@@ -27,9 +27,9 @@ export interface IStateProps {
   historyHelper: HistoryHelper
 }
 
-const assessmentListingRenderFactory = (cat: AssessmentCategory) => (
+const assessmentRenderFactory = (cat: AssessmentCategory) => (
   routerProps: RouteComponentProps<any>
-) => <AssessmentListingContainer assessmentCategory={cat} />
+) => <AssessmentContainer assessmentCategory={cat} />
 
 const assessmentRegExp = ':assessmentId(\\d+)?/:questionId(\\d+)?'
 
@@ -42,24 +42,24 @@ export const Academy: React.SFC<IAcademyProps> = props => (
         path={`/academy/${assessmentCategoryLink(
           AssessmentCategories.Contest
         )}/${assessmentRegExp}`}
-        render={assessmentListingRenderFactory(AssessmentCategories.Contest)}
+        render={assessmentRenderFactory(AssessmentCategories.Contest)}
       />
       <Route path="/academy/game" component={Game} />
       <Route
         path={`/academy/${assessmentCategoryLink(
           AssessmentCategories.Mission
         )}/${assessmentRegExp}`}
-        render={assessmentListingRenderFactory(AssessmentCategories.Mission)}
+        render={assessmentRenderFactory(AssessmentCategories.Mission)}
       />
       <Route
         path={`/academy/${assessmentCategoryLink(AssessmentCategories.Path)}/${assessmentRegExp}`}
-        render={assessmentListingRenderFactory(AssessmentCategories.Path)}
+        render={assessmentRenderFactory(AssessmentCategories.Path)}
       />
       <Route
         path={`/academy/${assessmentCategoryLink(
           AssessmentCategories.Sidequest
         )}/${assessmentRegExp}`}
-        render={assessmentListingRenderFactory(AssessmentCategories.Sidequest)}
+        render={assessmentRenderFactory(AssessmentCategories.Sidequest)}
       />
       <Route path="/academy/grading" component={Grading} />
       <Route exact={true} path="/academy" component={dynamicRedirect(props)} />

src/components/assessment/AssessmentWorkspace.tsx

@@ -0,0 +1,171 @@
+import { Button, Card, Dialog, NonIdealState, Spinner, Text } from '@blueprintjs/core'
+import { IconNames } from '@blueprintjs/icons'
+import * as React from 'react'
+
+import { InterpreterOutput } from '../../reducers/states'
+import { history } from '../../utils/history'
+import { assessmentCategoryLink } from '../../utils/paramParseHelpers'
+import Workspace, { WorkspaceProps } from '../workspace'
+import { ControlBarProps } from '../workspace/ControlBar'
+import { SideContentProps } from '../workspace/side-content'
+import {
+  IAssessment,
+  IMCQQuestion,
+  IProgrammingQuestion,
+  IQuestion,
+  QuestionTypes
+} from './assessmentShape'
+
+export type AssessmentWorkspaceProps = DispatchProps & OwnProps & StateProps
+
+export type StateProps = {
+  activeTab: number
+  assessment?: IAssessment
+  editorValue?: string
+  editorWidth: string
+  isRunning: boolean
+  output: InterpreterOutput[]
+  replValue: string
+  sideContentHeight?: number
+}
+
+export type OwnProps = {
+  assessmentId: number
+  questionId: number
+}
+
+export type DispatchProps = {
+  handleAssessmentFetch: (assessmentId: number) => void
+  handleChangeActiveTab: (activeTab: number) => void
+  handleChapterSelect: (chapter: any, changeEvent: any) => void
+  handleEditorEval: () => void
+  handleEditorValueChange: (val: string) => void
+  handleEditorWidthChange: (widthChange: number) => void
+  handleInterruptEval: () => void
+  handleReplEval: () => void
+  handleReplOutputClear: () => void
+  handleReplValueChange: (newValue: string) => void
+  handleSideContentHeightChange: (heightChange: number) => void
+}
+
+class AssessmentWorkspace extends React.Component<
+  AssessmentWorkspaceProps,
+  { showOverlay: boolean }
+> {
+  public state = { showOverlay: false }
+
+  public componentWillMount() {
+    this.props.handleAssessmentFetch(this.props.assessmentId)
+    if (this.props.questionId === 0) {
+      this.setState({ showOverlay: true })
+    }
+  }
+
+  public render() {
+    if (this.props.assessment === undefined || this.props.assessment.questions.length === 0) {
+      return (
+        <NonIdealState
+          className="AssessmentWorkspace pt-dark"
+          description="Getting mission ready..."
+          visual={<Spinner large={true} />}
+        />
+      )
+    }
+    const overlay = (
+      <Dialog className="assessment-briefing" isOpen={this.state.showOverlay}>
+        <Card>
+          <Text> {this.props.assessment.longSummary} </Text>
+          <Button
+            className="assessment-briefing-button"
+            // tslint:disable-next-line jsx-no-lambda
+            onClick={() => this.setState({ showOverlay: false })}
+            text="Continue"
+          />
+        </Card>
+      </Dialog>
+    )
+    const question: IQuestion = this.props.assessment.questions[this.props.questionId]
+    const workspaceProps: WorkspaceProps = {
+      controlBarProps: this.controlBarProps(this.props),
+      editorProps:
+        question.type === QuestionTypes.programming
+          ? {
+              editorValue:
+                this.props.editorValue !== undefined
+                  ? this.props.editorValue
+                  : (question as IProgrammingQuestion).solutionTemplate,
+              handleEditorEval: this.props.handleEditorEval,
+              handleEditorValueChange: this.props.handleEditorValueChange
+            }
+          : undefined,
+      editorWidth: this.props.editorWidth,
+      handleEditorWidthChange: this.props.handleEditorWidthChange,
+      handleSideContentHeightChange: this.props.handleSideContentHeightChange,
+      mcq: question as IMCQQuestion,
+      sideContentHeight: this.props.sideContentHeight,
+      sideContentProps: this.sideContentProps(this.props),
+      replProps: {
+        output: this.props.output,
+        replValue: this.props.replValue,
+        handleReplEval: this.props.handleReplEval,
+        handleReplValueChange: this.props.handleReplValueChange
+      }
+    }
+    return (
+      <div className="AssessmentWorkspace pt-dark">
+        {overlay}
+        <Workspace {...workspaceProps} />
+      </div>
+    )
+  }
+
+  /** Pre-condition: IAssessment has been loaded */
+  private sideContentProps: (p: AssessmentWorkspaceProps) => SideContentProps = (
+    props: AssessmentWorkspaceProps
+  ) => ({
+    activeTab: 0,
+    handleChangeActiveTab: (aT: number) => {},
+    tabs: [
+      {
+        label: `Task ${props.questionId}`,
+        icon: IconNames.NINJA,
+        body: <Text> {props.assessment!.questions[props.questionId].content} </Text>
+      },
+      {
+        label: `${props.assessment!.category} Briefing`,
+        icon: IconNames.BRIEFCASE,
+        body: <Text> {props.assessment!.longSummary} </Text>
+      }
+    ]
+  })
+
+  /** Pre-condition: IAssessment has been loaded */
+  private controlBarProps: (p: AssessmentWorkspaceProps) => ControlBarProps = (
+    props: AssessmentWorkspaceProps
+  ) => {
+    const listingPath = `/academy/${assessmentCategoryLink(this.props.assessment!.category)}`
+    const assessmentWorkspacePath = listingPath + `/${this.props.assessment!.id.toString()}`
+    return {
+      handleChapterSelect: this.props.handleChapterSelect,
+      handleEditorEval: this.props.handleEditorEval,
+      handleInterruptEval: this.props.handleInterruptEval,
+      handleReplEval: this.props.handleReplEval,
+      handleReplOutputClear: this.props.handleReplOutputClear,
+      hasChapterSelect: false,
+      hasNextButton: this.props.questionId < this.props.assessment!.questions.length - 1,
+      hasPreviousButton: this.props.questionId > 0,
+      hasSaveButton: true,
+      hasShareButton: false,
+      hasSubmitButton: this.props.questionId === this.props.assessment!.questions.length - 1,
+      isRunning: this.props.isRunning,
+      onClickNext: () =>
+        history.push(assessmentWorkspacePath + `/${(this.props.questionId + 1).toString()}`),
+      onClickPrevious: () =>
+        history.push(assessmentWorkspacePath + `/${(this.props.questionId - 1).toString()}`),
+      onClickSubmit: () => history.push(listingPath),
+      sourceChapter: 2 // TODO dynamic library changing
+    }
+  }
+}
+
+export default AssessmentWorkspace