Button and page to switch engines

Author: fileformat

src/app/advanced/[engine]/index.html/TestForm.tsx

@@ -4,6 +4,8 @@ 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 { useRouter } from 'next/navigation';
+import { formDataToTestInput } from '@/functions/formDataToTestInput';
 
 type TestFormProps = {
     engine: RegexEngine;
@@ -63,6 +65,7 @@ async function runTest(test_url:string, testInput: TestInput): Promise<TestOutpu
 
 export default function TestForm(props: TestFormProps) {
     const [testOutput, setTestOutput] = useState<TestOutput | null>();
+    const router = useRouter()
     //const [testInput, setTestInput] = useState<TestInput>(props.testInput);
     const testInput = props.testInput;
 
@@ -127,7 +130,28 @@ export default function TestForm(props: TestFormProps) {
         }
         setTestInput(localInput);
         console.log("after fewer", localInput.inputs);
-    }
+    };
+
+    const onSwitchEngines = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const form = event.currentTarget.form;
+        if (!form) {
+            return;
+        }
+        const formData = new FormData(form);
+        const localInput = formDataToTestInput(props.engine.handle, formData);
+
+        const searchParams = new URLSearchParams();
+        searchParams.set('engine', props.engine.handle);
+        searchParams.set('regex', localInput.regex);
+        searchParams.set('replacement', localInput.replacement);
+        localInput.options.forEach(option => searchParams.append('option', option));
+        localInput.inputs.forEach(input => searchParams.append('input', input));
+
+        const url = new URL('/advanced/select.html', window.location.href);
+        url.search = searchParams.toString();
+        router.push(url.toString());
+    };
 
     return (
         <>  
@@ -156,18 +180,9 @@ export default function TestForm(props: TestFormProps) {
                 <button type="submit" className="btn btn-primary">Test</button>
                 <button className="ms-3 btn btn-outline-primary" onClick={onMoreInputs}>More inputs</button>
                 { testInput.inputs.length > 5 ? <button className="ms-3 btn btn-outline-primary" onClick={onFewerInputs}>Fewer inputs</button> : null }
+                <button type="submit" className="btn btn-outline-primary float-end" onClick={onSwitchEngines}>Switch Engines</button>
             </form>
         </>
     );
 }
 
-function formDataToTestInput(engineHandle:string, formData: FormData): TestInput {
-    const retVal: TestInput = {
-        engine: engineHandle,
-        regex: formData.get('regex') as string,
-        replacement: formData.get('replacement') as string,
-        options: formData.getAll('option') as string[],
-        inputs: formData.getAll('input') as string[]
-    };
-    return retVal;
-}

src/app/advanced/select.html/page.tsx

@@ -0,0 +1,58 @@
+'use client';
+import { type TestInput } from "@regexplanet/common";
+import { getWorkingEngines } from '@/engines';
+import { cleanupSearchParam } from "@/functions/cleanupSearchParam";
+import { cleanupSearchParamArray } from "@/functions/cleanupSearchParamArray";
+import { formDataToTestInput } from "@/functions/formDataToTestInput";
+import { testInputToSearchParams } from "@/functions/testInputToSearchParams";
+import { useRouter } from "next/navigation";
+
+export default function SelectEnginePage({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) {
+    const router = useRouter();
+
+    const testInput: TestInput = {
+        engine: cleanupSearchParam(searchParams["engine"], 'nodejs'),
+        regex: cleanupSearchParam(searchParams["regex"]),
+        replacement: cleanupSearchParam(searchParams["replacement"]),
+        options: cleanupSearchParamArray(searchParams["option"]),
+        inputs: cleanupSearchParamArray(searchParams["input"]),
+    }
+
+    const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+        const testInput = formDataToTestInput(formData.get('engine') as string, formData);
+        const url = `/advanced/${testInput.engine}/index.html?${testInputToSearchParams(testInput).toString()}`;
+        console.log('router.push', url);
+        router.push(url);
+    };
+
+    const options = testInput.options.map((option, index) => { return (<input type="hidden" name="option" key={`option_${index}`} value={option} />); });
+    const inputs = testInput.inputs.map((input, index) => { return (<input type="hidden" key={`input_${index}`} name="input" value={input} />) });
+    return (
+        <>
+            <h1>Select Engine</h1>
+                <div className="mb-3">
+                    <label htmlFor="regex" className="form-label">Regular Expression</label>
+                    <input type="text" className="form-control" id="regex" name="regex" defaultValue={testInput.regex} />
+                </div>
+                <div className="mb-3">
+                    <label htmlFor="replacement" className="form-label">Replacement</label>
+                    <input type="text" className="form-control" id="replacement" name="replacement" defaultValue={testInput.replacement} />
+                </div>
+                <div className="mb-3">
+                    <label className="form-label d-block">Test with:</label>
+            { getWorkingEngines().map((theEngine, index) => { return (
+            <form action={`/advanced/${theEngine.handle}/index.html`} className="d-inline-block m-1" key={`form_${index}`} method="get" onSubmit={onSubmit}>
+                <input type="hidden" name="engine" value={theEngine.handle} />
+                <input type="hidden" name="regex" value={testInput.regex} />
+                <input type="hidden" name="replacement" value={testInput.replacement} />
+                {options}
+                {inputs}
+                <button className={`btn ${testInput.engine == theEngine.handle ? 'btn-primary' : 'btn-outline-primary'}`}>{`${theEngine.short_name}`}</button>
+            </form>) })}
+            </div>
+            <details className="mt-3"><summary>Raw data</summary><pre>{JSON.stringify(testInput, null, 2)}</pre></details>
+        </>
+    )
+}

src/functions/formDataToTestInput.ts

@@ -0,0 +1,15 @@
+import { TestInput } from "@regexplanet/common";
+
+export function formDataToTestInput(
+  engineHandle: string,
+  formData: FormData
+): TestInput {
+  const retVal: TestInput = {
+    engine: engineHandle,
+    regex: formData.get("regex") as string,
+    replacement: formData.get("replacement") as string,
+    options: formData.getAll("option") as string[],
+    inputs: formData.getAll("input") as string[],
+  };
+  return retVal;
+}

src/functions/testInputToSearchParams.ts

@@ -0,0 +1,11 @@
+import { TestInput } from "@regexplanet/common";
+
+export function testInputToSearchParams(testInput: TestInput): URLSearchParams {
+    const searchParams = new URLSearchParams();
+    searchParams.set("engine", testInput.engine);
+    searchParams.set("regex", testInput.regex);
+    searchParams.set("replacement", testInput.replacement);
+    testInput.options.forEach((option) => searchParams.append("option", option));
+    testInput.inputs.forEach((input) => searchParams.append("input", input));
+    return searchParams;
+}