fix(render): pass step result directly to ink state, split step and l…

…ine state
ssube · May 18, 2021 · 531a3eb · 531a3eb
1 parent aed8219
commit 531a3eb
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 33 deletions.
diff --git a/src/service/render/InkRender.ts b/src/service/render/InkRender.ts
@@ -8,13 +8,7 @@ import { StepResult } from '../state';
 import { BaseRender, BaseRenderOptions } from './BaseRender';
 import { Frame } from './component/ink/Frame';
 
-export interface InkState {
-  input: string;
-  prompt: string;
-  output: Array<string>;
-}
-
-export type InkStateDispatch = (input: string) => RemoveResult<InkState>;
+export type InkStateDispatch = (input: string) => RemoveResult<StepResult>;
 export type InkQuitDispatch = () => RemoveResult<void>;
 
 /**
@@ -69,15 +63,10 @@ export class InkRender extends BaseRender implements Render {
 
     await super.showStep(result);
 
-    const state: InkState = {
-      input: '',
-      prompt: this.promptStr,
-      output: result.output,
-    };
-    this.emits.emit('step', state);
+    this.emits.emit('step', result);
   }
 
-  protected onLine(line: string): RemoveResult<InkState> {
+  protected onLine(line: string): RemoveResult<StepResult> {
     return onceWithRemove(this.emits, 'step', () => {
       this.emits.emit('line', line);
     });

diff --git a/src/service/render/component/ink/Frame.tsx b/src/service/render/component/ink/Frame.tsx
@@ -1,8 +1,9 @@
 import { doesExist } from '@apextoaster/js-utils';
 import { Newline, Text, useApp, useInput } from 'ink';
 import * as React from 'react';
+import { StepResult } from '../../../state';
 
-import { InkQuitDispatch, InkState, InkStateDispatch } from '../../InkRender';
+import { InkQuitDispatch, InkStateDispatch } from '../../InkRender';
 import { Output } from './Output';
 
 const { useEffect, useState } = React;
@@ -13,19 +14,22 @@ interface FrameProps {
 }
 
 const HISTORY_SIZE = 20;
-const DEFAULT_STATE: InkState = {
-  input: '',
-  prompt: '> ',
+const DEFAULT_STATE: StepResult = {
+  line: '',
   output: [],
+  stop: false,
+  turn: 0,
+  time: 0,
 };
 
 export const Frame = (props: FrameProps) => {
   const { exit } = useApp();
-  const [state, setter] = useState(DEFAULT_STATE);
+  const [state, setState] = useState(DEFAULT_STATE);
+  const [line, setLine] = useState('');
 
   const pushError = (err?: Error) => {
     if (doesExist(err)) {
-      setter({
+      setState({
         ...state,
         output: [...state.output, err.message].slice(-HISTORY_SIZE),
       });
@@ -46,32 +50,28 @@ export const Frame = (props: FrameProps) => {
 
   useInput((input, key) => {
     if (key.return) {
-      const { pending, remove } = props.onLine(state.input);
+      const { pending, remove } = props.onLine(line);
 
       pending.then((stepState) => {
         const merged = [
-          ...state.output, ...stepState.output
+          ...state.output,
+          ...stepState.output
         ];
-        setter({
+        setState({
           ...stepState,
           output: merged.slice(-HISTORY_SIZE),
         });
+        setLine('');
       }).catch(pushError);
 
       // TODO: when should onLine remove be called?
       return remove;
     }
 
     if (key.backspace || key.delete) {
-      setter({
-        ...state,
-        input: state.input.substr(0, state.input.length - 1),
-      });
+      setLine(line.substr(0, line.length - 1));
     } else {
-      setter({
-        ...state,
-        input: state.input + input,
-      });
+      setLine(line + input);
     }
 
     return () => {/* noop */ };
@@ -81,7 +81,7 @@ export const Frame = (props: FrameProps) => {
     <Newline />
     <Output output={state.output} />
     <Newline />
-    <Text color="blueBright">{state.prompt}</Text>
-    <Text color="red">{state.input}</Text>
+    <Text color="blueBright">turn {state.turn} &gt; </Text>
+    <Text color="red">{line}</Text>
   </Text>;
 };