Store library externals in state

src/actions/actionTypes.ts

@@ -12,34 +12,33 @@ export const CHANGE_QUERY_STRING = 'CHANGE_QUERY_STRING'
 export const GENERATE_LZ_STRING = 'GENERATE_LZ_STRING'
 
 /** Interpreter */
-export const HANDLE_CONSOLE_LOG = 'HANDLE_CONSOLE_LOG'
-export const EVAL_INTERPRETER_SUCCESS = 'EVAL_INTERPRETER_SUCCESS'
-export const EVAL_INTERPRETER_ERROR = 'EVAL_INTERPRETER_ERROR'
 export const BEGIN_INTERRUPT_EXECUTION = 'BEGIN_INTERRUPT_EXECUTION'
 export const END_INTERRUPT_EXECUTION = 'END_INTERRUPT_EXECUTION'
+export const EVAL_INTERPRETER_ERROR = 'EVAL_INTERPRETER_ERROR'
+export const EVAL_INTERPRETER_SUCCESS = 'EVAL_INTERPRETER_SUCCESS'
+export const HANDLE_CONSOLE_LOG = 'HANDLE_CONSOLE_LOG'
 
 /** Workspace */
 export const CHANGE_ACTIVE_TAB = 'CHANGE_ACTIVE_TAB'
-export const CHANGE_CHAPTER = 'CHANGE_CHAPTER'
-export const CHANGE_LIBRARY = 'CHANGE_LIBRARY'
 export const CHANGE_EDITOR_WIDTH = 'CHANGE_EDITOR_WIDTH'
+export const CHANGE_PLAYGROUND_EXTERNAL = 'CHANGE_PLAYGROUND_EXTERNAL'
 export const CHANGE_SIDE_CONTENT_HEIGHT = 'CHANGE_SIDE_CONTENT_HEIGHT'
 export const CHAPTER_SELECT = 'CHAPTER_SELECT'
-export const LIBRARY_SELECT = 'LIBRARY_SELECT'
+export const CLEAR_CONTEXT = 'CLEAR_CONTEXT'
 export const CLEAR_REPL_INPUT = 'CLEAR_REPL_INPUT'
 export const CLEAR_REPL_OUTPUT = 'CLEAR_REPL_OUTPUT'
-export const CLEAR_CONTEXT = 'CLEAR_CONTEXT'
 export const EVAL_EDITOR = 'EVAL_EDITOR'
 export const EVAL_REPL = 'EVAL_REPL'
-export const UPDATE_EDITOR_VALUE = 'UPDATE_EDITOR_VALUE'
-export const UPDATE_REPL_VALUE = 'UPDATE_REPL_VALUE'
-export const SEND_REPL_INPUT_TO_OUTPUT = 'SEND_REPL_INPUT_TO_OUTPUT'
+export const PLAYGROUND_EXTERNAL_SELECT = 'PLAYGROUND_EXTERNAL_SELECT '
 export const RESET_ASSESSMENT_WORKSPACE = 'RESET_ASSESSMENT_WORKSPACE'
+export const SAVE_GRADING_INPUT = 'SAVE_GRADING_INPUT'
+export const SEND_REPL_INPUT_TO_OUTPUT = 'SEND_REPL_INPUT_TO_OUTPUT'
 export const UPDATE_CURRENT_ASSESSMENT_ID = 'UPDATE_CURRENT_ASSESSMENT_ID'
 export const UPDATE_CURRENT_SUBMISSION_ID = 'UPDATE_CURRENT_SUBMISSION_ID'
+export const UPDATE_EDITOR_VALUE = 'UPDATE_EDITOR_VALUE'
 export const UPDATE_GRADING_COMMENTS_VALUE = 'UPDATE_GRADING_COMMENTS_VALUE'
 export const UPDATE_GRADING_XP = 'UPDATE_GRADING_XP'
-export const SAVE_GRADING_INPUT = 'SAVE_GRADING_INPUT'
+export const UPDATE_REPL_VALUE = 'UPDATE_REPL_VALUE'
 
 /** Session */
 export const FETCH_ANNOUNCEMENTS = 'FETCH_ANNOUNCEMENTS'

src/actions/workspaces.ts

@@ -25,20 +25,11 @@ export const changeActiveTab: ActionCreator<actionTypes.IAction> = (
   payload: { activeTab, workspaceLocation }
 })
 
