Allow external libraries to be shared (#235)

* Rename parseLib -> parseChapter

* Update test file

* Change container to pass in correct props

- externalLibrary prop
- correct dispatch

* Add placeholder for parsing external library

* Fix import order

* Add failsafe for illegal library name

* Scaffold parsing function

And moved checking to component instead

* Fix "resetWebGl is not a function" error

This is solved by accessing the function getReadyWebGLForCanvas right
when we need it.

* Make Application a Component

The call to parsePlayground, that causes state changes, should be done
after mounting

* Change playgroundExternalSelect definition

There is no need for extra parameters that go unused

* Add handlePlaygroundExternalSelect to Application

* Refactor handleExternalSelect usage

* Change handleExternalSelect usage in container

* Add delay to allow loading of library .js files

To be replaced with a race condition (worst case, 5 seconds and fail
message)

* Format files

* Change chapterSelect definition

* Change handleChapterSelect in Playground

* Format file

* Update Application test

* Add condition and comment for delay

* Format file

* Add function to check getReadyWebGLForCanvas

* Format files

* Fix rebase errors

* Add ENSURE_LIBRARIES_LOADED action and saga

The action is to be used by Application, before clear context is called.
This is when the libraries might not be loaded before clear context is
called. The checkWebGLAvailable function has also been abstracted to
be used by both ENSURE_LIBRARIES_LOADED and CLEAR_CONTEXT

* Use ensureLibrariesLoaded in component

* Update comments

* Remove all() usage

and update the docs a bit more

* Format saga

Author: remo5000

src/actions/actionTypes.ts

@@ -32,6 +32,7 @@ export const CHAPTER_SELECT = 'CHAPTER_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 ENSURE_LIBRARIES_LOADED = 'ENSURE_LIBRARIES_LOADED'
 export const EVAL_EDITOR = 'EVAL_EDITOR'
 export const EVAL_REPL = 'EVAL_REPL'
 export const PLAYGROUND_EXTERNAL_SELECT = 'PLAYGROUND_EXTERNAL_SELECT '

src/actions/workspaces.ts

@@ -1,6 +1,6 @@
 import { ActionCreator } from 'redux'
 
-import { Library } from '../components/assessment/assessmentShape'
+import { ExternalLibraryName, Library } from '../components/assessment/assessmentShape'
 import { IWorkspaceState } from '../reducers/states'
 import * as actionTypes from './actionTypes'
 
@@ -68,25 +68,23 @@ export const changeSideContentHeight: ActionCreator<actionTypes.IAction> = (
 })
 
 export const chapterSelect: ActionCreator<actionTypes.IAction> = (
-  chapter,
-  changeEvent,
+  chapter: number,
   workspaceLocation: WorkspaceLocation
 ) => ({
   type: actionTypes.CHAPTER_SELECT,
   payload: {
-    chapter: chapter.chapter,
+    chapter,
     workspaceLocation
   }
 })
 
 export const playgroundExternalSelect: ActionCreator<actionTypes.IAction> = (
-  external,
-  changeEvent,
+  externalLibraryName: ExternalLibraryName,
   workspaceLocation: WorkspaceLocation
 ) => ({
   type: actionTypes.PLAYGROUND_EXTERNAL_SELECT,
   payload: {
-    externalLibraryName: external.name,
+    externalLibraryName,
     workspaceLocation
   }
 })
@@ -117,6 +115,10 @@ export const clearReplOutput = (workspaceLocation: WorkspaceLocation) => ({
   payload: { workspaceLocation }
 })
 
