Expose ExternalLibrary outside Playground, record ExternaLibrary change

src/actions/__tests__/sourcecast.ts

@@ -1,3 +1,4 @@
+import { ExternalLibraryNames } from '../../components/assessment/assessmentShape';
 import {
   ICodeDelta,
   Input,
@@ -102,6 +103,8 @@ test('setSourcecastData generates correct action object', () => {
   };
   const playbackData: IPlaybackData = {
     init: {
+      chapter: 1,
+      externalLibrary: ExternalLibraryNames.NONE,
       editorValue: ''
     },
     inputs: [input]

src/actions/__tests__/sourcereel.ts

@@ -1,7 +1,8 @@
+import { ExternalLibraryNames } from '../../components/assessment/assessmentShape';
 import { ICodeDelta, Input, IPlaybackData } from '../../components/sourcecast/sourcecastShape';
 import * as actionTypes from '../actionTypes';
 import {
-  recordEditorInitValue,
+  recordInit,
   recordInput,
   saveSourcecastData,
   timerPause,
@@ -18,13 +19,17 @@ function dateIsCloseEnough(dateA: number, dateB: number) {
   return Math.abs(dateA - dateB) <= 1000;
 }
 
-test('recordEditorInitValue generates correct action object', () => {
-  const editorValue = 'Init Value';
-  const action = recordEditorInitValue(editorValue, sourcereelWorkspace);
+test('recordInit generates correct action object', () => {
+  const initData: IPlaybackData['init'] = {
+    editorValue: 'Init Value',
+    chapter: 1,
+    externalLibrary: ExternalLibraryNames.NONE
+  };
+  const action = recordInit(initData, sourcereelWorkspace);
   expect(action).toEqual({
-    type: actionTypes.RECORD_EDITOR_INIT_VALUE,
+    type: actionTypes.RECORD_INIT,
     payload: {
-      editorValue,
+      initData,
       workspaceLocation: sourcereelWorkspace
     }
   });
@@ -66,7 +71,11 @@ test('saveSourcecastData generates correct action object', () => {
   const description = 'Test Description';
   const audio = new Blob();
   const playbackData: IPlaybackData = {
-    init: { editorValue: 'Editor Init Value' },
+    init: {
+      editorValue: 'Editor Init Value',
+      chapter: 1,
+      externalLibrary: ExternalLibraryNames.NONE
+    },
     inputs: []
   };
   const action = saveSourcecastData(title, description, audio, playbackData, sourcereelWorkspace);

src/actions/__tests__/workspaces.ts

@@ -8,7 +8,7 @@ import {
   browseReplHistoryUp,
   changeEditorHeight,
   changeEditorWidth,
-  changePlaygroundExternal,
+  changeExternalLibrary,
   changeSideContentHeight,
   chapterSelect,
   clearReplInput,
@@ -18,8 +18,8 @@ import {
   evalEditor,
   evalRepl,
   evalTestcase,
+  externalLibrarySelect,
   highlightEditorLine,
-  playgroundExternalSelect,
   resetWorkspace,
   sendReplInputToOutput,
   setEditorBreakpoint,
@@ -51,13 +51,14 @@ test('browseReplHistoryUp generates correct action object', () => {
   });
 });
 
-test('changePlaygroundExternal generates correct action object', () => {
+test('changeExternalLibrary generates correct action object', () => {
   const newExternal = 'new-external-test';
-  const action = changePlaygroundExternal(newExternal);
+  const action = changeExternalLibrary(newExternal, playgroundWorkspace);
   expect(action).toEqual({
-    type: actionTypes.CHANGE_PLAYGROUND_EXTERNAL,
+    type: actionTypes.CHANGE_EXTERNAL_LIBRARY,
     payload: {
-      newExternal
+      newExternal,
+      workspaceLocation: playgroundWorkspace
     }
   });
 });
@@ -110,9 +111,9 @@ test('chapterSelect generates correct action object', () => {
   });
 });
 
-test('playgroundExternalSelect generates correct action object', () => {
+test('externalLibrarySelect generates correct action object', () => {
   const externalLibraryName = 'SOUNDS';
-  const action = playgroundExternalSelect(externalLibraryName, assessmentWorkspace);
+  const action = externalLibrarySelect(externalLibraryName, assessmentWorkspace);
   expect(action).toEqual({
     type: actionTypes.PLAYGROUND_EXTERNAL_SELECT,
     payload: {

src/actions/actionTypes.ts

@@ -35,7 +35,7 @@ export const BROWSE_REPL_HISTORY_UP = 'BROWSE_REPL_HISTORY_UP';
 export const CHANGE_EDITOR_HEIGHT = 'CHANGE_EDITOR_HEIGHT';
 export const CHANGE_EDITOR_WIDTH = 'CHANGE_EDITOR_WIDTH';
 export const CHANGE_EXEC_TIME = 'CHANGE_EXEC_TIME';
-export const CHANGE_PLAYGROUND_EXTERNAL = 'CHANGE_PLAYGROUND_EXTERNAL';
+export const CHANGE_EXTERNAL_LIBRARY = 'CHANGE_EXTERNAL_LIBRARY';
 export const CHANGE_SIDE_CONTENT_HEIGHT = 'CHANGE_SIDE_CONTENT_HEIGHT';
 export const CHAPTER_SELECT = 'CHAPTER_SELECT';
 export const CLEAR_REPL_INPUT = 'CLEAR_REPL_INPUT';
@@ -76,7 +76,7 @@ export const UPDATE_SOURCECAST_INDEX = 'UPDATE_SOURCECAST_INDEX';
 
 /** Sourcereel */
 export const RECORD_INPUT = 'RECORD_INPUT';
-export const RECORD_EDITOR_INIT_VALUE = 'RECORD_EDITOR_INIT_VALUE';
+export const RECORD_INIT = 'RECORD_INIT';
 export const SAVE_SOURCECAST_DATA = 'SAVE_SOURCECAST_DATA';
 export const TIMER_PAUSE = 'TIMER_PAUSE';
 export const TIMER_RESET = 'TIMER_RESET';

src/actions/sourcereel.ts

@@ -2,13 +2,13 @@ import { Input, IPlaybackData } from '../components/sourcecast/sourcecastShape';
 import * as actionTypes from './actionTypes';
 import { WorkspaceLocation } from './workspaces';
 
-export const recordEditorInitValue = (
-  editorValue: string,
+export const recordInit = (
+  initData: IPlaybackData['init'],
   workspaceLocation: WorkspaceLocation
 ) => ({
-  type: actionTypes.RECORD_EDITOR_INIT_VALUE,
+  type: actionTypes.RECORD_INIT,
   payload: {
-    editorValue,
+    initData,
     workspaceLocation
   }
 });

src/actions/workspaces.ts

@@ -38,11 +38,12 @@ export const browseReplHistoryUp: ActionCreator<actionTypes.IAction> = (
   payload: { workspaceLocation }
 });
 
-export const changePlaygroundExternal: ActionCreator<actionTypes.IAction> = (
-  newExternal: string
+export const changeExternalLibrary: ActionCreator<actionTypes.IAction> = (
+  newExternal: string,
+  workspaceLocation: WorkspaceLocation
 ) => ({
-  type: actionTypes.CHANGE_PLAYGROUND_EXTERNAL,
-  payload: { newExternal }
+  type: actionTypes.CHANGE_EXTERNAL_LIBRARY,
+  payload: { newExternal, workspaceLocation }
 });
 
 export const changeEditorHeight: ActionCreator<actionTypes.IAction> = (
@@ -88,7 +89,7 @@ export const chapterSelect: ActionCreator<actionTypes.IAction> = (
   }
 });
 
-export const playgroundExternalSelect: ActionCreator<actionTypes.IAction> = (
+export const externalLibrarySelect: ActionCreator<actionTypes.IAction> = (
   externalLibraryName: ExternalLibraryName,
   workspaceLocation: WorkspaceLocation
 ) => ({

src/components/Application.tsx

@@ -22,7 +22,7 @@ export interface IStateProps {
   role?: Role;
   title: string;
   name?: string;
-  currentPlaygroundExternalLibrary: ExternalLibraryName;
+  currentExternalLibrary: ExternalLibraryName;
 }
 
 export interface IDispatchProps {
@@ -31,7 +31,7 @@ export interface IDispatchProps {
   handleEditorUpdateBreakpoints: (breakpoints: string[]) => void;
   handleEnsureLibrariesLoaded: () => void;
   handleLogOut: () => void;
-  handlePlaygroundExternalSelect: (external: ExternalLibraryName) => void;
+  handleExternalLibrarySelect: (external: ExternalLibraryName) => void;
 }
 
 const assessmentRegExp = ':assessmentId(-?\\d+)?/:questionId(\\d+)?';
@@ -86,12 +86,12 @@ const toLogin = (props: IApplicationProps) => () => (
 const parsePlayground = (props: IApplicationProps) => {
   const prgrm = parsePrgrm(props);
   const chapter = parseChapter(props) || props.currentPlaygroundChapter;
-  const externalLibraryName = parseExternalLibrary(props) || props.currentPlaygroundExternalLibrary;
+  const externalLibraryName = parseExternalLibrary(props) || props.currentExternalLibrary;
   if (prgrm) {
     props.handleEditorValueChange(prgrm);
     props.handleEnsureLibrariesLoaded();
     props.handleClearContext(chapter, externalLibraryName);
-    props.handlePlaygroundExternalSelect(externalLibraryName);
+    props.handleExternalLibrarySelect(externalLibraryName);
   }
 };
 

src/components/__tests__/Application.tsx

@@ -11,12 +11,12 @@ test('Application renders correctly', () => {
     title: 'Cadet',
     currentPlaygroundChapter: 2,
     handleLogOut: () => {},
-    currentPlaygroundExternalLibrary: ExternalLibraryNames.NONE,
+    currentExternalLibrary: ExternalLibraryNames.NONE,
     handleClearContext: (chapter: number, externalLibraryName: ExternalLibraryName) => {},
     handleEditorValueChange: (val: string) => {},
     handleEditorUpdateBreakpoints: (breakpoints: string[]) => {},
     handleEnsureLibrariesLoaded: () => {},
-    handlePlaygroundExternalSelect: (externalLibraryName: ExternalLibraryName) => {}
+    handleExternalLibrarySelect: (externalLibraryName: ExternalLibraryName) => {}
   };
   const app = <Application {...props} />;
   const tree = shallow(app);

src/components/sourcecast/Sourcecast.tsx

@@ -4,6 +4,7 @@ import * as classNames from 'classnames';
 import * as React from 'react';
 
 import { InterpreterOutput } from '../../reducers/states';
+import { ExternalLibraryName } from '../assessment/assessmentShape';
 import Workspace, { WorkspaceProps } from '../workspace';
 import { SideContentTab } from '../workspace/side-content';
 import EnvVisualizer from '../workspace/side-content/EnvVisualizer';
@@ -25,6 +26,7 @@ export interface IStateProps {
   editorValue: string;
   editorHeight?: number;
   editorWidth: string;
+  externalLibraryName: string;
   breakpoints: string[];
   highlightedLines: number[][];
   isEditorAutorun: boolean;
@@ -40,7 +42,6 @@ export interface IStateProps {
   sideContentHeight?: number;
   sourcecastIndex: any;
   sourceChapter: number;
-  websocketStatus: number;
 }
 
 export interface IDispatchProps {
@@ -55,6 +56,7 @@ export interface IDispatchProps {
   handleEditorValueChange: (val: string) => void;
   handleEditorWidthChange: (widthChange: number) => void;
   handleEditorUpdateBreakpoints: (breakpoints: string[]) => void;
+  handleExternalSelect: (externalLibraryName: ExternalLibraryName) => void;
   handleFetchSourcecastIndex: () => void;
   handleInterruptEval: () => void;
   handleReplEval: () => void;
@@ -71,7 +73,6 @@ export interface IDispatchProps {
   ) => void;
   handleSetSourcecastDuration: (duration: number) => void;
   handleSetSourcecastStatus: (PlaybackStatus: PlaybackStatus) => void;
-  handleSetWebsocketStatus: (websocketStatus: number) => void;
   handleSideContentHeightChange: (heightChange: number) => void;
   handleToggleEditorAutorun: () => void;
 }
@@ -92,6 +93,9 @@ class Sourcecast extends React.Component<ISourcecastProps> {
       case 'chapterSelect':
         this.props.handleChapterSelect(inputToApply.data);
         break;
+      case 'externalLibrarySelect':
+        this.props.handleExternalSelect(inputToApply.data);
+        break;
     }
   }
 
@@ -108,14 +112,16 @@ class Sourcecast extends React.Component<ISourcecastProps> {
       isPlaying: this.props.playbackStatus === PlaybackStatus.playing,
       breakpoints: this.props.breakpoints,
       highlightedLines: this.props.highlightedLines,
-      handleEditorUpdateBreakpoints: this.props.handleEditorUpdateBreakpoints,
-      handleSetWebsocketStatus: this.props.handleSetWebsocketStatus
+      handleEditorUpdateBreakpoints: this.props.handleEditorUpdateBreakpoints
     };
     const workspaceProps: WorkspaceProps = {
       controlBarProps: {
         editorValue: this.props.editorValue,
+        externalLibraryName: this.props.externalLibraryName,
         handleChapterSelect: ({ chapter }: { chapter: number }, e: any) =>
           this.props.handleChapterSelect(chapter),
+        handleExternalSelect: ({ name }: { name: ExternalLibraryName }, e: any) =>
+          this.props.handleExternalSelect(name),
         handleEditorEval: this.props.handleEditorEval,
         handleEditorValueChange: this.props.handleEditorValueChange,
         handleInterruptEval: this.props.handleInterruptEval,
@@ -190,7 +196,9 @@ class Sourcecast extends React.Component<ISourcecastProps> {
       audioUrl: this.props.audioUrl,
       duration: this.props.playbackDuration,
       playbackData: this.props.playbackData,
-      playbackStatus: this.props.playbackStatus
+      playbackStatus: this.props.playbackStatus,
+      handleChapterSelect: this.props.handleChapterSelect,
+      handleExternalSelect: this.props.handleExternalSelect
     };
     return (
       <div className={classNames('Sourcecast', Classes.DARK)}>

src/components/sourcecast/SourcecastControlbar.tsx

@@ -2,6 +2,7 @@ import { Slider } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import * as React from 'react';
 
+import { ExternalLibraryName } from '../assessment/assessmentShape';
 import { controlButton } from '../commons';
 import {
   ICodeDelta,
@@ -95,6 +96,8 @@ class SourcecastControlbar extends React.PureComponent<
     const currentRevision = this.state.currentDeltaRevision;
     let currentTime = this.audio.current!.currentTime * 1000;
     this.props.handleEditorValueChange(playbackData.init.editorValue);
+    this.props.handleExternalSelect(playbackData.init.externalLibrary);
+    this.props.handleChapterSelect(playbackData.init.chapter);
     const codeDeltasToApply = playbackData.inputs
       .filter(
         deltaWithTime => deltaWithTime.time <= currentTime && deltaWithTime.type === 'codeDelta'
@@ -189,6 +192,8 @@ export interface ISourcecastControlbarProps {
   duration: number;
   playbackData: IPlaybackData;
   playbackStatus: PlaybackStatus;
+  handleChapterSelect: (chapter: number) => void;
+  handleExternalSelect: (name: ExternalLibraryName) => void;
 }
 
 export interface ISourcecastControlbarState {