decent progress

src/CallBlock.tsx

@@ -1,75 +1,100 @@
+import { apply, getType, getInst } from "dope2";
 import type { Dynamic, State2Props } from "./util/extra";
 import { Editor, type EditorState } from "./Editor";
 
 import "./CallBlock.css";
+import { useEffect } from "react";
+import { Type } from "./Type";
+import { Value } from "./Value";
+import { focusPrevElement } from "./util/dom_trickery";
 
 export interface CallBlockState {
   kind: "call";
   env: any;
   fn: EditorState;
   input: EditorState;
+  resolved: undefined | Dynamic;
+  rollback: EditorState;
 }
 
 interface CallBlockProps extends State2Props<CallBlockState> {
-  onResolve: (d: Dynamic) => void;
+  onResolve: (resolved: EditorState) => void;
 }
 
-export function CallBlock({ state: {kind, env, fn, input}, setState, onResolve }: CallBlockProps) {
+export function CallBlock({ state: {kind, env, fn, input, resolved, rollback }, setState, onResolve }: CallBlockProps) {
+  const setResolved = (resolved: Dynamic) => {
+    setState({kind, env, fn, input, resolved, rollback});
+  }
+
+  const makeTheCall = (input, fn) => {
+    console.log('makeTheCall...')
+    try {
+      const outputResolved = apply(input.resolved)(fn.resolved);
+      setResolved(outputResolved);
+      console.log("onResolve callblock..")
+      onResolve({
+        kind, env, fn, input, resolved: outputResolved, rollback
+      });
+    }
+    catch (e) {
+      console.log('makeTheCall:', e);
+    }
+  }
+
   const setFn = (fn: EditorState) => {
-    setState({kind, env, fn, input});
+    setState({kind, env, fn, input, resolved, rollback});
   }
   const setInput = (input: EditorState) => {
-    setState({kind, env, fn, input});
+    setState({kind, env, fn, input, resolved, rollback});
   }
+  const onFnResolve = (fnState) => {
+    console.log('my fn resolved')
+    if (input.resolved) {
+      makeTheCall(input, fnState);
+    }
+    else {
+      setFn(fnState);
+    }
+  }
+  const onInputResolve = (inputState) => {
+    console.log('my input resolved')
+    if (fn.resolved) {
+      makeTheCall(inputState, fn);
+    }
+    else {
+      // setInput(inputState);
+      setResolved(undefined);
+      onResolve({
+        kind, env, fn, input: inputState, resolved: undefined, rollback
+      });
+    }
+  }
+  const onFnCancel = () => {
+
+  }
+  const onInputCancel = () => {
+    // we become what we were before we became a CallBlock
+    if (rollback) {
+      setState(rollback);
+      focusPrevElement();
+    }
+  }
+
   return <span className="functionBlock">
     <div className="functionName">
     &#119891;&#119899;&nbsp;
-      <Editor state={fn} setState={setFn}/>
+      <Editor state={fn} setState={setFn}
+        onResolve={onFnResolve} onCancel={onFnCancel}/>
     </div>
     <div className="functionParams">
       <div className="outputParam">
       <div className="inputParam">
-        <Editor state={input} setState={setInput} />
+        <Editor state={input} setState={setInput} onResolve={onInputResolve} onCancel={onInputCancel} />
       </div>
-      result
+      { resolved
+        ? <Value dynamic={resolved} />
+        : <></> }
       </div>
     </div>
   </span>;
 }
-
-// function FunctionBlock({env, done, name, funDynamic}) {
-//   const functionType = getType(funDynamic);
-//   const inType = functionType.params[0](functionType);
-//   const [outDynamic, setOutDynamic] = useState<any>(null);
-//   const [input, setInput] = useState<any>(null);
-//   const gotInput = (name, inDynamic) => {
-//     setInput([name, inDynamic]);
-//     const outDynamic = apply(inDynamic)(funDynamic);
-//     setOutDynamic(outDynamic);
-//     // propagate result up
-//     done(outDynamic);
-//   };
-//   return <span className="functionBlock">
-//     <div className="functionName">
-//     &#119891;&#119899;&nbsp;
-//       {name}
-//       {/* <Type type={functionType}/> */}
-//     </div>
-//     <div className="functionParams">
-//       <div className="outputParam">
-//       <div className="inputParam">
-//         {
-//           (input === null)
-//             ? <InputBlock env={env} done={gotInput} type={inType} />
-//             : <DynamicBlock env={env} name={input[0]} dynamic={input[1]}/>
-//         }
-//       </div>
-//       {
-//           (input === null)
-//             ? <>&nbsp;</>
-//             : <DynamicBlock env={env} name="" dynamic={outDynamic} />
-//         }
-//       </div>
-//     </div>
-//   </span>;
-// }