feat: Implement red border if error

Solvro · May 30, 2024 · 546029a · 546029a
1 parent bf3eb88
commit 546029a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/src/App.js b/src/App.js
@@ -7,15 +7,17 @@ import {useState} from "react";
 function App() {
 
     const [code, setCode] = useState("")
+    const [isError, setIsError] = useState(false);
+
 
     const handleExecuteCode = (newCode) => {
         setCode(newCode);
     };
 
     return (
         <div className="App">
-            <CubeScene code={code} />
-            <CodeEditor onExecute={handleExecuteCode} />
+            <CubeScene code={code} setIsError={setIsError} />
+            <CodeEditor onExecute={handleExecuteCode} isError={isError} />
         </div>
   );
 }

diff --git a/src/components/CodeEditor.js b/src/components/CodeEditor.js
@@ -1,7 +1,7 @@
 import React, {useState} from "react";
 
 
-const CodeEditor = ({ onExecute }) => {
+const CodeEditor = ({ onExecute, isError }) => {
 
     const [code, setCode] = useState("")
 
@@ -18,6 +18,7 @@ const CodeEditor = ({ onExecute }) => {
             <textarea
                 value={code}
                 onChange={handleChange}
+                style={{ borderColor: isError ? "red" : "black" }}
             />
             <button onClick={handleExecute}>Execute Code</button>
         </div>

diff --git a/src/components/CubeScene.js b/src/components/CubeScene.js
@@ -1,10 +1,10 @@
 // src/ThreeScene.js
-import React, { useRef, useEffect } from 'react';
+import React, {useRef, useEffect} from 'react';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import './../App.css';
 
-const CubeScene = ({ code }) => {
+const CubeScene = ({ code, setIsError }) => {
     const mountRef = useRef(null);
 
     useEffect(() => {
@@ -52,8 +52,10 @@ const CubeScene = ({ code }) => {
             try {
                 /* eslint-disable no-eval */
                 eval(code);
+                setIsError(false);
             } catch (error) {
                 console.error("Error executing code: ", error);
+                setIsError(true);
             }
             // cube.rotation.y += 0.01;
             renderer.render(scene, camera);
@@ -77,7 +79,7 @@ const CubeScene = ({ code }) => {
                 currentMount.removeChild(renderer.domElement);
             }
         };
-    }, [code]);
+    }, [code, setIsError]);
 
     return <div className="cube-scene" ref={mountRef}></div>;
 };