Sharing (WIP) and listing unsupported engines

Author: fileformat

package-lock.json

@@ -2,7 +2,7 @@
   "dependencies": {
     "bootstrap": "^5.3.3",
     "fetch-jsonp": "^1.3.0",
-    "next": "^14.2.13",
+    "next": "^14.2.14",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0"

package.json

@@ -29,6 +29,7 @@ export default function TestForm({ engine }: TestFormProps) {
         const form = event.currentTarget;
         const formData = new FormData(form);
         const localInput: TestInput = {
+            engine: engine.handle,
             regex: formData.get('regex') as string,
             replacement: formData.get('replacement') as string,
             option: formData.getAll('option') as string[],

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

@@ -11,8 +11,8 @@ export async function generateMetadata({ params }: { params: { engine: string }
     }
 
     return {
-        title: `Test your ${engine.short_name} regular expression - RegexPlanet`,
-        description: `Online testing for ${engine.short_name} regular expressions.`,
+        title: `${engine.short_name} regex testing - RegexPlanet`,
+        description: `Online testing for ${engine.short_name} (${engine.description}) regular expressions.`,
     }
 }
 

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

@@ -30,6 +30,7 @@ export async function GET(
     }
 
   const testInput = {
+    engine: engine.handle,
     regex: "test",
     replacement: "test",
     option: [],
@@ -69,6 +70,7 @@ export async function POST(
   const rawData = await request.formData();
 
   const testInput = {
+    engine: engine.handle,
     regex: (rawData.get("regex") || "") as string,
     replacement: (rawData.get("replacement") || "") as string,
     option: (rawData.getAll("options") || "") as string[],

src/app/advanced/[engine]/results.html/route.ts

@@ -39,7 +39,7 @@ export default function Home() {
           <div className="card-body pt-1">
             Share codes are an easy way to share regexes.  If you have a share code, enter it here:
             <div className="pt-2 d-flex justify-content-center">
-              <form action="/share/index.html" className="form-inline" method="post">
+              <form action="/share/index.html" className="form-inline" method="get">
                 <div className="input-group">
                   <input type="text" className="form-control" name="share" placeholder="Share code" />
                   <button type="submit" className="btn btn-primary">Go</button>

src/app/page.tsx

@@ -0,0 +1,31 @@
+import { TestInput } from '@/types/TestInput';
+import { SubmitButton } from '@/components/SubmitButton';
+import { getWorkingEngine, getWorkingEngineOrThrow } from '@/engines';
+
+type PreviewRegexProps = {
+    theShare: TestInput;
+}
+
+export function PreviewRegex( {theShare}: PreviewRegexProps) {
+    const engineCode = theShare.engine;
+    let theEngine = getWorkingEngine(engineCode);
+    if (!theEngine) {
+        theEngine = getWorkingEngineOrThrow("java");
+    }
+    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} />
+                </div>
+                <div className="mb-3">
+                    <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>
+            <details className="mt-3"><summary>Raw data</summary><pre>{JSON.stringify(theShare, null, 2)}</pre></details>
+        </>
+    )
+}

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

@@ -0,0 +1,22 @@
+import Link from "next/link";
+
+type ShareFormProps = {
+    shareCode?: string;
+}
+
+
+export function ShareForm(props: ShareFormProps) {
+
+    return (
+        <div className="d-flex justify-content-center">
+            <form action="/share/index.html" className="col-8 col-lg-4 border p-3" method="get">
+                <div className="mb-3">
+                    <label htmlFor="legacy" className="form-label">Share Code</label>
+                    <input type="text" className="form-control" id="share" name="share" defaultValue={props.shareCode} />
+                </div>
+                <button type="submit" className="btn btn-primary">Submit</button>
+                <Link className="btn btn-outline-primary ms-2" href="/">Cancel</Link>
+            </form>
+        </div>
+    )
+}

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

@@ -0,0 +1,8 @@
+import { TestInput } from "@/types/TestInput";
+
+export type ShareFormState = {
+  shareCode?: string;
+  message?: string;
+  messageType?: string;
+  regex?: TestInput;
+};

src/app/share/index.html/ShareFormState.ts

@@ -0,0 +1,54 @@
+import { Metadata } from 'next';
+
+import { cleanupSearchParam } from '@/functions/cleanupSearchParam';
+import { ShareFormState } from './ShareFormState';
+import { ShareForm } from './ShareForm';
+import { PreviewRegex } from './PreviewRegex';
+
+export const metadata: Metadata = {
+    title: "Sharing - RegexPlanet",
+};
+
+async function lookupShareCode(shareCode: string): Promise<ShareFormState> {
+
+    if (!shareCode) {
+        return {
+            message: "Please enter a share code",
+            messageType: "info",
+        };
+    }
+    //shareCode = "yyyyfud6z4r";
+    const response = await fetch(`https://www.regexplanet.com/share/index.json?share=${shareCode}`);
+    const data = await response.json();
+    console.log(`server response=${JSON.stringify(data)}`);
+    if (data.success) {
+        return {
+            message: `Share code ${shareCode} found!`,
+            messageType: 'success',
+            shareCode,
+            regex: data.recipe,
+        };
+    }
+    return {
+        message: `Share code ${shareCode} not found`,
+        messageType: 'danger',
+        shareCode,
+    };
+}
+
+export default async function Page({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) 
+{
+    const shareCode = cleanupSearchParam(searchParams["share"]);
+    const shareFormState = await lookupShareCode(shareCode);
+
+    return (
+        <>
+            <h1>Sharing</h1>
+            { shareFormState.message ? <div className={`alert alert-${shareFormState.messageType || "info"}`}>{shareFormState.message}</div> : null }
+            { shareFormState.regex
+                ? <PreviewRegex theShare={shareFormState.regex} />
+                : <ShareForm shareCode={shareCode} />
+            }   
+        </>
+    );
+}

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

@@ -0,0 +1,13 @@
+'use client';
+
+import { useFormStatus } from 'react-dom';
+
+export function SubmitButton({ children }: { children: React.ReactNode }) {
+    const { pending } = useFormStatus();
+
+    return (
+        <button className="btn btn-primary" type="submit" aria-disabled={pending}>
+            {children}
+        </button>
+    );
+}

src/components/SubmitButton.tsx

@@ -0,0 +1,25 @@
+import type { RegexEngine } from "./RegexEngine";
+
+export const dotnet: RegexEngine = {
+  description: "System.Text.RegularExpressions.Regex",
+  enabled: true,
+  help_label: "MSDN",
+  help_url:
+    "https://learn.microsoft.com/en-us/dotnet/api/system.text.regularexpressions?view=net-8.0",
+  handle: "dotnet",
+  level: "alpha",
+  links: {
+    "Learn .NET regular expressions":
+      "https://learn.microsoft.com/en-us/dotnet/standard/base-types/regular-expressions",
+    "Quick Reference":
+      "https://learn.microsoft.com/en-us/dotnet/standard/base-types/regular-expressions#reference",
+    "Best Practices":
+      "https://learn.microsoft.com/en-us/dotnet/standard/base-types/best-practices-regex",
+    " Behavior details":
+      "https://learn.microsoft.com/en-us/dotnet/standard/base-types/details-of-regular-expression-behavior",
+  },
+  logo_icon: "https://www.vectorlogo.zone/logos/dotnet/dotnet-icon.svg",
+  logo_ar21: "https://www.vectorlogo.zone/logos/dotnet/dotnet-ar21.svg",
+  options: [],
+  short_name: ".NET",
+};