nicer, nested rendering when currying

src/CallBlock.tsx

@@ -8,24 +8,35 @@ import { Type } from "./Type";
 import { Value } from "./Value";
 import { focusPrevElement } from "./util/dom_trickery";
 
-export interface CallBlockState {
+export interface CallBlockState<
+  FnState=EditorState,
+  InputState=EditorState,
+> {
   kind: "call";
   env: any;
-  fn: EditorState;
-  input: EditorState;
+  fn: FnState;
+  input: InputState;
   resolved: undefined | Dynamic;
 }
 
-interface CallBlockProps extends State2Props<CallBlockState> {
+interface CallBlockProps<
+  FnState=EditorState,
+  InputState=EditorState,
+> extends State2Props<CallBlockState<FnState,InputState>> {
   onResolve: (resolved: EditorState) => void;
 }
 
-export function CallBlock({ state: {kind, env, fn, input, resolved }, setState, onResolve }: CallBlockProps) {
+function headlessCallBlock({state: {kind, env, fn, input, resolved }, setState, onResolve}: CallBlockProps) {
   const [unifyError, setUnifyError] = useState<UnifyError | undefined>(undefined);
+  const setFn = (fn: EditorState) => {
+    setState({kind, env, fn, input, resolved});
+  }
+  const setInput = (input: EditorState) => {
+    setState({kind, env, fn, input, resolved});
+  }
   const setResolved = (resolved?: Dynamic) => {
     setState({kind, env, fn, input, resolved});
   }
-
   const makeTheCall = (input, fn) => {
     console.log('makeTheCall...')
     try {
@@ -46,14 +57,7 @@ export function CallBlock({ state: {kind, env, fn, input, resolved }, setState,
         kind, env, fn, input, resolved: undefined
       })
     }
-  }
-
-  const setFn = (fn: EditorState) => {
-    setState({kind, env, fn, input, resolved});
-  }
-  const setInput = (input: EditorState) => {
-    setState({kind, env, fn, input, resolved});
-  }
+  };
   const onFnResolve = (fnState) => {
     console.log('my fn resolved')
     if (input.resolved) {
@@ -66,7 +70,7 @@ export function CallBlock({ state: {kind, env, fn, input, resolved }, setState,
         kind, env, fn: fnState, input, resolved: undefined
       });
     }
-  }
+  };
   const onInputResolve = (inputState) => {
     console.log('my input resolved')
     if (fn.resolved) {
@@ -79,47 +83,86 @@ export function CallBlock({ state: {kind, env, fn, input, resolved }, setState,
         kind, env, fn, input: inputState, resolved: undefined
       });
     }
-  }
+  };
   const onFnCancel = () => {
-
+    setState(input);
   }
   const onInputCancel = () => {
     setState(fn);
   }
+  // const filterCompatibleInputs = ([_name, dynamic]: [string, Dynamic]) => {
+  //   if (fn.resolved) {
+  //     try {
+  //       assignFn(getType(fn.resolved), getType(dynamic));
+  //     } catch (e) {
+  //       if (!(e instanceof UnifyError)) {
+  //         throw e;
+  //       }
+  //       return false;
+  //     }  
+  //   }
+  //   return true;
+  // }
+  return {unifyError, setFn, setInput, onFnResolve, onInputResolve, onFnCancel, onInputCancel};
+}
 
-  const filterCompatibleInputs = ([_name, dynamic]: [string, Dynamic]) => {
-    if (fn.resolved) {
-      try {
-        assignFn(getType(fn.resolved), getType(dynamic));
-      } catch (e) {
-        if (!(e instanceof UnifyError)) {
-          throw e;
-        }
-        return false;
-      }  
-    }
-    return true;
-  }
-
+export function CallBlock({ state, setState, onResolve }: CallBlockProps) {
+  const {unifyError, setFn, setInput, onFnResolve, onInputResolve, onFnCancel, onInputCancel}
+    = headlessCallBlock({ state, setState, onResolve });
   return <span className={"functionBlock" + (unifyError ? " unifyError" : "")}>
-    <div className="functionName">
-    &#119891;&#119899;&nbsp;
-      <Editor state={fn} setState={setFn}
-        onResolve={onFnResolve} onCancel={onFnCancel}/>
-    </div>
+    <FunctionHeader fn={state.fn}/>
     <div className="functionParams">
       <div className="outputParam">
-      <div className="inputParam">
-        <Editor state={input} setState={setInput} onResolve={onInputResolve} onCancel={onInputCancel} />
-      </div>
-      { resolved
-        ? <Value dynamic={resolved} />
-        : <></> }
-      { unifyError
-        ? <>{unifyError.toString()}</>
-        : <></>
-      }
+        {/* Sequence of input parameters */}
+        <InputParams fn={state.fn} input={state.input} setInput={setInput}
+          onInputResolve={onInputResolve} onInputCancel={onInputCancel} />
+          
+        {/* Output (or Error) */}
+        {state.resolved && <Value dynamic={state.resolved} />}
+        {unifyError && unifyError.toString()}
       </div>
     </div>
   </span>;
 }
+
+function FunctionHeader({ fn }) {
+  if (fn.kind === "call") {
+    // if the function we're calling is itself the result of a function call,
+    // then we are anonymous, and so we don't draw a function name
+
+    // recurse:
+    return <FunctionHeader fn={fn.fn} />;
+  }
+  else {
+    //  end of recursion - draw function name
+    return <div className="functionName">
+      &#119891;&#119899;&nbsp;
+      <Editor state={fn} setState={() => {/*todo*/}}
+        onResolve={() => {}} onCancel={() => {/*todo*/}}/>
+    </div>;
+  }
+}
+
+function InputParams({ fn, input, setInput, onInputResolve, onInputCancel }) {
+  return <div className="inputParam">
+    {(fn.kind === "call") &&
+      // if the function we're calling is itself the result of a function call,
+      // then we render its input parameter nested in our own input parameter box, which is way more readable
+
+      // Input(s) of the function we're calling:
+      <InputParams
+        fn={fn.fn}
+        input={fn.input}
+        setInput={() => {/*todo*/}}
+        onInputResolve={() => {/*todo*/}}
+        onInputCancel={() => {/*todo*/}}/>
+    }
+
+    {/* Our own input */}
+    <Editor
+      state={input}
+      setState={setInput}
+      onResolve={onInputResolve}
+      onCancel={onInputCancel} />
+  </div>;
+};