-export const changeChapter: ActionCreator<actionTypes.IAction> = (
-  newChapter: number,
-  workspaceLocation: WorkspaceLocation
-) => ({
-  type: actionTypes.CHANGE_CHAPTER,
-  payload: { newChapter, workspaceLocation }
-})
-
-export const changeLibrary: ActionCreator<actionTypes.IAction> = (
-  newLibrary: string,
-  workspaceLocation: WorkspaceLocation
+export const changePlaygroundExternal: ActionCreator<actionTypes.IAction> = (
+  newExternal: string
 ) => ({
-  type: actionTypes.CHANGE_LIBRARY,
-  payload: { newLibrary, workspaceLocation }
+  type: actionTypes.CHANGE_PLAYGROUND_EXTERNAL,
+  payload: { newExternal }
 })
 
 export const changeEditorWidth: ActionCreator<actionTypes.IAction> = (
@@ -69,21 +60,29 @@ export const chapterSelect: ActionCreator<actionTypes.IAction> = (
   }
 })
 
-export const librarySelect: ActionCreator<actionTypes.IAction> = (
-  library,
+export const playgroundExternalSelect: ActionCreator<actionTypes.IAction> = (
+  external,
   changeEvent,
   workspaceLocation: WorkspaceLocation
 ) => ({
-  type: actionTypes.LIBRARY_SELECT,
+  type: actionTypes.PLAYGROUND_EXTERNAL_SELECT,
   payload: {
-    library: library.displayName,
+    external: external.displayName,
     workspaceLocation
   }
 })
 
-export const clearContext = (workspaceLocation: WorkspaceLocation) => ({
+export const clearContext = (
+  chapter: number,
+  externals: string[],
+  workspaceLocation: WorkspaceLocation
+) => ({
   type: actionTypes.CLEAR_CONTEXT,
-  payload: { workspaceLocation }
+  payload: {
+    workspaceLocation,
+    chapter,
+    externals
+  }
 })
 
 export const clearReplInput = (workspaceLocation: WorkspaceLocation) => ({
@@ -134,12 +133,8 @@ export const sendReplInputToOutput: ActionCreator<actionTypes.IAction> = (
   }
 })
 
-export const resetAssessmentWorkspace = (chapter: number, externals: string[]) => ({
-  type: actionTypes.RESET_ASSESSMENT_WORKSPACE,
-  payload: {
-    chapter,
-    externals
-  }
+export const resetAssessmentWorkspace = () => ({
+  type: actionTypes.RESET_ASSESSMENT_WORKSPACE
 })
 
 export const updateCurrentAssessmentId = (assessmentId: number, questionId: number) => ({

src/components/Application.tsx

@@ -11,15 +11,19 @@ import { Role, sourceChapters } from '../reducers/states'
 import NavigationBar from './NavigationBar'
 import NotFound from './NotFound'
 
-export interface IApplicationProps extends IDispatchProps, RouteComponentProps<{}> {
+export interface IApplicationProps extends IDispatchProps, IStateProps, RouteComponentProps<{}> {}
+
+export interface IStateProps {
   title: string
   accessToken?: string
   role?: Role
   username?: string
+  currentPlaygroundChapter: number
+  currentPlaygroundExternals: string[]
 }
 
 export interface IDispatchProps {
-  handleChangeChapter: (chapter: number) => void
+  handleClearContext: (chapter: number, externals: string[]) => void
   handleEditorValueChange: (val: string) => void
 }
 
@@ -66,8 +70,9 @@ const parsePlayground = (props: IApplicationProps) => {
   if (prgrm) {
     props.handleEditorValueChange(prgrm)
   }
+  /** Changes the chapter, retains the externals. */
   if (lib) {
-    props.handleChangeChapter(lib)
+    props.handleClearContext(lib, props.currentPlaygroundExternals)
   }
 }
 

src/components/Playground.tsx

@@ -31,7 +31,7 @@ export interface IDispatchProps {
   handleEditorWidthChange: (widthChange: number) => void
   handleGenerateLz: () => void
   handleInterruptEval: () => void
-  handleLibrarySelect: (library: any, changeEvent: any) => void
+  handleExternalSelect: (external: any, changeEvent: any) => void
   handleReplEval: () => void
   handleReplOutputClear: () => void
   handleReplValueChange: (newValue: string) => void
@@ -56,8 +56,9 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
   public render() {
     const workspaceProps: WorkspaceProps = {
       controlBarProps: {
+        externalLibrary: this.props.externalLibrary,
         handleChapterSelect: this.props.handleChapterSelect,
-        handleLibrarySelect: this.props.handleLibrarySelect,
+        handleExternalSelect: this.props.handleExternalSelect,
         handleEditorEval: this.props.handleEditorEval,
         handleGenerateLz: this.props.handleGenerateLz,
         handleInterruptEval: this.props.handleInterruptEval,
@@ -71,8 +72,7 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
         hasShareButton: true,
         isRunning: this.props.isRunning,
         queryString: this.props.queryString,
-        sourceChapter: this.props.sourceChapter,
-        externalLibrary: this.props.externalLibrary
+        sourceChapter: this.props.sourceChapter
       },
       editorProps: {
         editorValue: this.props.editorValue,

src/components/__tests__/Application.tsx

@@ -8,7 +8,9 @@ test('Application renders correctly', () => {
   const props: IApplicationProps = {
     ...mockRouterProps('/academy', {}),
     title: 'Cadet',
-    handleChangeChapter: (chp: any) => {},
+    currentPlaygroundChapter: 2,
+    currentPlaygroundExternals: [],
+    handleClearContext: (chapter: number, externals: string[]) => {},
     handleEditorValueChange: (val: string) => {}
   }
   const app = <Application {...props} />

src/components/__tests__/Playground.tsx

@@ -16,7 +16,7 @@ const baseProps = {
   output: [],
   replValue: '',
   handleChapterSelect: (chapter: any, e: any) => {},
-  handleLibrarySelect: (library: any, e: any) => {},
+  handleExternalSelect: (external: any, e: any) => {},
   handleChangeActiveTab: (n: number) => {},
   handleEditorEval: () => {},
   handleEditorValueChange: () => {},

src/components/academy/grading/GradingWorkspace.tsx

@@ -40,15 +40,15 @@ export type DispatchProps = {
   handleGradingFetch: (submissionId: number) => void
   handleChangeActiveTab: (activeTab: number) => void
   handleChapterSelect: (chapter: any, changeEvent: any) => void
+  handleClearContext: (chapter: number, externals: string[]) => void
   handleEditorEval: () => void
   handleEditorValueChange: (val: string) => void
   handleEditorWidthChange: (widthChange: number) => void
   handleInterruptEval: () => void
   handleReplEval: () => void
   handleReplOutputClear: () => void
   handleReplValueChange: (newValue: string) => void
-  /** Resetting the Assessment Workspace as this is the part of state Grading uses. */
-  handleResetAssessmentWorkspace: (chapter: number, externals: string[]) => void
+  handleResetAssessmentWorkspace: () => void
   handleSideContentHeightChange: (heightChange: number) => void
   handleUpdateCurrentSubmissionId: (submissionId: number, questionId: number) => void
 }
@@ -117,8 +117,6 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
   /**
    * 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: GradingWorkspaceProps) {
     /* Don't reset workspace if grading not fetched yet. */
@@ -137,7 +135,8 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
       const chapter = this.props.grading[questionId].question.library.chapter
       const externals = this.props.grading[questionId].question.library.externals
       this.props.handleUpdateCurrentSubmissionId(submissionId, questionId)
-      this.props.handleResetAssessmentWorkspace(chapter, externals)
+      this.props.handleResetAssessmentWorkspace()
+      this.props.handleClearContext(chapter, externals)
     }
   }
 

src/components/assessment/AssessmentWorkspace.tsx

@@ -42,14 +42,15 @@ export type DispatchProps = {
   handleAssessmentFetch: (assessmentId: number) => void
   handleChangeActiveTab: (activeTab: number) => void
   handleChapterSelect: (chapter: any, changeEvent: any) => void
+  handleClearContext: (chapter: number, externals: string[]) => void
   handleEditorEval: () => void
   handleEditorValueChange: (val: string) => void
   handleEditorWidthChange: (widthChange: number) => void
   handleInterruptEval: () => void
   handleReplEval: () => void
   handleReplOutputClear: () => void
   handleReplValueChange: (newValue: string) => void
-  handleResetAssessmentWorkspace: (chapter: number, externals: string[]) => void
+  handleResetAssessmentWorkspace: () => void
   handleSideContentHeightChange: (heightChange: number) => void
   handleUpdateCurrentAssessmentId: (assessmentId: number, questionId: number) => void
 }
@@ -159,7 +160,8 @@ class AssessmentWorkspace extends React.Component<
       const chapter = this.props.assessment.questions[questionId].library.chapter
       const externals = this.props.assessment.questions[questionId].library.externals
       this.props.handleUpdateCurrentAssessmentId(assessmentId, questionId)
-      this.props.handleResetAssessmentWorkspace(chapter, externals)
+      this.props.handleResetAssessmentWorkspace()
+      this.props.handleClearContext(chapter, externals)
     }
   }
 

src/components/assessment/__tests__/AssessmentWorkspace.tsx

@@ -12,6 +12,7 @@ const defaultProps: AssessmentWorkspaceProps = {
   handleAssessmentFetch: (assessmentId: number) => {},
   handleChangeActiveTab: (activeTab: number) => {},
   handleChapterSelect: (chapter: any, changeEvent: any) => {},
+  handleClearContext: (chapter: number, externals: string[]) => {},
   handleEditorEval: () => {},
   handleEditorValueChange: (val: string) => {},
   handleEditorWidthChange: (widthChange: number) => {},

src/components/workspace/ControlBar.tsx

@@ -19,7 +19,7 @@ export type ControlBarProps = {
   sourceChapter: number
   externalLibrary?: string
   handleChapterSelect?: (i: IChapter, e: React.ChangeEvent<HTMLSelectElement>) => void
-  handleLibrarySelect?: (i: ILibrary, e: React.ChangeEvent<HTMLSelectElement>) => void
+  handleExternalSelect?: (i: IExternal, e: React.ChangeEvent<HTMLSelectElement>) => void
   handleEditorEval: () => void
   handleGenerateLz?: () => void
   handleInterruptEval: () => void
@@ -37,11 +37,11 @@ interface IChapter {
 }
 
 /**
- * Defined for displaying a library.
+ * Defined for displaying an external library.
  * @see Library under assessmentShape.ts for
  *   the definition of a Library in an assessment.
  */
-interface ILibrary {
+interface IExternal {
   key: number
   displayName: string
   externals: string[]
@@ -118,14 +118,14 @@ class ControlBar extends React.PureComponent<ControlBarProps, {}> {
     const chapterSelectButton = this.props.hasChapterSelect
       ? chapterSelect(this.props.sourceChapter, this.props.handleChapterSelect)
       : undefined
-    const librarySelectButton =
+    const externalSelectButton =
       this.props.hasChapterSelect && this.props.externalLibrary !== undefined
-        ? librarySelect(this.props.externalLibrary, this.props.handleLibrarySelect)
+        ? externalSelect(this.props.externalLibrary, this.props.handleExternalSelect)
         : undefined
     return (
       <div className="ControlBar_editor pt-button-group">
         {this.props.isRunning ? stopButton : runButton} {saveButton}
-        {shareButton} {chapterSelectButton} {librarySelectButton}
+        {shareButton} {chapterSelectButton} {externalSelectButton}
       </div>
     )
   }
@@ -201,31 +201,31 @@ const chapterRenderer: ItemRenderer<IChapter> = (chap, { handleClick, modifiers,
   <MenuItem active={false} key={chap.chapter} onClick={handleClick} text={chap.displayName} />
 )
 
-const libraries = Array.from(externalLibraries.entries()).map((entry, index) => ({
+const externals = Array.from(externalLibraries.entries()).map((entry, index) => ({
   displayName: entry[0],
   key: index,
   externals: entry[1]
 }))
 
-const librarySelect = (
-  currentLibrary: string,
-  handleSelect = (i: ILibrary, e: React.ChangeEvent<HTMLSelectElement>) => {}
+const externalSelect = (
+  currentExternal: string,
+  handleSelect = (i: IExternal, e: React.ChangeEvent<HTMLSelectElement>) => {}
 ) => (
-  <LibrarySelectComponent
+  <ExternalSelectComponent
     className="pt-minimal"
-    items={libraries}
+    items={externals}
     onItemSelect={handleSelect}
-    itemRenderer={libraryRenderer}
+    itemRenderer={externalRenderer}
     filterable={false}
   >
-    <Button className="pt-minimal" text={currentLibrary} rightIcon="double-caret-vertical" />
-  </LibrarySelectComponent>
+    <Button className="pt-minimal" text={currentExternal} rightIcon="double-caret-vertical" />
+  </ExternalSelectComponent>
 )
 
-const LibrarySelectComponent = Select.ofType<ILibrary>()
+const ExternalSelectComponent = Select.ofType<IExternal>()
 
-const libraryRenderer: ItemRenderer<ILibrary> = (lib, { handleClick, modifiers, query }) => (
-  <MenuItem active={false} key={lib.key} onClick={handleClick} text={lib.displayName} />
+const externalRenderer: ItemRenderer<IExternal> = (external, { handleClick, modifiers, query }) => (
+  <MenuItem active={false} key={external.key} onClick={handleClick} text={external.displayName} />
 )
 
 export default ControlBar