+export const ensureLibrariesLoaded = () => ({
+  type: actionTypes.ENSURE_LIBRARIES_LOADED
+})
+
 export const evalEditor = (workspaceLocation: WorkspaceLocation) => ({
   type: actionTypes.EVAL_EDITOR,
   payload: { workspaceLocation }

src/components/Application.tsx

@@ -8,6 +8,7 @@ import Announcements from '../containers/AnnouncementsContainer'
 import Login from '../containers/LoginContainer'
 import Playground from '../containers/PlaygroundContainer'
 import { Role, sourceChapters } from '../reducers/states'
+import { ExternalLibraryName, ExternalLibraryNames } from './assessment/assessmentShape'
 import NavigationBar from './NavigationBar'
 import NotFound from './NotFound'
 
@@ -16,44 +17,50 @@ export interface IApplicationProps extends IDispatchProps, IStateProps, RouteCom
 export interface IStateProps {
   accessToken?: string
   currentPlaygroundChapter: number
-  currentPlaygroundExternalSymbols: string[]
   role?: Role
   title: string
   username?: string
+  currentPlaygroundExternalLibrary: ExternalLibraryName
 }
 
 export interface IDispatchProps {
-  handleClearContext: (chapter: number, symbols: string[]) => void
+  handleClearContext: (chapter: number, externalLibraryName: ExternalLibraryName) => void
   handleEditorValueChange: (val: string) => void
+  handleEnsureLibrariesLoaded: () => void
   handleLogOut: () => void
+  handlePlaygroundExternalSelect: (external: ExternalLibraryName) => void
 }
 
-const Application: React.SFC<IApplicationProps> = props => {
-  const redirectToNews = () => <Redirect to="/news" />
-
-  parsePlayground(props)
+class Application extends React.Component<IApplicationProps, {}> {
+  public componentDidMount() {
+    parsePlayground(this.props)
+  }
 
-  return (
-    <div className="Application">
-      <NavigationBar
-        handleLogOut={props.handleLogOut}
-        role={props.role}
-        username={props.username}
-        title={props.title}
-      />
-      <div className="Application__main">
-        <Switch>
-          <Route path="/academy" component={toAcademy(props)} />
-          <Route path="/news" component={Announcements} />
-          <Route path="/material" component={Announcements} />
-          <Route path="/playground" component={Playground} />
-          <Route path="/login" render={toLogin(props)} />
-          <Route exact={true} path="/" render={redirectToNews} />
-          <Route component={NotFound} />
-        </Switch>
+  public render() {
+    return (
+      <div className="Application">
+        <NavigationBar
+          handleLogOut={this.props.handleLogOut}
+          role={this.props.role}
+          username={this.props.username}
+          title={this.props.title}
+        />
+        <div className="Application__main">
+          <Switch>
+            <Route path="/academy" component={toAcademy(this.props)} />
+            <Route path="/news" component={Announcements} />
+            <Route path="/material" component={Announcements} />
+            <Route path="/playground" component={Playground} />
+            <Route path="/login" render={toLogin(this.props)} />
+            <Route exact={true} path="/" render={this.redirectToNews} />
+            <Route component={NotFound} />
+          </Switch>
+        </div>
       </div>
-    </div>
-  )
+    )
+  }
+
+  private redirectToNews = () => <Redirect to="/news" />
 }
 
 /**
@@ -72,13 +79,13 @@ const toLogin = (props: IApplicationProps) => () => (
 
 const parsePlayground = (props: IApplicationProps) => {
   const prgrm = parsePrgrm(props)
-  const lib = parseLib(props)
+  const chapter = parseChapter(props) || props.currentPlaygroundChapter
+  const externalLibraryName = parseExternalLibrary(props) || props.currentPlaygroundExternalLibrary
   if (prgrm) {
     props.handleEditorValueChange(prgrm)
-  }
-  /** Changes the chapter, retains the external symbols. */
-  if (lib) {
-    props.handleClearContext(lib, props.currentPlaygroundExternalSymbols)
+    props.handleEnsureLibrariesLoaded()
+    props.handleClearContext(chapter, externalLibraryName)
+    props.handlePlaygroundExternalSelect(externalLibraryName)
   }
 }
 
@@ -89,10 +96,15 @@ const parsePrgrm = (props: RouteComponentProps<{}>) => {
   return program !== undefined ? decompressFromEncodedURIComponent(program) : undefined
 }
 
-const parseLib = (props: RouteComponentProps<{}>) => {
-  const libQuery = qs.parse(props.location.hash).lib
-  const lib = libQuery === undefined ? NaN : parseInt(libQuery, 10)
-  return sourceChapters.includes(lib) ? lib : undefined
+const parseChapter = (props: RouteComponentProps<{}>) => {
+  const chapQuery = qs.parse(props.location.hash).chap
+  const chap = chapQuery === undefined ? NaN : parseInt(chapQuery, 10)
+  return sourceChapters.includes(chap) ? chap : undefined
+}
+
+const parseExternalLibrary = (props: RouteComponentProps<{}>) => {
+  const ext = qs.parse(props.location.hash).ext || ''
+  return Object.values(ExternalLibraryNames).includes(ext) ? ext : ExternalLibraryNames.NONE
 }
 
 export default Application

src/components/Playground.tsx

@@ -5,6 +5,7 @@ import { HotKeys } from 'react-hotkeys'
 import { RouteComponentProps } from 'react-router'
 
 import { InterpreterOutput } from '../reducers/states'
+import { ExternalLibraryName } from './assessment/assessmentShape'
 import Workspace, { WorkspaceProps } from './workspace'
 import { SideContentTab } from './workspace/side-content'
 
@@ -27,13 +28,13 @@ export interface IDispatchProps {
   handleBrowseHistoryDown: () => void
   handleBrowseHistoryUp: () => void
   handleChangeActiveTab: (activeTab: number) => void
-  handleChapterSelect: (chapter: any, changeEvent: any) => void
+  handleChapterSelect: (chapter: number) => void
   handleEditorEval: () => void
   handleEditorValueChange: (val: string) => void
   handleEditorWidthChange: (widthChange: number) => void
   handleGenerateLz: () => void
   handleInterruptEval: () => void
-  handleExternalSelect: (external: any, changeEvent: any) => void
+  handleExternalSelect: (externalLibraryName: ExternalLibraryName) => void
   handleReplEval: () => void
   handleReplOutputClear: () => void
   handleReplValueChange: (newValue: string) => void
@@ -59,8 +60,10 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
     const workspaceProps: WorkspaceProps = {
       controlBarProps: {
         externalLibraryName: this.props.externalLibraryName,
-        handleChapterSelect: this.props.handleChapterSelect,
-        handleExternalSelect: this.props.handleExternalSelect,
+        handleChapterSelect: ({ chapter }: { chapter: number }, e: any) =>
+          this.props.handleChapterSelect(chapter),
+        handleExternalSelect: ({ name }: { name: ExternalLibraryName }, e: any) =>
+          this.props.handleExternalSelect(name),
         handleEditorEval: this.props.handleEditorEval,
         handleGenerateLz: this.props.handleGenerateLz,
         handleInterruptEval: this.props.handleInterruptEval,

src/components/__tests__/Application.tsx

@@ -3,16 +3,19 @@ import * as React from 'react'
 
 import { mockRouterProps } from '../../mocks/components'
 import Application, { IApplicationProps } from '../Application'
+import { ExternalLibraryName, ExternalLibraryNames } from '../assessment/assessmentShape'
 
 test('Application renders correctly', () => {
   const props: IApplicationProps = {
     ...mockRouterProps('/academy', {}),
     title: 'Cadet',
     currentPlaygroundChapter: 2,
-    currentPlaygroundExternalSymbols: [],
-    handleClearContext: (chapter: number, externals: string[]) => {},
+    handleLogOut: () => {},
+    currentPlaygroundExternalLibrary: ExternalLibraryNames.NONE,
+    handleClearContext: (chapter: number, externalLibraryName: ExternalLibraryName) => {},
     handleEditorValueChange: (val: string) => {},
-    handleLogOut: () => {}
+    handleEnsureLibrariesLoaded: () => {},
+    handlePlaygroundExternalSelect: (externalLibraryName: ExternalLibraryName) => {}
   }
   const app = <Application {...props} />
   const tree = shallow(app)

src/components/__tests__/Playground.tsx

@@ -2,7 +2,7 @@ import { shallow } from 'enzyme'
 import * as React from 'react'
 
 import { mockRouterProps } from '../../mocks/components'
-import { ExternalLibraryNames } from '../assessment/assessmentShape'
+import { ExternalLibraryName, ExternalLibraryNames } from '../assessment/assessmentShape'
 import Playground, { IPlaygroundProps } from '../Playground'
 
 const baseProps = {
@@ -18,11 +18,11 @@ const baseProps = {
   handleBrowseHistoryDown: () => {},
   handleBrowseHistoryUp: () => {},
   handleChangeActiveTab: (n: number) => {},
-  handleChapterSelect: (chapter: any, e: any) => {},
+  handleChapterSelect: (chapter: number) => {},
   handleEditorEval: () => {},
   handleEditorValueChange: () => {},
   handleEditorWidthChange: (widthChange: number) => {},
-  handleExternalSelect: (external: any, e: any) => {},
+  handleExternalSelect: (externalLibraryName: ExternalLibraryName) => {},
   handleGenerateLz: () => {},
   handleInterruptEval: () => {},
   handleReplEval: () => {},

src/components/__tests__/__snapshots__/Application.tsx.snap

@@ -10,7 +10,7 @@ exports[`Application renders correctly 1`] = `
       <Route path=\\"/material\\" component={[Function: Connect]} />
       <Route path=\\"/playground\\" component={[Function: C]} />
       <Route path=\\"/login\\" render={[Function]} />
-      <Route exact={true} path=\\"/\\" render={[Function: redirectToNews]} />
+      <Route exact={true} path=\\"/\\" render={[Function]} />
       <Route component={[Function: NotFound]} />
     </Switch>
   </div>

src/components/workspace/ControlBar.tsx

@@ -6,6 +6,7 @@ import * as CopyToClipboard from 'react-copy-to-clipboard'
 
 import { externalLibraries } from '../../reducers/externalLibraries'
 import { sourceChapters } from '../../reducers/states'
+import { ExternalLibraryName } from '../assessment/assessmentShape'
 import { controlButton } from '../commons'
 
 export type ControlBarProps = {
@@ -45,7 +46,7 @@ interface IChapter {
  */
 interface IExternal {
   key: number
-  name: string
+  name: ExternalLibraryName
   symbols: string[]
 }
 
@@ -207,7 +208,7 @@ const chapterRenderer: ItemRenderer<IChapter> = (chap, { handleClick, modifiers,
 )
 
 const iExternals = Array.from(externalLibraries.entries()).map((entry, index) => ({
-  name: entry[0],
+  name: entry[0] as ExternalLibraryName,
   key: index,
   symbols: entry[1]
 }))

src/containers/ApplicationContainer.ts

@@ -3,9 +3,14 @@ import { withRouter } from 'react-router'
 import { bindActionCreators, Dispatch } from 'redux'
 
 import { clearContext, logOut, updateEditorValue } from '../actions'
-import { WorkspaceLocations } from '../actions/workspaces'
+import {
+  ensureLibrariesLoaded,
+  playgroundExternalSelect,
+  WorkspaceLocations
+} from '../actions/workspaces'
 import Application, { IDispatchProps, IStateProps } from '../components/Application'
-import { ExternalLibraryNames } from '../components/assessment/assessmentShape'
+import { ExternalLibraryName } from '../components/assessment/assessmentShape'
+import { externalLibraries } from '../reducers/externalLibraries'
 import { IState } from '../reducers/states'
 
 /**
@@ -21,32 +26,31 @@ const mapStateToProps: MapStateToProps<IStateProps, {}, IState> = state => ({
   role: state.session.role,
   username: state.session.username,
   currentPlaygroundChapter: state.workspaces.playground.context.chapter,
-  currentPlaygroundExternalSymbols: state.workspaces.playground.externalSymbols
+  currentPlaygroundExternalLibrary: state.workspaces.playground.playgroundExternal
 })
 
 const workspaceLocation = WorkspaceLocations.playground
 
 const mapDispatchToProps: MapDispatchToProps<IDispatchProps, {}> = (dispatch: Dispatch<any>) =>
   bindActionCreators(
     {
-      /**
-       * Note that an empty globals is passed (as this is never used in URLs)
-       * and that ExternalLibraryNames.NONE is used (as URL library support is not ready yet).
-       */
-      handleClearContext: (chapter: number, symbols: string[]) =>
+      handleClearContext: (chapter: number, externalLibraryName: ExternalLibraryName) =>
         clearContext(
           {
             chapter,
             external: {
-              name: ExternalLibraryNames.NONE,
-              symbols
+              name: externalLibraryName,
+              symbols: externalLibraries.get(externalLibraryName)!
             },
             globals: []
           },
           workspaceLocation
         ),
       handleEditorValueChange: (val: string) => updateEditorValue(val, workspaceLocation),
-      handleLogOut: logOut
+      handleEnsureLibrariesLoaded: ensureLibrariesLoaded,
+      handleLogOut: logOut,
+      handlePlaygroundExternalSelect: (externalLibraryName: ExternalLibraryName) =>
+        playgroundExternalSelect(externalLibraryName, workspaceLocation)
     },
     dispatch
   )

src/containers/PlaygroundContainer.ts

@@ -19,6 +19,7 @@ import {
   updateReplValue,
   WorkspaceLocation
 } from '../actions'
+import { ExternalLibraryName } from '../components/assessment/assessmentShape'
 import Playground, { IDispatchProps, IStateProps } from '../components/Playground'
 import { IState } from '../reducers/states'
 
@@ -43,15 +44,14 @@ const mapDispatchToProps: MapDispatchToProps<IDispatchProps, {}> = (dispatch: Di
       handleBrowseHistoryDown: () => browseReplHistoryDown(location),
       handleBrowseHistoryUp: () => browseReplHistoryUp(location),
       handleChangeActiveTab: (activeTab: number) => changeActiveTab(activeTab, location),
-      handleChapterSelect: (chapter: any, changeEvent: any) =>
-        chapterSelect(chapter, changeEvent, location),
+      handleChapterSelect: (chapter: number) => chapterSelect(chapter, location),
       handleEditorEval: () => evalEditor(location),
       handleEditorValueChange: (val: string) => updateEditorValue(val, location),
       handleEditorWidthChange: (widthChange: number) => changeEditorWidth(widthChange, location),
       handleGenerateLz: generateLzString,
       handleInterruptEval: () => beginInterruptExecution(location),
-      handleExternalSelect: (external: any, changeEvent: any) =>
-        playgroundExternalSelect(external, changeEvent, location),
+      handleExternalSelect: (externalLibraryName: ExternalLibraryName) =>
+        playgroundExternalSelect(externalLibraryName, location),
       handleReplEval: () => evalRepl(location),
       handleReplOutputClear: () => clearReplOutput(location),
       handleReplValueChange: (newValue: string) => updateReplValue(newValue, location),