Add Source §2 (#35)

* Rename context.week -> context.chapter

* Add list library

TODO: Arrow functions do not work with map

* Make context chapter 2 by default for dev

* Fix arrow funcs not working with map/build_list...

* Revert default libraries back to chap 1

* Add sourceChapter property to playground state

Playground defaults to most recent source chapter.

* Add component for selecting source chapters

Not yet wired.

* Add action for chapter select

Not yet wired up.

* Add chapter select

* Add section sign, notification on chapter change

* Add list.equal

Author: ning-y

src/actions/actionTypes.ts

@@ -13,6 +13,8 @@ export const CLEAR_REPL_INPUT = 'CLEAR_REPL_INPUT'
 export const CLEAR_REPL_OUTPUT = 'CLEAR_REPL_OUTPUT'
 export const CLEAR_CONTEXT = 'CLEAR_CONTEXT'
 export const SEND_REPL_INPUT_TO_OUTPUT = 'SEND_REPL_INPUT_TO_OUTPUT'
+export const CHAPTER_SELECT = 'CHAPTER_SELECT'
+export const CHANGE_CHAPTER = 'CHANGE_CHAPTER'
 
 /** Interpreter */
 export const HANDLE_CONSOLE_LOG = 'HANDLE_CONSOLE_LOG'

src/actions/playground.ts

@@ -1,3 +1,4 @@
+import { ChangeEvent } from 'react'
 import { ActionCreator } from 'redux'
 import * as actionTypes from './actionTypes'
 
@@ -19,6 +20,18 @@ export const sendReplInputToOutput: ActionCreator<actionTypes.IAction> = (newOut
   }
 })
 
+export const chapterSelect: ActionCreator<actionTypes.IAction> = (
+  e: ChangeEvent<HTMLSelectElement>
+) => ({
+  type: actionTypes.CHAPTER_SELECT,
+  payload: e.currentTarget.value
+})
+
+export const changeChapter: ActionCreator<actionTypes.IAction> = (newChapter: number) => ({
+  type: actionTypes.CHANGE_CHAPTER,
+  payload: newChapter
+})
+
 export const evalEditor = () => ({
   type: actionTypes.EVAL_EDITOR
 })

src/components/IDE/Control.tsx

@@ -1,6 +1,7 @@
+import { Button, IconName, Intent } from '@blueprintjs/core'
 import * as React from 'react'
 
-import { Button, IconName, Intent } from '@blueprintjs/core'
+import { sourceChapters } from '../../reducers/states'
 
 /**
  * @property handleEvalEditor  - A callback function for evaluation
@@ -10,26 +11,40 @@ export interface IControlProps {
   handleEvalEditor: () => void
   handleEvalRepl: () => void
   handleClearReplOutput: () => void
+  handleChapterSelect: (e: React.ChangeEvent<HTMLSelectElement>) => void
 }
 
+const genericButton = (
+  label: string,
+  icon: IconName,
+  handleClick = () => {},
+  intent = Intent.NONE,
+  notMinimal = false
+) => (
+  <Button
+    onClick={handleClick}
+    className={(notMinimal ? '' : 'pt-minimal') + ' col-xs-12'}
+    intent={intent}
+    icon={icon}
+  >
+    {label}
+  </Button>
+)
+
+const chapterSelect = (handleSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {}) => (
+  <div className="col-xs-4 pt-select pt-select">
+    <select defaultValue={sourceChapters.slice(-1)[0].toString()} onChange={handleSelect}>
+      {sourceChapters.map(chap => (
+        <option key={chap} value={chap}>
+          {`Source \xa7${chap}`}
+        </option>
+      ))}
+    </select>
+  </div>
+)
+
 class Control extends React.Component<IControlProps, {}> {
   public render() {
-    const genericButton = (
-      label: string,
-      icon: IconName,
-      handleClick = () => {},
-      intent = Intent.NONE,
-      notMinimal = false
-    ) => (
-      <Button
-        onClick={handleClick}
-        className={(notMinimal ? '' : 'pt-minimal') + ' col-xs-12'}
-        intent={intent}
-        icon={icon}
-      >
-        {label}
-      </Button>
-    )
     const runButton = genericButton('Run', 'play', this.props.handleEvalEditor)
     const evalButton = genericButton('Eval', 'play', this.props.handleEvalRepl)
     const clearButton = genericButton('Clear', 'remove', this.props.handleClearReplOutput)
@@ -38,8 +53,9 @@ class Control extends React.Component<IControlProps, {}> {
         <div className="col-xs-2">{runButton}</div>
         <div className="col-xs-4">
           <div className="row">
-            <div className="col-xs-6">{evalButton}</div>
-            <div className="col-xs-6">{clearButton}</div>
+            {chapterSelect(this.props.handleChapterSelect)}
+            <div className="col-xs-4">{evalButton}</div>
+            <div className="col-xs-4">{clearButton}</div>
           </div>
         </div>
       </div>

src/components/IDE/__tests__/Control.tsx

@@ -8,7 +8,8 @@ test('Control renders correctly', () => {
   const props: IControlProps = {
     handleEvalEditor: () => {},
     handleEvalRepl: () => {},
-    handleClearReplOutput: () => {}
+    handleClearReplOutput: () => {},
+    handleChapterSelect: (e: React.ChangeEvent<HTMLSelectElement>) => {}
   }
   const app = <Control {...props} />
   const tree = shallow(app)

src/components/IDE/__tests__/__snapshots__/Control.tsx.snap

@@ -9,12 +9,22 @@ exports[`Control renders correctly 1`] = `
   </div>
   <div className=\\"col-xs-4\\">
     <div className=\\"row\\">
-      <div className=\\"col-xs-6\\">
+      <div className=\\"col-xs-4 pt-select pt-select\\">
+        <select defaultValue=\\"2\\" onChange={[Function: handleChapterSelect]}>
+          <option value={1}>
+            Source §1
+          </option>
+          <option value={2}>
+            Source §2
+          </option>
+        </select>
+      </div>
+      <div className=\\"col-xs-4\\">
         <Blueprint2.Button onClick={[Function: handleEvalRepl]} className=\\"pt-minimal col-xs-12\\" intent=\\"none\\" icon=\\"play\\">
           Eval
         </Blueprint2.Button>
       </div>
-      <div className=\\"col-xs-6\\">
+      <div className=\\"col-xs-4\\">
         <Blueprint2.Button onClick={[Function: handleClearReplOutput]} className=\\"pt-minimal col-xs-12\\" intent=\\"none\\" icon=\\"remove\\">
           Clear
         </Blueprint2.Button>

src/containers/IDE/ControlContainer.ts

@@ -1,13 +1,14 @@
 import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux'
 import { bindActionCreators, Dispatch } from 'redux'
 
-import { clearReplOutput, evalEditor, evalRepl } from '../../actions/playground'
+import { chapterSelect, clearReplOutput, evalEditor, evalRepl } from '../../actions/playground'
 import Control, { IControlProps } from '../../components/IDE/Control'
 import { IState } from '../../reducers/states'
 
 type DispatchProps = Pick<IControlProps, 'handleEvalEditor'> &
   Pick<IControlProps, 'handleEvalRepl'> &
-  Pick<IControlProps, 'handleClearReplOutput'>
+  Pick<IControlProps, 'handleClearReplOutput'> &
+  Pick<IControlProps, 'handleChapterSelect'>
 
 /** No-op mapStateToProps */
 const mapStateToProps: MapStateToProps<{}, {}, IState> = state => ({})
