FunctinDigith and focusTarget scrolling

src/ui/Function/NewFunctionDraftDigith.tsx

@@ -8,6 +8,7 @@ import { ShowParseError } from "../ParseError";
 import { Program } from "src/lang/program";
 import { V, Validation, letValidate } from "../validation";
 import { ProgramErrorDisplay,  validateExprRaw, validateNameRaw, validateParamsRaw } from "./Helpers";
+import { spawnFunctionDigith } from "../scrowlStore";
 
 
 type NewFnError =
@@ -20,6 +21,29 @@ const fieldLabels: Record<string, string> = {
   body: "Function Body"
 };
 
+type Input = {
+  raw_name: string,
+  raw_params: string,
+  raw_body: string,
+}
+
+const validator: Validation<Input, Program.CreateFunction, NewFnError> = letValidate(
+  (input: Input) =>({
+    name: V.elseErr(validateNameRaw(input.raw_name), err => ({ tag: "Parse", field: "name", err, src: sourceText(input.raw_name) })),
+    parameters: V.elseErr(validateParamsRaw(input.raw_params), err => ({ tag: "Parse", field: "params", err, src: sourceText(input.raw_params) })),
+    body: V.elseErr(validateExprRaw(input.raw_body), err => ({ tag: "Parse", field: "body", err, src: sourceText(input.raw_body) })),
+  }),
+  (fields, input) => {
+    const createFunction: Program.CreateFunction = {
+      name: fields.name,
+      parameters: fields.parameters,
+      body: fields.body,
+      raw_parameters: input.raw_params,
+      raw_body: input.raw_body,
+    };
+    return V.ok(createFunction);
+})
+
 export function SingleErrorDisplay(props: { error: NewFnError }) {
   return (
     <div style={{ "margin-bottom": "1rem" }}>
@@ -65,52 +89,30 @@ export function NewFunctionDraftDigith(props: { draft: Digith.NewFunctionDraft }
   const [params, setParams] = createSignal(props.draft.raw_parameters);
   const [body, setBody] = createSignal(props.draft.raw_body);
 
-  const [validResult, setValidResult] = createSignal<V<void, NewFnError> | null>(null);
+  const [errors, setErrors] = createSignal<NewFnError[]>([]);
 
-  type Input = {
-    raw_name: string,
-    raw_params: string,
-    raw_body: string,
-  }
-
-  const validator: Validation<Input, void, NewFnError> = letValidate((input: Input) => ({
-      name: V.elseErr(validateNameRaw(input.raw_name), err => ({ tag: "Parse", field: "name", err, src: sourceText(input.raw_name) })),
-      parameters: V.elseErr(validateParamsRaw(input.raw_params), err => ({ tag: "Parse", field: "params", err, src: sourceText(input.raw_params) })),
-      body: V.elseErr(validateExprRaw(input.raw_body), err => ({ tag: "Parse", field: "body", err, src: sourceText(input.raw_body) })),
-    }),
-    (fields, input) => {
-      const createFunction: Program.CreateFunction = {
-        name: fields.name,
-        parameters: fields.parameters,
-        body: fields.body,
-        raw_parameters: input.raw_name,
-        raw_body: input.raw_body,
-      };
-
-      const regResult = Program.registerFunction(program, createFunction);
-      if (regResult.tag === "ok") {
-        // TODO: Side effects? Not sure about this. Ideally validator would be pure... but it is nice that we can return errors here.
-        // But then again... these are not really normal errors, right? or? But that's probably a misuse...
-        // For now we just return Ok
-        return V.ok(undefined);
-      } else {
-        return V.error({ tag: "Program", err: regResult.error });
-      }
-  });
-
-  // TODO: There's something wrong with this, it doesn't trigger when expected... WTF
   function handleCommit() {
-    const result = validator({ raw_name: name(), raw_params: params(), raw_body: body() });
-    setValidResult(result);
-    if (result.tag === "ok") {
-      // Handle success closure here if needed
-      console.log("Function created successfully!");
+    setErrors([]);
+    const validRes = validator({ raw_name: name(), raw_params: params(), raw_body: body() });
+    if (validRes.tag === "errors") {
+      setErrors(validRes.errors as NewFnError[]);
+      return;
     }
+    const createFunction = validRes.value;
+
+    const programRes = Program.registerFunction(program, createFunction);
+    if (programRes.tag === "error") {
+      setErrors([{ tag: "Program", err: programRes.error }]);
+      return;
+    }
+    const fnName = programRes.value;
+
+    spawnFunctionDigith(program, fnName, props.draft.id);
   };
 
   return (
     <article>
-      <header><strong>Fn Draft</strong></header>
+      <header><strong>Fn (Draft)</strong></header>
 
       <div class="grid">
         <label>
@@ -144,10 +146,8 @@ export function NewFunctionDraftDigith(props: { draft: Digith.NewFunctionDraft }
         <button class="primary" onClick={handleCommit}>Commit</button>
       </footer>
 
-      <Show when={validResult()?.tag === "errors"}>
-        <ErrorListDisplay 
-          errors={(validResult() as { tag: "errors", errors: NewFnError[] }).errors} 
-        />
+      <Show when={errors().length > 0}>
+        <ErrorListDisplay errors={errors()} />
       </Show>
     </article>
   );