diff --git a/.github/workflows/gcr-deploy.yaml b/.github/workflows/gcr-deploy.yaml index c637207..f15350f 100644 --- 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 index 5eff390..6f867e6 100644 --- 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: `

spinner Running, please wait...

`, +}; + +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 { - - 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(); + const [testOutput, setTestOutput] = useState(props.testOutput); const router = useRouter() //const [testInput, setTestInput] = useState(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) => { 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) => { 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) => { @@ -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) => { @@ -156,7 +141,7 @@ export default function TestForm(props: TestFormProps) { return ( <> { - props.testUrl ?
Testing against {props.testUrl}!
: <> + props.testUrl != props.engine.test_url ?
Testing against {props.testUrl}!
: <> }

Expression to test

@@ -173,7 +158,6 @@ export default function TestForm(props: TestFormProps) { { (testOutput ? : <>) - }

Inputs

{inputRows} diff --git a/src/app/advanced/[engine]/index.html/page.tsx b/src/app/advanced/[engine]/index.html/page.tsx index 523c53e..cef7133 100644 --- 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({ ; } + 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 ( <>
@@ -64,7 +69,7 @@ export default function Page({
{flash} - + ); } \ No newline at end of file diff --git a/src/app/advanced/[engine]/index.html/runTestPage.ts b/src/app/advanced/[engine]/index.html/runTestPage.ts new file mode 100644 index 0000000..1f20676 --- /dev/null +++ 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 { + 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; +}