Skip to content

Commit 2f907e4

Browse files
fileformatfileformat
committed
Tweaks to test form handling, working except for 'fewer inputs'
1 parent 6bbf5e9 commit 2f907e4

File tree

4 files changed

+97
-59
lines changed

4 files changed

+97
-59
lines changed

‎.github/workflows/gcr-deploy.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ jobs:
2121

2222
steps:
2323
- name: Checkout
24-
uses: actions/checkout@v1
24+
uses: actions/checkout@v4
2525

2626
- name: gcloud auth
2727
id: 'auth'

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

Lines changed: 40 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
11
'use client'
2-
import React, { useState } from 'react';
2+
import React, { useEffect, useState } from 'react';
33
import { TestResults } from '@/components/TestResults';
44
import { RegexEngine } from '@/engines/RegexEngine';
55
import OptionsInput from './OptionsInput';
6-
import { runTest as runBrowserTest, type TestInput, type TestOutput } from '@regexplanet/common';
6+
import { type TestInput, type TestOutput } from '@regexplanet/common';
77
import { useRouter } from 'next/navigation';
88
import { formDataToTestInput } from '@/functions/formDataToTestInput';
9+
import { runTestPage } from './runTestPage';
910

1011
type TestFormProps = {
1112
engine: RegexEngine;
12-
testUrl?: string; // override for use during engine development
13+
testUrl: string;
1314
testInput: TestInput;
15+
testOutput: TestOutput|null;
1416
}
1517

