Tweaks to test form handling, working except for 'fewer inputs'

fileformat · fileformat · commit 2f907e42f490 · 2024-11-02T17:49:26.000-04:00
diff --git a/.github/workflows/gcr-deploy.yaml b/.github/workflows/gcr-deploy.yaml
@@ -21,7 +21,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v1
+        uses: actions/checkout@v4
 
       - name: gcloud auth
         id: 'auth'
diff --git a/src/app/advanced/[engine]/index.html/TestForm.tsx b/src/app/advanced/[engine]/index.html/TestForm.tsx
@@ -1,19 +1,26 @@
 'use client'
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { TestResults } from '@/components/TestResults';
 import { RegexEngine } from '@/engines/RegexEngine';
 import OptionsInput from './OptionsInput';
-import { runTest as runBrowserTest, type TestInput, type TestOutput } from '@regexplanet/common';
+import { type TestInput, type TestOutput } from '@regexplanet/common';
 import { useRouter } from 'next/navigation';
 import { formDataToTestInput } from '@/functions/formDataToTestInput';
+import { runTestPage } from './runTestPage';
 
 type TestFormProps = {
     engine: RegexEngine;
-    testUrl?: string;       // override for use during engine development
+    testUrl: string;
     testInput: TestInput;
+    testOutput: TestOutput|null;
 }
 