@@ -20,7 +21,8 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dis
     {
       handleEvalEditor: evalEditor,
       handleEvalRepl: evalRepl,
-      handleClearReplOutput: clearReplOutput
+      handleClearReplOutput: clearReplOutput,
+      handleChapterSelect: chapterSelect
     },
     dispatch
   )

src/mocks/context.ts

@@ -1,6 +1,6 @@
 import { createContext } from '../slang'
 import { Context } from '../slang/types'
 
-export function mockContext(): Context {
-  return createContext()
+export function mockContext(chapter = 1): Context {
+  return createContext(chapter)
 }

src/reducers/playground.ts

@@ -1,5 +1,6 @@
 import { Reducer } from 'redux'
 import {
+  CHANGE_CHAPTER,
   CLEAR_CONTEXT,
   CLEAR_REPL_INPUT,
   CLEAR_REPL_OUTPUT,
@@ -41,7 +42,12 @@ export const reducer: Reducer<IPlaygroundState> = (state = defaultPlayground, ac
     case CLEAR_CONTEXT:
       return {
         ...state,
-        context: createContext()
+        context: createContext(state.sourceChapter)
+      }
+    case CHANGE_CHAPTER:
+      return {
+        ...state,
+        sourceChapter: action.payload
       }
     case HANDLE_CONSOLE_LOG:
       /* Possible cases:

src/reducers/states.ts

@@ -11,7 +11,11 @@ export interface IApplicationState {
   readonly environment: ApplicationEnvironment
 }
 
+export const sourceChapters = [1, 2]
+const latestSourceChapter = sourceChapters.slice(-1)[0]
+
 export interface IPlaygroundState {
+  readonly sourceChapter: number
   readonly editorValue: string
   readonly replValue: string
   readonly context: Context
@@ -87,8 +91,9 @@ export const defaultApplication: IApplicationState = {
 }
 
 export const defaultPlayground: IPlaygroundState = {
+  sourceChapter: latestSourceChapter,
   editorValue: '',
   replValue: '',
-  context: createContext(),
+  context: createContext(latestSourceChapter),
   output: []
 }

src/sagas/index.ts

@@ -6,6 +6,7 @@ import { Context, interrupt, runInContext } from '../slang'
 
 import * as actions from '../actions'
 import * as actionTypes from '../actions/actionTypes'
+import { showSuccessMessage } from '../notification'
 
 function* evalCode(code: string, context: Context) {
   const { result, interrupted } = yield race({
@@ -44,6 +45,20 @@ function* interpreterSaga(): SagaIterator {
     yield put(actions.sendReplInputToOutput(code))
     yield* evalCode(code, context)
   })
+
+  yield takeEvery(actionTypes.CHAPTER_SELECT, function*(action) {
+    const newChapter = parseInt((action as actionTypes.IAction).payload, 10)
+    const oldChapter = yield select((state: IState) => state.playground.sourceChapter)
+    if (newChapter !== oldChapter) {
+      yield put(actions.changeChapter(newChapter))
+      yield put(actions.handleInterruptExecution())
+      yield put(actions.clearContext())
+      yield put(actions.clearReplOutput())
+      yield call(showSuccessMessage, `Switched to Source \xa7${newChapter}`)
+    } else {
+      yield undefined
+    }
+  })
 }
 
 function* mainSaga() {