16-
function setTestInput(testInput: TestInput) {
18+
const pendingTestOutput: TestOutput = {
19+
success: true,
20+
html: `<p><img src="/images/spinner.gif" alt="spinner" /> Running, please wait...</p>`,
21+
};
22+
23+
function setTestInput(testInput: TestInput): string {
1724
const searchParams = new URLSearchParams();
1825
searchParams.set('regex', testInput.regex);
1926
searchParams.set('replacement', testInput.replacement);
@@ -22,49 +29,13 @@ function setTestInput(testInput: TestInput) {
2229

2330
const url = new URL(window.location.href);
2431
url.search = searchParams.toString();
25-
window.history.pushState({}, '', url.toString());
26-
}
27-
28-
async function runTest(test_url:string, testInput: TestInput): Promise<TestOutput> {
29-
30-
console.log("running test", testInput);
31-
if (!testInput || !testInput.regex) {
32-
return {
33-
success: false,
34-
message: "Please enter a regular expression to test",
35-
};
36-
}
37-
38-
if (test_url === 'javascript:runBrowserTest') {
39-
return runBrowserTest(testInput);
40-
}
41-
42-
const postData =
43-
`regex=${encodeURIComponent(testInput.regex)}` +
44-
`&replacement=${encodeURIComponent(testInput.replacement)}` +
45-
`&${testInput.options.map((option) => `option=${encodeURIComponent(option)}`).join("&")}` +
46-
`&${testInput.inputs.map((input) => `input=${encodeURIComponent(input)}`).join("&")}`;
47-
48-
console.log("posting", test_url, postData);
4932

50-
const response = await fetch(test_url, {
51-
method: "POST",
52-
body: postData,
53-
headers: {
54-
"Content-Type": "application/x-www-form-urlencoded",
55-
},
56-
//mode: "no-cors",
57-
});
58-
console.log("response", response);
59-
const data = await response.json();
60-
61-
console.log("test results", data);
62-
63-
return data as TestOutput;
33+
//window.history.pushState({}, '', url.toString());
34+
return url.toString();
6435
}
6536

6637
export default function TestForm(props: TestFormProps) {
67-
const [testOutput, setTestOutput] = useState<TestOutput | null>();
38+
const [testOutput, setTestOutput] = useState<TestOutput | null>(props.testOutput);
6839
const router = useRouter()
6940
//const [testInput, setTestInput] = useState<TestInput>(props.testInput);
7041
const testInput = props.testInput;
@@ -79,22 +50,36 @@ export default function TestForm(props: TestFormProps) {
7950
const onClearResults = () => {
8051
setTestOutput(null);
8152
};
82-
8353
const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
8454
event.preventDefault();
8555
const form = event.currentTarget;
8656
const formData = new FormData(form);
8757
const localInput = formDataToTestInput( props.engine.handle, formData);
88-
const testUrl = props.testUrl || props.engine.test_url;
89-
console.log(testUrl, localInput);
58+
console.log(props.testUrl, localInput);
9059
setTestInput(localInput);
91-
setTestOutput({ success: true, message: "Loading..."});
92-
if (testUrl) {
93-
const newTestOutput = await runTest(testUrl, localInput);
94-
console.log("newTestOutput", newTestOutput);
95-
setTestOutput(newTestOutput);
96-
}
60+
setTestOutput(pendingTestOutput);
61+
const newTestOutput = await runTestPage(props.testUrl, localInput);
62+
console.log("newTestOutput", newTestOutput);
63+
setTestOutput(newTestOutput);
9764
};
65+
/*
66+
const onSubmit = () => {
67+
setTestOutput(pendingTestOutput);
68+
}
69+
*/
70+
71+
useEffect(() => {
72+
async function runTestEffect() {
73+
if (props.testInput.regex) {
74+
const testUrl = props.testUrl || props.engine.test_url;
75+
if (testUrl) {
76+
const newTestOutput = await runTestPage(testUrl, props.testInput);
77+
setTestOutput(newTestOutput);
78+
}
79+
}}
80+
if (props.testInput.regex) { setTestOutput(pendingTestOutput) };
81+
runTestEffect();
82+
}, [props.testInput, props.testUrl, props.engine.test_url]);
9883

9984
const onMoreInputs = (event: React.MouseEvent<HTMLButtonElement>) => {
10085
event.preventDefault();
@@ -111,7 +96,7 @@ export default function TestForm(props: TestFormProps) {
11196
}
11297
console.log("after more", localInput.inputs);
11398

114-
setTestInput(localInput);
99+
router.push(setTestInput(localInput));
115100
}
116101

117102
const onFewerInputs = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -128,8 +113,8 @@ export default function TestForm(props: TestFormProps) {
128113
while (localInput.inputs.length < 5) {
129114
localInput.inputs.push('');
130115
}
131-
setTestInput(localInput);
132116
console.log("after fewer", localInput.inputs);
117+
router.push(setTestInput(localInput));
133118
};
134119

135120
const onSwitchEngines = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -156,7 +141,7 @@ export default function TestForm(props: TestFormProps) {
156141
return (
157142
<>
158143
{
159-
props.testUrl ? <div className="alert alert-warning">Testing against {props.testUrl}!</div> : <></>
144+
props.testUrl != props.engine.test_url ? <div className="alert alert-warning">Testing against {props.testUrl}!</div> : <></>
160145
}
161146
<h2>Expression to test</h2>
162147
<form method="get" action="index.html" onSubmit={onSubmit}>
@@ -173,7 +158,6 @@ export default function TestForm(props: TestFormProps) {
173158
<button type="submit" className="btn btn-primary">Test</button>
174159
{
175160
(testOutput ? <TestResults onClear={onClearResults} testOutput={testOutput} /> : <></>)
176-
177161
}
178162
<h2 className="pt-3">Inputs</h2>
179163
{inputRows}

‎src/app/advanced/[engine]/index.html/page.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { type TestInput } from '@regexplanet/common';
77
import { HelpButton } from '@/components/HelpButton';
88
import { cleanupSearchParam } from '@/functions/cleanupSearchParam';
99
import { cleanupSearchParamArray } from '@/functions/cleanupSearchParamArray';
10+
import { runTestPage } from './runTestPage';
1011

1112
export async function generateMetadata({ params }: { params: { engine: string } }) {
1213
const engine = getEngine(params.engine);
@@ -20,7 +21,7 @@ export async function generateMetadata({ params }: { params: { engine: string }
2021
}
2122
}
2223

23-
export default function Page({
24+
export default async function Page({
2425
params,
2526
searchParams,
2627
}: {
@@ -43,6 +44,8 @@ export default function Page({
4344
</div>;
4445
}
4546

47+
const testUrl = cleanupSearchParam(searchParams["testurl"]) || engine.test_url || `javascript:runBrowserTest`;
48+
4649
const testInput:TestInput = {
4750
engine: engine.handle,
4851
regex: cleanupSearchParam(searchParams["regex"]),
@@ -55,6 +58,8 @@ export default function Page({
5558
testInput.inputs.push("");
5659
}
5760

61+
const testOutput = testInput.regex ? await runTestPage(testUrl, testInput) : null;
62+
5863
return (
5964
<>
6065
<div className="d-flex justify-content-between align-items-center">
@@ -64,7 +69,7 @@ export default function Page({
6469
<ShareLinks url={`https://regexplanet.com/advanced/${engine.handle}/index.html`} text={`Test your ${engine.short_name} regular expression`} />
6570
<hr />
6671
{flash}
67-
<TestForm engine={engine} testUrl={cleanupSearchParam(searchParams["testurl"])} testInput={testInput} />
72+
<TestForm engine={engine} testUrl={testUrl} testInput={testInput} testOutput={testOutput}/>
6873
</>
6974
);
7075
}

‎src/app/advanced/[engine]/index.html/runTestPage.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import {
2+
runTest as runBrowserTest,
3+
type TestInput,
4+
type TestOutput,
5+
} from "@regexplanet/common";
6+
7+
export async function runTestPage(
8+
test_url: string,
9+
testInput: TestInput
10+
): Promise<TestOutput> {
11+
console.log("running test", testInput);
12+
if (!testInput || !testInput.regex) {
13+
return {
14+
success: false,
15+
message: "Please enter a regular expression to test",
16+
};
17+
}
18+
19+
if (test_url === "javascript:runBrowserTest") {
20+
return runBrowserTest(testInput);
21+
}
22+
23+
const postData =
24+
`regex=${encodeURIComponent(testInput.regex)}` +
25+
`&replacement=${encodeURIComponent(testInput.replacement)}` +
26+
`&${testInput.options
27+
.map((option) => `option=${encodeURIComponent(option)}`)
28+
.join("&")}` +
29+
`&${testInput.inputs
30+
.map((input) => `input=${encodeURIComponent(input)}`)
31+
.join("&")}`;
32+
33+
//console.log("posting", test_url, postData);
34+
35+
const response = await fetch(test_url, {
36+
method: "POST",
37+
body: postData,
38+
headers: {
39+
"Content-Type": "application/x-www-form-urlencoded",
40+
},
41+
//mode: "no-cors",
42+
});
43+
//console.log("response", response);
44+
const data = await response.json();
45+
46+
console.log("test results", data);
47+
48+
return data as TestOutput;
49+
}

0 commit comments

Comments
 (0)