Merge pull request #101 from dockersamples/100-run-button-bug

Fix bug in which run command buttons were using stale commands

Author: mikesir87

components/interface/client/src/WorkshopContext.jsx

@@ -68,53 +68,47 @@ export const WorkshopContextProvider = ({ children }) => {
       });
   }, [activeSectionId, setActiveSection, refreshCounter]);
 
-  const runCommand = useCallback(
-    (codeBlockIndex) => {
-      return fetch(`/api/sections/${activeSection.id}/command`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ codeBlockIndex }),
+  const runCommand = useCallback((activeSectionId, codeBlockIndex) => {
+    return fetch(`/api/sections/${activeSectionId}/command`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ codeBlockIndex }),
+    })
+      .then((response) => {
+        if (!response.ok) throw new Error("Failed to run command");
+        return response.json();
       })
-        .then((response) => {
-          if (!response.ok) throw new Error("Failed to run command");
-          return response.json();
-        })
-        .then((result) => {
-          console.log("Command result:", result);
-        })
-        .catch((error) => {
-          console.error("Error running command:", error);
-          toast.error("Failed to run command. Please try again.");
-        });
-    },
-    [activeSection],
-  );
-
-  const saveFileCommand = useCallback(
-    (codeBlockIndex) => {
-      return fetch(`/api/sections/${activeSection.id}/save-file`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ codeBlockIndex }),
+      .then((result) => {
+        console.log("Command result:", result);
       })
-        .then((response) => {
-          if (!response.ok) throw new Error("Failed to save file");
-          return response.json();
-        })
-        .then((result) => {
-          console.log("Save file result:", result);
-        })
-        .catch((error) => {
-          console.error("Error saving file:", error);
-          toast.error("Failed to save file. Please try again.");
-        });
-    },
-    [activeSection],
-  );
+      .catch((error) => {
+        console.error("Error running command:", error);
+        toast.error("Failed to run command. Please try again.");
+      });
+  }, []);
+
+  const saveFileCommand = useCallback((activeSectionId, codeBlockIndex) => {
+    return fetch(`/api/sections/${activeSectionId}/save-file`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ codeBlockIndex }),
+    })
+      .then((response) => {
+        if (!response.ok) throw new Error("Failed to save file");
+        return response.json();
+      })
+      .then((result) => {
+        console.log("Save file result:", result);
+      })
+      .catch((error) => {
+        console.error("Error saving file:", error);
+        toast.error("Failed to save file. Please try again.");
+      });
+  }, []);
 
   useEffect(() => {
     if (!workshop) return;

components/interface/client/src/components/WorkshopPanel/markdown/CodeBlock.jsx

@@ -3,10 +3,15 @@ import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
 import copy from "copy-to-clipboard";
 import { useCallback } from "react";
-import { useRunCommand, useSaveFileCommand } from "../../../WorkshopContext";
+import {
+  useActiveSection,
+  useRunCommand,
+  useSaveFileCommand,
+} from "../../../WorkshopContext";
 import { CodeBlockAction } from "./CodeBlockAction";
 
 export function CodeBlock({ node, inline, className, children, ...props }) {
+  const { activeSection } = useActiveSection();
   const runCommand = useRunCommand();
   const saveFileCommand = useSaveFileCommand();
 
@@ -26,13 +31,15 @@ export function CodeBlock({ node, inline, className, children, ...props }) {
     return Promise.resolve();
   }, [children]);
 
+  // This needs `children` as ReactMarkdown seems to re-use the component instance
   const onRunClick = useCallback(() => {
-    return runCommand(codeIndex);
-  }, [codeIndex]);
+    return runCommand(activeSection.id, codeIndex);
+  }, [codeIndex, activeSection]);
 
+  // This needs `children` as ReactMarkdown seems to re-use the component instance
   const onSaveAsClick = useCallback(() => {
-    return saveFileCommand(codeIndex);
-  }, [codeIndex]);
+    return saveFileCommand(activeSection.id, codeIndex);
+  }, [codeIndex, activeSection]);
 
   if (!match || inline) {
     return (

components/interface/client/src/components/WorkshopPanel/markdown/reactDirective.js

@@ -25,8 +25,8 @@ export function tabDirective() {
         const data = node.data || (node.data = {});
 
         if (!isNaN(Number(node.name))) {
-          node.children = [{ type: 'text', value: `:${node.name}` }];
-          node.name = node.type === 'textDirective' ? 'span' : 'div';
+          node.children = [{ type: "text", value: `:${node.name}` }];
+          node.name = node.type === "textDirective" ? "span" : "div";
           hastify(node, {});
           return;
         }