Sharing working, including selecting which engine

Author: fileformat

src/app/share/index.html/PreviewRegex.tsx

@@ -1,20 +1,19 @@
 import { type TestInput } from "@regexplanet/common";
 import { SubmitButton } from '@/components/SubmitButton';
-import { getWorkingEngine, getWorkingEngineOrThrow } from '@/engines';
+import { getWorkingEngines } from '@/engines';
 
 type PreviewRegexProps = {
     theShare: TestInput;
 }
 
 export function PreviewRegex( {theShare}: PreviewRegexProps) {
-    const engineCode = theShare.engine;
-    let theEngine = getWorkingEngine(engineCode);
-    if (!theEngine) {
-        theEngine = getWorkingEngineOrThrow("java");
-    }
+
+    theShare.engine = theShare.engine || 'java';
+
+    const options = theShare.options.map((option, index) => { return (<input type="hidden" name="option" key={`option_${index}`} value={option} />); });
+    const inputs = theShare.inputs.map((input, index) => { return (<input type="hidden" key={`input_${index}`} name="input" value={input} />) });
     return (
         <>
-            <form action={`/advanced/${theEngine.handle}/index.html`} className="" method="post">
                 <div className="mb-3">
                     <label htmlFor="regex" className="form-label">Regular Expression</label>
                     <input type="text" className="form-control" id="regex" name="regex" defaultValue={theShare.regex} />
@@ -23,8 +22,18 @@ export function PreviewRegex( {theShare}: PreviewRegexProps) {
                     <label htmlFor="replacement" className="form-label">Replacement</label>
                     <input type="text" className="form-control" id="replacement" name="replacement" defaultValue={theShare.replacement} />
                 </div>
-                <SubmitButton>{`Test with ${theEngine.short_name}`}</SubmitButton>
-            </form>
+                <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">
+                <input type="hidden" name="engine" value={theEngine.handle} />
+                <input type="hidden" name="regex" value={theShare.regex} />
+                <input type="hidden" name="replacement" value={theShare.replacement} />
+                {options}
+                {inputs}
+                <button className={`btn ${theShare.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(theShare, null, 2)}</pre></details>
         </>
     )