Dropdown links on help button

Author: fileformat

package-lock.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
     "fetch-jsonp": "^1.3.0",
     "next": "^14.2.14",

package.json

@@ -6,6 +6,7 @@ import TestForm from './TestForm';
 //import { testRegexAction } from './testRegexAction';
 //import OptionsInput from './OptionsInput';
 import { TestInput } from '@/types/TestInput';
+import { HelpButton } from '@/components/HelpButton';
 
 export async function generateMetadata({ params }: { params: { engine: string } }) {
     const engine = getEngine(params.engine);
@@ -48,7 +49,7 @@ export default function Page({ params }: { params: { engine: string } }) {
         <>
             <div className="d-flex justify-content-between align-items-center">
                 <h1>{engine.short_name} Regular Expression Test Page</h1>
-                <a className="btn btn-success" href={engine.help_url} target="_blank">{engine.help_label}</a>
+                <HelpButton engine={engine} />
             </div>
             <ShareLinks url={`https://regexplanet.com/advanced/${engine.handle}/index.html`} text={`Test your ${engine.short_name} regular expression`} />
             <hr />

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

@@ -20,7 +20,7 @@ async function lookupShareCode(shareCode: string): Promise<ShareFormState> {
     //shareCode = "yyyyfud6z4r";
     const shareApiUrl = shareCode.indexOf('-') === -1 
         ? `https://appengine.regexplanet.com/share/index.json?share=${shareCode}` 
-        : `https://www.regex.zone/share/lookup.json?share=${shareCode}`;
+        : `https://www.regex.zone/sharing/lookup.json?share=${shareCode}`;
     const response = await fetch(shareApiUrl);
     const data = await response.json();
     console.log(`server response=${JSON.stringify(data)}`);
@@ -29,7 +29,7 @@ async function lookupShareCode(shareCode: string): Promise<ShareFormState> {
             message: `Share code ${shareCode} found!`,
             messageType: 'success',
             shareCode,
-            regex: data.recipe,
+            regex: data.regex /* regex.zone */ || data.recipe /* old regexplanet */,
         };
     }
     return {

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

@@ -0,0 +1,64 @@
+'use client'
+import { RegexEngine } from "@/engines/RegexEngine";
+import React from "react";
+import { useState, useEffect, useRef } from 'react';
+import { createPopper } from '@popperjs/core';
+
+type HelpButtonDropdownProps = {
+    links: Record<string, string>;
+};
+
+export function HelpButtonDropDown({ links }: HelpButtonDropdownProps) {
+    const [showPopover, setShowPopover] = useState(false);
+    const buttonRef = useRef(null);
+    const popoverRef = useRef(null);
+
+    useEffect(() => {
+        if (showPopover && buttonRef.current && popoverRef.current) {
+            const popper = createPopper(buttonRef.current, popoverRef.current, {
+                placement: 'bottom-end', // Customize placement as needed
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 0], // Adjust offset as needed
+                        },
+                    },
+                ],
+            });
+
+            return () => {
+                popper.destroy();
+            };
+        }
+    }, [showPopover]);
+
+    return (
+            <div className="btn-group" role="group">
+                <button 
+                    ref={buttonRef} 
+                    type="button" 
+                    className="btn btn-success dropdown-toggle border-start" 
+                    aria-expanded="false"
+                    onClick={(e) => { console.log(e); setShowPopover(!showPopover)}}>
+                    
+                </button>
+                { showPopover && (<ul ref={popoverRef} className="dropdown-menu show">
+                    { Object.entries(links).map(([key, value]) => <li key={key}><a className="dropdown-item" href={value}>{key}</a></li>) }
+                </ul>)}
+            </div>
+    );
+}
+
+type HelpButtonProps = {
+    engine: RegexEngine;
+};
+
+export function HelpButton({ engine }: HelpButtonProps) {
+    return (
+        <div className="btn-group" role="group" aria-label="Button group with nested dropdown">
+            <a href={engine.help_url} className="btn btn-success" target="_blank">{engine.help_label}</a>
+            { Object.keys(engine.links).length > 0 ? <HelpButtonDropDown links={engine.links} /> : null }
+        </div>
+    )
+}