Merge remote-tracking branch 'origin/main' into fix-linting-errors

Author: patch0

src/components/Button/Button.js

@@ -9,7 +9,6 @@ const Button = (props) => {
 
   var buttonClass="btn"
   buttonClass = (className ? buttonClass += ` ${className}`: buttonClass)
-  buttonClass = (disabled ? buttonClass += " btn--disabled" : buttonClass)
 
   const onButtonClick = (e) => {
     if (!confirmText) {
@@ -32,7 +31,7 @@ const Button = (props) => {
   }
 
   return (
-    <button className={buttonClass} onClick={onButtonClick}>{buttonText}</button>
+    <button className={buttonClass} disabled={disabled} onClick={onButtonClick}>{buttonText}</button>
   )
 };
 

src/components/Button/Button.scss

@@ -20,7 +20,7 @@
     background-color: $editor-dark-turquoise;
   }
 
-  &.btn--disabled {
+  &:disabled {
     background-color: $editor-grey;
     color: $editor-white;
     cursor: default;

src/components/Editor/Runners/PythonRunner/PythonRunner.js

@@ -25,15 +25,21 @@ const PythonRunner = () => {
 
   const [senseHatEnabled, setSenseHatEnabled] = useState(false);
 
+  const getInput = () => {
+    const pageInput = document.getElementById("input")
+    const webComponentInput = document.querySelector('editor-wc') ? document.querySelector('editor-wc').shadowRoot.getElementById("input") : null;
+    return pageInput || webComponentInput
+  }
+
   useEffect(() => {
     if (codeRunTriggered) {
       runCode();
     }
   }, [codeRunTriggered]);
 
   useEffect(() => {
-    if (codeRunStopped && document.getElementById("input")) {
-      const input = document.getElementById("input")
+    if (codeRunStopped && getInput()) {
+      const input = getInput()
       input.removeAttribute("id")
       input.removeAttribute("contentEditable")
       dispatch(setError("Execution interrupted"));
@@ -44,8 +50,8 @@ const PythonRunner = () => {
   useEffect(() => {
     if (!drawTriggered && p5Output.current && p5Output.current.innerHTML !== '') {
       Sk.p5.stop();
-      if (document.getElementById("input")) {
-        const input = document.getElementById("input")
+      if (getInput()) {
+        const input = getInput()
         input.removeAttribute("id")
         input.removeAttribute("contentEditable")
       }
@@ -189,7 +195,7 @@ const PythonRunner = () => {
     const outputPane = output.current;
     outputPane.appendChild(inputSpan());
 
-    const input = document.getElementById("input") || document.querySelector('editor-wc').shadowRoot.getElementById("input")
+    const input = getInput()
     input.focus();
 
     return new Promise(function (resolve, reject) {
@@ -252,9 +258,10 @@ const PythonRunner = () => {
         },
     ).catch(err => {
       const message = err.message || err.toString();
+      console.log(message)
       dispatch(setError(message));
-      if (document.getElementById("input")) {
-        const input = document.getElementById("input") || document.querySelector('editor-wc').shadowRoot.getElementById("input")
+      if (getInput()) {
+        const input = getInput()
         input.removeAttribute("id")
         input.removeAttribute("contentEditable")
       }
@@ -274,9 +281,9 @@ const PythonRunner = () => {
       return;
     }
 
-    const inputBox = document.getElementById("input") || document.querySelector('editor-wc').shadowRoot.getElementById("input");
+    const inputBox = getInput();
     if (inputBox && e.target !== inputBox) {
-      const input = document.getElementById("input") || document.querySelector('editor-wc').shadowRoot.getElementById("input")
+      const input = getInput()
       const selection = window.getSelection();
       selection.removeAllRanges();
 

src/components/RunButton/StopButton.js

@@ -1,12 +1,13 @@
 import Button from '../Button/Button'
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux'
 import { stopCodeRun, stopDraw } from '../Editor/EditorSlice'
 
 const StopButton = (props) => {
 
   const codeRunStopped = useSelector((state) => state.editor.codeRunStopped);
   const codeRunTriggered = useSelector((state) => state.editor.codeRunTriggered);
+  const [, setTimeoutId] = useState(null);
   const dispatch = useDispatch();
 
   const onClickStop = () => {
@@ -16,15 +17,23 @@ const StopButton = (props) => {
     dispatch(stopDraw());
   }
 
-  if (codeRunStopped) {
-    return (
-      <Button buttonText="Stopping..." disabled="true"/>
-    )
-  } else {
-    return (
-    <Button className={"btn--stop"} onClickHandler={onClickStop} {...props} />
-    )
-  }
+  const stop = <Button className={"btn--stop"} onClickHandler={onClickStop} {...props} />
+  const [button, setButton] = useState(stop)
+
+  useEffect(() => {
+    const stopping = <Button buttonText="Stopping..." disabled />
+    const id = setTimeout(
+      function() {
+        if (codeRunStopped) {
+          setButton(stopping)
+        }
+      }, 100);
+    setTimeoutId(id);
+  }, [codeRunStopped]);
+
+  return (
+    button
+  )
 };
 
 export default StopButton;

src/components/RunButton/StopButton.test.js

@@ -7,33 +7,33 @@ import { codeRunHandled, triggerCodeRun } from '../Editor/EditorSlice'
 
 
 test("Clicking stop button sets codeRunStopped to true", () => {
-    store.dispatch(codeRunHandled())
-    store.dispatch(triggerCodeRun())
+  store.dispatch(codeRunHandled())
+  store.dispatch(triggerCodeRun())
 
-    const { getByText } = render(
-    <Provider store={store}>
-        <StopButton buttonText="Stop Code" />
-    </Provider>);
+  const { getByText } = render(
+  <Provider store={store}>
+      <StopButton buttonText="Stop Code" />
+  </Provider>);
 
-    const stopButton = getByText(/Stop Code/);
-    fireEvent.click(stopButton);
+  const stopButton = getByText(/Stop Code/);
+  fireEvent.click(stopButton);
 
-    expect(store.getState().editor.codeRunStopped).toEqual(true);
+  expect(store.getState().editor.codeRunStopped).toEqual(true);
 })
 
-test("Clicking stop button changes it to 'Stopping...'", () => {
-    store.dispatch(codeRunHandled())
-    store.dispatch(triggerCodeRun())
-
-    const { getByText } = render(
-    <Provider store={store}>
-        <StopButton buttonText="Stop Code" />
-        <span id="input">hello world</span>
-    </Provider>
-    );
-    const stopButton = getByText(/Stop Code/);
-    fireEvent.click(stopButton);
-
+test("Clicking stop button changes it to 'Stopping...' after 100ms", () => {
+  store.dispatch(codeRunHandled())
+  store.dispatch(triggerCodeRun())
+
+  const { getByText } = render(
+  <Provider store={store}>
+      <StopButton buttonText="Stop Code" />
+  </Provider>
+  );
+  const stopButton = getByText(/Stop Code/);
+  fireEvent.click(stopButton);
+  expect(stopButton.textContent).toEqual("Stop Code")
+  new Promise(resolve => setTimeout(resolve, 100)).then( () =>
     expect(stopButton.textContent).toEqual("Stopping...")
-
+  )
 })