refactor: centralize example registry and switching logic (Issue #8)

components/TextBox.js

@@ -9,7 +9,7 @@ const Editor = dynamic(import('./Editor'), {
   ssr: false
 })
 
-function TextBox({ disabled, sourceCode, setSourceCode, exampleName, setExampleName, activeTab, handleUserTabChange, myHeight }) {
+function TextBox({ disabled, sourceCode, setSourceCode, exampleName, setExampleName, activeTab, handleUserTabChange, myHeight,handleExampleChange,CATEGORIZED_PROGRAMS = {} }) {
     const isMobile = useIsMobile(); 
     const [isFullScreen, setIsFullScreen] = useState(false);
 
@@ -28,28 +28,20 @@ function TextBox({ disabled, sourceCode, setSourceCode, exampleName, setExampleN
         }
     };
 
-    var menu_items = [];
-    for (let category in preinstalled_programs) {
-        var category_examples = []
-        for (let example in preinstalled_programs[category]) {
-            category_examples.push({
-                key: example,
-                label: example,
-                onClick: () => {
-                    setSourceCode(preinstalled_programs[category][example]);
-                    setExampleName(example);
-                }
-            });
-        }
-
-        menu_items.push({
+    const menu_items = Object.entries(CATEGORIZED_PROGRAMS || {}).map(([category, programs]) => {
+        return {
             key: category,
             label: category,
-            children: category_examples
-        });
-    }
-
-    const examples_menu = (<Menu items={menu_items}></Menu>);
+            children: (programs || []).map(prog => ({
+                key: prog.id,
+                label: prog.name,
+                onClick: () => {
+                    handleExampleChange(prog.id);
+                    setExampleName(prog.name);
+                }
+            }))
+        };
+    });
     const extraOperations = {
         right: (
             <Space>
@@ -70,10 +62,14 @@ function TextBox({ disabled, sourceCode, setSourceCode, exampleName, setExampleN
             </Space>
         ),
         left: (
-            <Dropdown menu={{ items: menu_items }} trigger={["hover"]}>
+            <Dropdown 
+                menu={{ items: menu_items }} 
+                trigger={["hover"]}
+            >
                 <a onClick={(e) => e.preventDefault()}>
-                    <Space style={{ marginRight: "10px" }}>
-                        {!isMobile && "Examples"} <DownOutlined />
+                    <Space style={{ marginRight: "10px", cursor: "pointer" }}>
+                        {!isMobile && <span style={{ fontWeight: 500 }}>Examples</span>} 
+                        <DownOutlined />
                     </Space>
                 </a>
             </Dropdown>

pages/index.js

@@ -1,14 +1,16 @@
 import TextBox from "../components/TextBox";
 import ResultBox from "../components/ResultBox";
 import LoadLFortran from "../components/LoadLFortran";
-import preinstalled_programs from "../utils/preinstalled_programs";
 import { useIsMobile } from "../components/useIsMobile";
 
 import { useState, useEffect } from "react";
 import { Col, Row, Spin } from "antd";
 import { notification } from "antd";
 import { LoadingOutlined } from "@ant-design/icons";
 import AnsiUp from "ansi_up";
+import { Select } from "antd";
+const { Option, OptGroup } = Select;
+import preinstalled_programs, { CATEGORIZED_PROGRAMS, ALL_PROGRAMS } from "../utils/preinstalled_programs";
 
 var ansi_up = new AnsiUp();
 
@@ -61,6 +63,21 @@ export default function Home() {
         }
     }, [moduleReady, dataFetch]);
 
+    const handleExampleChange = (id) => {
+        const selected = ALL_PROGRAMS.find(p => p.id === id);
+
+        if (!selected) {
+            return;
+        }
+
+        setSourceCode(selected.code);
+
+        // Reset URL if parameters exist to ensure the new example is the "active" code
+        if (window.location.search) {
+            window.history.replaceState({}, "", window.location.pathname);
+        }
+    };
+
     async function fetchData() {
         const url = window.location.search;
         const gist = "https://gist.githubusercontent.com/";
@@ -82,13 +99,14 @@ export default function Home() {
                     );
                 })
                 .catch((error) => {
-                    console.error("Error fetching data:", error);
                     openNotification("error fetching .", "bottomRight");
                 });
         } else {
-            setSourceCode(preinstalled_programs.basic.mandelbrot);
+            // Pulling from the new registry structure
+            setSourceCode(CATEGORIZED_PROGRAMS["Basic"][0].code);
             setDataFetch(true);
-            if(urlParams.size>0){
+
+            if(urlParams.size > 0){
                 openNotification("The URL contains an invalid parameter.", "bottomRight");
             }
         }
@@ -144,7 +162,6 @@ export default function Home() {
         } else if (key == "PY") {
             setOutput("Support for PY is not yet enabled");
         } else {
-            console.log("Unknown key:", key);
             setOutput("Unknown key: " + key);
         }
         setActiveTab(key);
@@ -171,6 +188,8 @@ export default function Home() {
                         activeTab={activeTab}
                         handleUserTabChange={handleUserTabChange}
                         myHeight={myHeight}
+                        handleExampleChange={handleExampleChange}
+                        CATEGORIZED_PROGRAMS={CATEGORIZED_PROGRAMS}
                     ></TextBox>
                 </Col>
                 <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 12 }}>

utils/preinstalled_programs.js

@@ -788,4 +788,24 @@ end program`
     }
 }
 
+export const CATEGORIZED_PROGRAMS = {
+    "Basic": [
+        { id: "mandelbrot", name: "Mandelbrot", code: preinstalled_programs.basic.mandelbrot },
+        { id: "expr2", name: "Simple Expression", code: preinstalled_programs.basic.expr2 }
+    ],
+    "Experimental": [
+        { id: "template_add", name: "Template Add", code: preinstalled_programs.experimental.template_add },
+        { id: "template_nested", name: "Nested Templates", code: preinstalled_programs.experimental.template_nested },
+        { id: "template_travel", name: "Template Travel", code: preinstalled_programs.experimental.template_travel },
+        { id: "template_triple", name: "Template Triple", code: preinstalled_programs.experimental.template_triple },
+        { id: "template_array_01b", name: "Template Array 01b", code: preinstalled_programs.experimental.template_array_01b },
+        { id: "template_array_02b", name: "Template Array 02b", code: preinstalled_programs.experimental.template_array_02b },
+        { id: "template_array_03", name: "Template Array 03", code: preinstalled_programs.experimental.template_array_03 },
+        { id: "template_array_04", name: "Array Reverse", code: preinstalled_programs.experimental.template_array_04 }
+    ]
+};
+
+// This ensures your selection logic can find all the new entries
+export const ALL_PROGRAMS = Object.values(CATEGORIZED_PROGRAMS).flat();
+
 export default preinstalled_programs;