Implement history search in repl via up/down arrows (#200)

ning-y · web-flow · commit 7d81334097d0 · 2018-07-17T12:47:26.000+08:00
* Add property replHistory to workspace state

* Define actions, ActionCreators for ReplHistory

* Remove reducer cases for EVAL_[REPL|EDITOR]

* Push codeOutput to replHistory in workspace reducer

* Add keyboard shortcuts in ReplInput

* Connect dispatches for browse repl to workspaces

* Implement up/down arrow behaviours

* Rename property isBrowsingIndex -&gt; browseIndex

* Prevent saving of empty replValues into replHistory

* Revert removal of EVAL_EDITOR and EVAL_REPL reducers

* Use variable for max repl history length
diff --git a/src/actions/actionTypes.ts b/src/actions/actionTypes.ts
@@ -19,6 +19,8 @@ export const EVAL_INTERPRETER_SUCCESS = 'EVAL_INTERPRETER_SUCCESS'
 export const HANDLE_CONSOLE_LOG = 'HANDLE_CONSOLE_LOG'
 
 /** Workspace */
+export const BROWSE_REPL_HISTORY_DOWN = 'BROWSE_REPL_HISTORY_DOWN'
+export const BROWSE_REPL_HISTORY_UP = 'BROWSE_REPL_HISTORY_UP'
 export const CHANGE_ACTIVE_TAB = 'CHANGE_ACTIVE_TAB'
 export const CHANGE_EDITOR_WIDTH = 'CHANGE_EDITOR_WIDTH'
 export const CHANGE_PLAYGROUND_EXTERNAL = 'CHANGE_PLAYGROUND_EXTERNAL'
diff --git a/src/actions/workspaces.ts b/src/actions/workspaces.ts
@@ -15,8 +15,23 @@ export enum WorkspaceLocations {
   assessment = 'assessment',
   playground = 'playground'
 }
+
 export type WorkspaceLocation = keyof typeof WorkspaceLocations
 
+export const browseReplHistoryDown: ActionCreator<actionTypes.IAction> = (
+  workspaceLocation: WorkspaceLocation
+) => ({
+  type: actionTypes.BROWSE_REPL_HISTORY_DOWN,
+  payload: { workspaceLocation }
+})
+
+export const browseReplHistoryUp: ActionCreator<actionTypes.IAction> = (
+  workspaceLocation: WorkspaceLocation
+) => ({
+  type: actionTypes.BROWSE_REPL_HISTORY_UP,
+  payload: { workspaceLocation }
+})
+
 export const changeActiveTab: ActionCreator<actionTypes.IAction> = (
   activeTab: number,
   workspaceLocation: WorkspaceLocation
diff --git a/src/components/Playground.tsx b/src/components/Playground.tsx
@@ -24,6 +24,8 @@ export interface IStateProps {
 }
 
 export interface IDispatchProps {
+  handleBrowseHistoryDown: () => void
+  handleBrowseHistoryUp: () => void
   handleChangeActiveTab: (activeTab: number) => void
   handleChapterSelect: (chapter: any, changeEvent: any) => void
   handleEditorEval: () => void
@@ -85,6 +87,8 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
       replProps: {
         output: this.props.output,
         replValue: this.props.replValue,
+        handleBrowseHistoryDown: this.props.handleBrowseHistoryDown,
+        handleBrowseHistoryUp: this.props.handleBrowseHistoryUp,
         handleReplEval: this.props.handleReplEval,
         handleReplValueChange: this.props.handleReplValueChange
       },
diff --git a/src/components/__tests__/Playground.tsx b/src/components/__tests__/Playground.tsx
@@ -15,12 +15,14 @@ const baseProps = {
   externalLibrary: 'none',
   output: [],
   replValue: '',
-  handleChapterSelect: (chapter: any, e: any) => {},
-  handleExternalSelect: (external: any, e: any) => {},
+  handleBrowseHistoryDown: () => {},
+  handleBrowseHistoryUp: () => {},
   handleChangeActiveTab: (n: number) => {},
+  handleChapterSelect: (chapter: any, e: any) => {},
   handleEditorEval: () => {},
   handleEditorValueChange: () => {},
   handleEditorWidthChange: (widthChange: number) => {},
+  handleExternalSelect: (external: any, e: any) => {},
   handleGenerateLz: () => {},
   handleInterruptEval: () => {},
   handleReplEval: () => {},
diff --git a/src/components/academy/grading/GradingWorkspace.tsx b/src/components/academy/grading/GradingWorkspace.tsx
@@ -37,13 +37,15 @@ export type OwnProps = {
 }
 
 export type DispatchProps = {
-  handleGradingFetch: (submissionId: number) => void
+  handleBrowseHistoryDown: () => void
+  handleBrowseHistoryUp: () => 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
+  handleGradingFetch: (submissionId: number) => void
   handleInterruptEval: () => void
   handleReplEval: () => void
   handleReplOutputClear: () => void
@@ -97,10 +99,12 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
       sideContentHeight: this.props.sideContentHeight,
       sideContentProps: this.sideContentProps(this.props, questionId),
       replProps: {
-        output: this.props.output,
-        replValue: this.props.replValue,
+        handleBrowseHistoryDown: this.props.handleBrowseHistoryDown,
+        handleBrowseHistoryUp: this.props.handleBrowseHistoryUp,
         handleReplEval: this.props.handleReplEval,
-        handleReplValueChange: this.props.handleReplValueChange
+        handleReplValueChange: this.props.handleReplValueChange,
+        output: this.props.output,
+        replValue: this.props.replValue
       }
     }
     return (
diff --git a/src/components/assessment/AssessmentWorkspace.tsx b/src/components/assessment/AssessmentWorkspace.tsx
@@ -40,6 +40,8 @@ export type OwnProps = {
 
 export type DispatchProps = {
   handleAssessmentFetch: (assessmentId: number) => void
+  handleBrowseHistoryDown: () => void
+  handleBrowseHistoryUp: () => void
   handleChangeActiveTab: (activeTab: number) => void
   handleChapterSelect: (chapter: any, changeEvent: any) => void
   handleClearContext: (chapter: number, externals: string[]) => void
@@ -119,10 +121,12 @@ class AssessmentWorkspace extends React.Component<
       sideContentHeight: this.props.sideContentHeight,
       sideContentProps: this.sideContentProps(this.props, questionId),
       replProps: {
-        output: this.props.output,
-        replValue: this.props.replValue,
+        handleBrowseHistoryDown: this.props.handleBrowseHistoryDown,
+        handleBrowseHistoryUp: this.props.handleBrowseHistoryUp,
         handleReplEval: this.props.handleReplEval,
-        handleReplValueChange: this.props.handleReplValueChange
+        handleReplValueChange: this.props.handleReplValueChange,
+        output: this.props.output,
+        replValue: this.props.replValue
       }
     }
     return (
@@ -195,6 +199,7 @@ class AssessmentWorkspace extends React.Component<
       handleInterruptEval: this.props.handleInterruptEval,
       handleReplEval: this.props.handleReplEval,
       handleReplOutputClear: this.props.handleReplOutputClear,
+      handleReplValueChange: this.props.handleReplValueChange,
       hasChapterSelect: false,
       hasDoneButton: questionId === this.props.assessment!.questions.length - 1,
       hasNextButton: questionId < this.props.assessment!.questions.length - 1,
diff --git a/src/components/assessment/__tests__/AssessmentWorkspace.tsx b/src/components/assessment/__tests__/AssessmentWorkspace.tsx
@@ -10,6 +10,8 @@ const defaultProps: AssessmentWorkspaceProps = {
   closeDate: '2048-06-18T05:24:26.026Z',
   editorWidth: '50%',
   handleAssessmentFetch: (assessmentId: number) => {},
+  handleBrowseHistoryDown: () => {},
+  handleBrowseHistoryUp: () => {},
   handleChangeActiveTab: (activeTab: number) => {},
   handleChapterSelect: (chapter: any, changeEvent: any) => {},
   handleClearContext: (chapter: number, externals: string[]) => {},
diff --git a/src/components/workspace/Repl.tsx b/src/components/workspace/Repl.tsx
@@ -9,6 +9,8 @@ import ReplInput, { IReplInputProps } from './ReplInput'
 export interface IReplProps {
   output: InterpreterOutput[]
   replValue: string
+  handleBrowseHistoryDown: () => void
+  handleBrowseHistoryUp: () => void
   handleReplEval: () => void
   handleReplValueChange: (newCode: string) => void
 }
diff --git a/src/components/workspace/ReplInput.tsx b/src/components/workspace/ReplInput.tsx
@@ -6,12 +6,27 @@ import 'brace/theme/terminal'
 
 export interface IReplInputProps {
   replValue: string
+  handleBrowseHistoryDown: () => void
+  handleBrowseHistoryUp: () => void
   handleReplValueChange: (newCode: string) => void
   handleReplEval: () => void
 }
 
 class ReplInput extends React.PureComponent<IReplInputProps, {}> {
   private replInputBottom: HTMLDivElement
+  private execBrowseHistoryDown: () => void
+  private execBrowseHistoryUp: () => void
+  private execEvaluate: () => void
+
+  constructor(props: IReplInputProps) {
+    super(props)
+    this.execBrowseHistoryDown = props.handleBrowseHistoryDown
+    this.execBrowseHistoryUp = props.handleBrowseHistoryUp
+    this.execEvaluate = () => {
+      this.replInputBottom.scrollIntoView()
+      this.props.handleReplEval()
+    }
+  }
 
   public componentDidUpdate() {
     if (this.replInputBottom.clientWidth >= window.innerWidth - 50) {
@@ -41,16 +56,29 @@ class ReplInput extends React.PureComponent<IReplInputProps, {}> {
           value={this.props.replValue}
           onChange={this.props.handleReplValueChange}
           commands={[
+            {
+              name: 'browseHistoryDown',
+              bindKey: {
+                win: 'Down',
+                mac: 'Down'
+              },
+              exec: this.execBrowseHistoryDown
+            },
+            {
+              name: 'browseHistoryUp',
+              bindKey: {
+                win: 'Up',
+                mac: 'Up'
+              },
+              exec: this.execBrowseHistoryUp
+            },
             {
               name: 'evaluate',
               bindKey: {
                 win: 'Shift-Enter',
                 mac: 'Shift-Enter'
               },
-              exec: () => {
-                this.replInputBottom.scrollIntoView()
-                this.props.handleReplEval()
-              }
+              exec: this.execEvaluate
             }
           ]}
           minLines={1}
diff --git a/src/components/workspace/__tests__/Repl.tsx b/src/components/workspace/__tests__/Repl.tsx
@@ -35,11 +35,13 @@ const mockErrorOutput: ErrorOutput = {
 
 test('Repl renders correctly', () => {
   const props = {
-    output: [mockResultOutput, mockCodeOutput, mockErrorOutput, mockRunningOutput],
-    replValue: '',
+    handleBrowseHistoryDown: () => {},
+    handleBrowseHistoryUp: () => {},
     handleReplValueChange: (newCode: string) => {},
     handleReplEval: () => {},
-    handleReplOutputClear: () => {}
+    handleReplOutputClear: () => {},
+    output: [mockResultOutput, mockCodeOutput, mockErrorOutput, mockRunningOutput],
+    replValue: ''
   }
   const app = <Repl {...props} />
   const tree = shallow(app)
diff --git a/src/components/workspace/__tests__/__snapshots__/Repl.tsx.snap b/src/components/workspace/__tests__/__snapshots__/Repl.tsx.snap
@@ -45,7 +45,7 @@ exports[`Repl renders correctly 1`] = `
     <Component output={{...}} />
     <Component output={{...}} />
     <HotKeys className=\\"repl-input-parent row pt-card pt-elevation-0\\" handlers={{...}}>
-      <ReplInput output={{...}} replValue=\\"\\" handleReplValueChange={[Function: handleReplValueChange]} handleReplEval={[Function: handleReplEval]} handleReplOutputClear={[Function: handleReplOutputClear]} />
+      <ReplInput handleBrowseHistoryDown={[Function: handleBrowseHistoryDown]} handleBrowseHistoryUp={[Function: handleBrowseHistoryUp]} handleReplValueChange={[Function: handleReplValueChange]} handleReplEval={[Function: handleReplEval]} handleReplOutputClear={[Function: handleReplOutputClear]} output={{...}} replValue=\\"\\" />
     </HotKeys>
   </div>
 </div>"
diff --git a/src/containers/PlaygroundContainer.ts b/src/containers/PlaygroundContainer.ts
@@ -4,6 +4,8 @@ import { bindActionCreators, Dispatch } from 'redux'
 
 import {
   beginInterruptExecution,
+  browseReplHistoryDown,
+  browseReplHistoryUp,
   changeActiveTab,
   changeEditorWidth,
   changeSideContentHeight,
@@ -38,6 +40,8 @@ const location: WorkspaceLocation = 'playground'
 const mapDispatchToProps: MapDispatchToProps<IDispatchProps, {}> = (dispatch: Dispatch<any>) =>
   bindActionCreators(
     {
+      handleBrowseHistoryDown: () => browseReplHistoryDown(location),
+      handleBrowseHistoryUp: () => browseReplHistoryUp(location),
       handleChangeActiveTab: (activeTab: number) => changeActiveTab(activeTab, location),
       handleChapterSelect: (chapter: any, changeEvent: any) =>
         chapterSelect(chapter, changeEvent, location),
diff --git a/src/containers/academy/grading/GradingWorkspaceContainer.ts b/src/containers/academy/grading/GradingWorkspaceContainer.ts
@@ -3,6 +3,8 @@ import { bindActionCreators, Dispatch } from 'redux'
 
 import {
   beginInterruptExecution,
+  browseReplHistoryDown,
+  browseReplHistoryUp,
   changeActiveTab,
   changeEditorWidth,
   changeSideContentHeight,
@@ -52,7 +54,8 @@ const mapStateToProps: MapStateToProps<StateProps, OwnProps, IState> = (state, p
 const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dispatch<any>) =>
   bindActionCreators<DispatchProps>(
     {
-      handleGradingFetch: fetchGrading,
+      handleBrowseHistoryDown: () => browseReplHistoryDown(location),
+      handleBrowseHistoryUp: () => browseReplHistoryUp(location),
       handleChangeActiveTab: (activeTab: number) => changeActiveTab(activeTab, location),
       handleChapterSelect: (chapter: any, changeEvent: any) =>
         chapterSelect(chapter, changeEvent, location),
@@ -61,6 +64,7 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dis
       handleEditorEval: () => evalEditor(location),
       handleEditorValueChange: (val: string) => updateEditorValue(val, location),
       handleEditorWidthChange: (widthChange: number) => changeEditorWidth(widthChange, location),
+      handleGradingFetch: fetchGrading,
       handleInterruptEval: () => beginInterruptExecution(location),
       handleReplEval: () => evalRepl(location),
       handleReplOutputClear: () => clearReplOutput(location),
diff --git a/src/containers/assessment/AssessmentWorkspaceContainer.ts b/src/containers/assessment/AssessmentWorkspaceContainer.ts
@@ -3,6 +3,8 @@ import { bindActionCreators, Dispatch } from 'redux'
 
 import {
   beginInterruptExecution,
+  browseReplHistoryDown,
+  browseReplHistoryUp,
   changeActiveTab,
   changeEditorWidth,
   changeSideContentHeight,
@@ -48,6 +50,8 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dis
   bindActionCreators<DispatchProps>(
     {
       handleAssessmentFetch: fetchAssessment,
+      handleBrowseHistoryDown: () => browseReplHistoryDown(location),
+      handleBrowseHistoryUp: () => browseReplHistoryUp(location),
       handleChangeActiveTab: (activeTab: number) => changeActiveTab(activeTab, location),
       handleChapterSelect: (chapter: any, changeEvent: any) =>
         chapterSelect(chapter, changeEvent, location),
diff --git a/src/reducers/states.ts b/src/reducers/states.ts
@@ -45,6 +45,7 @@ interface IWorkspaceState {
   readonly editorValue: string
   readonly editorWidth: string
   readonly output: InterpreterOutput[]
+  readonly replHistory: ReplHistory
   readonly replValue: string
   readonly sideContentActiveTab: number
   readonly sideContentHeight?: number
@@ -65,6 +66,13 @@ export interface ISessionState {
   readonly username?: string
 }
 
+type ReplHistory = {
+  browseIndex: null | number // [0, 49] if browsing, else null
+  records: string[]
+}
+
+export const maxBrowseIndex = 50
+
 /**
  * An output while the program is still being run in the interpreter. As a
  * result, there are no return values or SourceErrors yet. However, there could
@@ -189,6 +197,10 @@ export const createDefaultWorkspace = (location: WorkspaceLocation): IWorkspaceS
   editorValue: defaultEditorValue,
   editorWidth: '50%',
   output: [],
+  replHistory: {
+    browseIndex: null,
+    records: []
+  },
   replValue: '',
   sideContentActiveTab: 0,
   externals: []
diff --git a/src/reducers/workspaces.ts b/src/reducers/workspaces.ts

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,8 @@ import ReplInput, { IReplInputProps } from './ReplInput'`
`9`	`9`	`export interface IReplProps {`
`10`	`10`	`output: InterpreterOutput[]`
`11`	`11`	`replValue: string`
	`12`	`+ handleBrowseHistoryDown: () => void`
	`13`	`+ handleBrowseHistoryUp: () => void`
`12`	`14`	`handleReplEval: () => void`
`13`	`15`	`handleReplValueChange: (newCode: string) => void`
`14`	`16`	`}`