-function setTestInput(testInput: TestInput) {
+const pendingTestOutput: TestOutput = {
+    success: true,
+    html: `<p><img src="/images/spinner.gif" alt="spinner" /> Running, please wait...</p>`,
+};
+
+function setTestInput(testInput: TestInput): string {
     const searchParams = new URLSearchParams();
     searchParams.set('regex', testInput.regex);
     searchParams.set('replacement', testInput.replacement);
@@ -22,49 +29,13 @@ function setTestInput(testInput: TestInput) {
 
     const url = new URL(window.location.href);
     url.search = searchParams.toString();
-    window.history.pushState({}, '', url.toString());
-}
-
-async function runTest(test_url:string, testInput: TestInput): Promise<TestOutput> {
-
-    console.log("running test", testInput);
-    if (!testInput || !testInput.regex) {
-        return {
-            success: false,
-            message: "Please enter a regular expression to test",
-        };
-    }
-
-    if (test_url === 'javascript:runBrowserTest') {
-        return runBrowserTest(testInput);
-    }
-
-    const postData =
-        `regex=${encodeURIComponent(testInput.regex)}` +
-        `&replacement=${encodeURIComponent(testInput.replacement)}` +
-        `&${testInput.options.map((option) => `option=${encodeURIComponent(option)}`).join("&")}` +
-        `&${testInput.inputs.map((input) => `input=${encodeURIComponent(input)}`).join("&")}`;
-
-    console.log("posting", test_url, postData);
 
-    const response = await fetch(test_url, {
-        method: "POST",
-        body: postData,
-        headers: {
-            "Content-Type": "application/x-www-form-urlencoded",
-        },
-        //mode: "no-cors",
-    });
-    console.log("response", response);
-    const data = await response.json();
-
-    console.log("test results", data);
-
-    return data as TestOutput;
+    //window.history.pushState({}, '', url.toString());
+    return url.toString();
 }
 
 export default function TestForm(props: TestFormProps) {
-    const [testOutput, setTestOutput] = useState<TestOutput | null>();
+    const [testOutput, setTestOutput] = useState<TestOutput | null>(props.testOutput);   
     const router = useRouter()
     //const [testInput, setTestInput] = useState<TestInput>(props.testInput);
     const testInput = props.testInput;
@@ -79,22 +50,36 @@ export default function TestForm(props: TestFormProps) {
     const onClearResults = () => {
         setTestOutput(null);
     };
-
     const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         const form = event.currentTarget;
         const formData = new FormData(form);
         const localInput = formDataToTestInput( props.engine.handle, formData);
-        const testUrl = props.testUrl || props.engine.test_url;
-        console.log(testUrl, localInput);
+        console.log(props.testUrl, localInput);
         setTestInput(localInput);
-        setTestOutput({ success: true, message: "Loading..."});
-        if (testUrl) {
-            const newTestOutput = await runTest(testUrl, localInput);
-            console.log("newTestOutput", newTestOutput);
-            setTestOutput(newTestOutput);
-        }
+        setTestOutput(pendingTestOutput);
+        const newTestOutput = await runTestPage(props.testUrl, localInput);
+        console.log("newTestOutput", newTestOutput);
+        setTestOutput(newTestOutput);
     };
+/*
+    const onSubmit = () => {
+        setTestOutput(pendingTestOutput);
+    }
+*/
+    
+    useEffect(() => {
+        async function runTestEffect() {
+        if (props.testInput.regex) {
+            const testUrl = props.testUrl || props.engine.test_url;
+            if (testUrl) {
+                const newTestOutput = await runTestPage(testUrl, props.testInput);
+                setTestOutput(newTestOutput);
+            }
+        }}
+        if (props.testInput.regex) { setTestOutput(pendingTestOutput) };
+        runTestEffect();
+    }, [props.testInput, props.testUrl, props.engine.test_url]);
 
     const onMoreInputs = (event: React.MouseEvent<HTMLButtonElement>) => {
         event.preventDefault();
@@ -111,7 +96,7 @@ export default function TestForm(props: TestFormProps) {
         }
         console.log("after more", localInput.inputs);
 
-        setTestInput(localInput);
+        router.push(setTestInput(localInput));
     }
 
     const onFewerInputs = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -128,8 +113,8 @@ export default function TestForm(props: TestFormProps) {
         while (localInput.inputs.length < 5) {
             localInput.inputs.push('');
         }
-        setTestInput(localInput);
         console.log("after fewer", localInput.inputs);
+        router.push(setTestInput(localInput));
     };
 
     const onSwitchEngines = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -156,7 +141,7 @@ export default function TestForm(props: TestFormProps) {
     return (
         <>  
             {
-                props.testUrl ? <div className="alert alert-warning">Testing against {props.testUrl}!</div> : <></>
+                props.testUrl != props.engine.test_url ? <div className="alert alert-warning">Testing against {props.testUrl}!</div> : <></>
             }
             <h2>Expression to test</h2>
             <form method="get" action="index.html" onSubmit={onSubmit}>
@@ -173,7 +158,6 @@ export default function TestForm(props: TestFormProps) {
                 <button type="submit" className="btn btn-primary">Test</button>
                 {
                     (testOutput ? <TestResults onClear={onClearResults} testOutput={testOutput} /> : <></>)
-                    
                 }
                 <h2 className="pt-3">Inputs</h2>
                 {inputRows}
diff --git a/src/app/advanced/[engine]/index.html/page.tsx b/src/app/advanced/[engine]/index.html/page.tsx
@@ -7,6 +7,7 @@ import { type TestInput } from '@regexplanet/common';
 import { HelpButton } from '@/components/HelpButton';
 import { cleanupSearchParam } from '@/functions/cleanupSearchParam';
 import { cleanupSearchParamArray } from '@/functions/cleanupSearchParamArray';
+import { runTestPage } from './runTestPage';
 
 export async function generateMetadata({ params }: { params: { engine: string } }) {
     const engine = getEngine(params.engine);
@@ -20,7 +21,7 @@ export async function generateMetadata({ params }: { params: { engine: string }
     }
 }
 
-export default function Page({
+export default async function Page({
     params,
     searchParams,
 }: {
@@ -43,6 +44,8 @@ export default function Page({
         </div>;
     }
 
+    const testUrl = cleanupSearchParam(searchParams["testurl"]) || engine.test_url || `javascript:runBrowserTest`;
+
     const testInput:TestInput = {
         engine: engine.handle,
         regex: cleanupSearchParam(searchParams["regex"]),
@@ -55,6 +58,8 @@ export default function Page({
         testInput.inputs.push("");
     }
 
+    const testOutput = testInput.regex ? await runTestPage(testUrl, testInput) : null;
+
     return (
         <>
             <div className="d-flex justify-content-between align-items-center">
@@ -64,7 +69,7 @@ export default function Page({
             <ShareLinks url={`https://regexplanet.com/advanced/${engine.handle}/index.html`} text={`Test your ${engine.short_name} regular expression`} />
             <hr />
             {flash}
-            <TestForm engine={engine} testUrl={cleanupSearchParam(searchParams["testurl"])} testInput={testInput} />
+            <TestForm engine={engine} testUrl={testUrl} testInput={testInput} testOutput={testOutput}/>
         </>
     );
 }
diff --git a/src/app/advanced/[engine]/index.html/runTestPage.ts b/src/app/advanced/[engine]/index.html/runTestPage.ts
@@ -0,0 +1,49 @@
+import {
+  runTest as runBrowserTest,
+  type TestInput,
+  type TestOutput,
+} from "@regexplanet/common";
+
+export async function runTestPage(
+  test_url: string,
+  testInput: TestInput
+): Promise<TestOutput> {
+  console.log("running test", testInput);
+  if (!testInput || !testInput.regex) {
+    return {
+      success: false,
+      message: "Please enter a regular expression to test",
+    };
+  }
+
+  if (test_url === "javascript:runBrowserTest") {
+    return runBrowserTest(testInput);
+  }
+
+  const postData =
+    `regex=${encodeURIComponent(testInput.regex)}` +
+    `&replacement=${encodeURIComponent(testInput.replacement)}` +
+    `&${testInput.options
+      .map((option) => `option=${encodeURIComponent(option)}`)
+      .join("&")}` +
+    `&${testInput.inputs
+      .map((input) => `input=${encodeURIComponent(input)}`)
+      .join("&")}`;
+
+  //console.log("posting", test_url, postData);
+
+  const response = await fetch(test_url, {
+    method: "POST",
+    body: postData,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    //mode: "no-cors",
+  });
+  //console.log("response", response);
+  const data = await response.json();
+
+  console.log("test results", data);
+
+  return data as TestOutput;
+}
