cleanup code

src/CallBlock.tsx

@@ -1,11 +1,12 @@
 import { useContext } from "react";
 
-import "./CallBlock.css";
 import { Editor, type EditorState, type SetStateFn, type State2Props } from "./Editor";
-import { EnvContext, functionWith3Params, functionWith4Params } from "./EnvContext";
+import { EnvContext } from "./EnvContext";
 import { evalCallBlock2, evalEditorBlock, scoreResolved, type ResolvedType } from "./eval";
-import { Value } from "./Value";
 import { GlobalContext } from "./GlobalContext";
+import { Value } from "./Value";
+
+import "./CallBlock.css";
 
 export interface CallBlockState {
   kind: "call";
@@ -18,20 +19,36 @@ interface CallBlockProps<
   InputState=EditorState,
 > extends State2Props<CallBlockState,EditorState> {}
 
-function headlessCallBlock(setState: (callback: SetStateFn<CallBlockState,EditorState>) => void) {
+function nestedFnProperties({state, setState, suggestionPriority}: CallBlockProps, env) {
   const setFn = (callback: SetStateFn) => {
     setState(state => ({...state, fn: callback(state.fn)}));
   }
-  const setInput = (callback: SetStateFn) => {
-    setState(state => ({...state, input: callback(state.input)}));
-  }
   const onFnCancel = () => {
     setState(state => state.input); // we become our input
   }
+  const fnSuggestionPriority = (fnSuggestion: ResolvedType) => computePriority(
+      fnSuggestion,
+      evalEditorBlock(state.input, env),
+      suggestionPriority,
+      env,
+    );
+  return {state: state.fn, setState: setFn, onCancel: onFnCancel, suggestionPriority: fnSuggestionPriority};
+}
+
+function nestedInputProperties({state, setState, suggestionPriority}: CallBlockProps, env) {
+  const setInput = (callback: SetStateFn) => {
+    setState(state => ({...state, input: callback(state.input)}));
+  }
   const onInputCancel = () => {
     setState(state => state.fn); // we become our function
   }
-  return {setFn, setInput, onFnCancel, onInputCancel};
+  const inputSuggestionPriorirty = (inputSuggestion: ResolvedType) => computePriority(
+    evalEditorBlock(state.fn, env), // fn *may* be set
+    inputSuggestion,       // suggestions will be for input
+    suggestionPriority,       // priority function we get from parent block
+    env,
+  )
+  return {state: state.input, setState: setInput, onCancel: onInputCancel, suggestionPriority: inputSuggestionPriorirty};
 }
 
 export function CallBlock({ state, setState, suggestionPriority }: CallBlockProps) {
@@ -70,37 +87,17 @@ function computePriority(fn: ResolvedType, input: ResolvedType, outPriority: (s:
 function FunctionHeader({ state, setState, suggestionPriority }) {
   const env = useContext(EnvContext);
   const globalContext = useContext(GlobalContext);
-  const {setFn, onFnCancel} = headlessCallBlock(setState);
+  const nestedProperties = nestedFnProperties({state, setState, suggestionPriority}, env);
   if (state.fn.kind === "call" && globalContext?.syntacticSugar) {
     // 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
-    return <FunctionHeader
+    return <FunctionHeader {...nestedProperties} />;
-      state={state.fn}
-      setState={setFn}
-      suggestionPriority={(fnSuggestion: ResolvedType) => computePriority(
-        fnSuggestion,
-        evalEditorBlock(state.input, env),
-        suggestionPriority,
-        env,
-      )}
-      />;
   }
   else {
     //  end of recursion - draw function name
     return <span className="functionName">
-    &nbsp;&#119891;&#119899;&nbsp;
+      &nbsp;&#119891;&#119899;&nbsp;
-    <Editor
+      <Editor {...nestedProperties} />
-      state={state.fn}
-      setState={setFn}
-      onCancel={onFnCancel}
-      suggestionPriority={
-        (fnSuggestion: ResolvedType) => computePriority(
-          fnSuggestion,             // suggestions will be for function
-          evalEditorBlock(state.input, env), // input *may* be set
-          suggestionPriority,          // priority function we get from parent block
-          env,
-        )}
-      />
     </span>;
   }
 }
@@ -108,42 +105,18 @@ function FunctionHeader({ state, setState, suggestionPriority }) {
 function InputParams({ state, setState, suggestionPriority, depth, errorDepth }) {
   const env = useContext(EnvContext);
   const globalContext = useContext(GlobalContext);
-  const {setFn, setInput, onInputCancel} = headlessCallBlock(setState);
-  let nestedParams;
-  if (state.fn.kind === "call" && globalContext?.syntacticSugar) {
-    // Nest input of nested function
-    nestedParams = <InputParams
-      state={state.fn}
-      setState={setFn}
-      suggestionPriority={
-        (inputSuggestion: ResolvedType) => computePriority(
-          evalEditorBlock(state.fn.fn, env),
-          inputSuggestion,
-          suggestionPriority,
-          env,
-        )}
-      depth={depth+1}
-      errorDepth={errorDepth}
-      />;
-  }
-  else {
-    nestedParams = <></>;
-  }
   const isOffending = depth === errorDepth;
   return <div className={"inputParam" + (isOffending ? " offending" : "")}>
-    {nestedParams}
+    {state.fn.kind === "call"
+      && globalContext?.syntacticSugar
+      && <InputParams
+        {...nestedFnProperties({state, setState, suggestionPriority}, env)}
+        depth={depth+1}
+        errorDepth={errorDepth}
+        />}
     {/* Our own input param */}
     <Editor
-      state={state.input}
+      {...nestedInputProperties({state, setState, suggestionPriority}, env)}
-      setState={setInput}
-      onCancel={onInputCancel}
-      suggestionPriority={
-        (inputSuggestion: ResolvedType) => computePriority(
-          evalEditorBlock(state.fn, env), // fn *may* be set
-          inputSuggestion,       // suggestions will be for input
-          suggestionPriority,       // priority function we get from parent block
-          env,
-        )}
       />
   </div>;
 }