Upload button error handling added

krdmnbrk · Dec 12, 2024 · a14c51e · a14c51e
1 parent d0533f1
commit a14c51e
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 17 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+GENERATE_SOURCEMAP=false
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "atomicgen.io",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.13.3",
@@ -19,8 +19,7 @@
     "react-ace": "^13.0.0",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4",
-    "yaml": "^2.6.1"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/App.jsx b/src/App.jsx
@@ -126,6 +126,7 @@ const validateInputs = (data, rules) => {
 function App() {
   const [errors, setErrors] = useState([]);
   const [validationErrors, setValidationErrors] = useState([]);
+  const [inputButtonErrors, setInputButtonErrors] = useState([]);
   const [updated, setUpdated] = useState(false);
   const [inputs, setInputs] = useState(base);
   const [darkMode, setDarkMode] = useState(true);
@@ -177,6 +178,7 @@ function App() {
 
   // Validate inputs
   useEffect(() => {
+    setInputButtonErrors([]);
     if (updated) {
 
       const errors = validateInputs(inputs, validationRules);
@@ -239,6 +241,8 @@ function App() {
               setInputs={setInputs}
               errors={errors}
               setErrors={setErrors}
+              inputButtonErrors={inputButtonErrors}
+              setInputButtonErrors={setInputButtonErrors}
             />
           </Grid>
           <Grid size={isPortrait ? 12 : 6}>

diff --git a/src/components/Inputs.jsx b/src/components/Inputs.jsx
@@ -33,7 +33,7 @@ const MenuProps = {
 };
 
 // Functional component for managing inputs
-function Inputs({ base, darkMode, changed, setChanged, errors, setErrors, inputs, setInputs, executor_names, supported_platforms }) {
+function Inputs({ inputButtonErrors, setInputButtonErrors, base, darkMode, changed, setChanged, errors, setErrors, inputs, setInputs, executor_names, supported_platforms }) {
 
     // Handle changes to text fields (e.g., Atomic Name, Atomic Description)
     const handleChangeText = (e) => {
@@ -103,11 +103,14 @@ function Inputs({ base, darkMode, changed, setChanged, errors, setErrors, inputs
         <Box>
             <Box sx={{ mb: 2 }}>
                 <InputButtons 
+                    inputButtonErrors={inputButtonErrors}
+                    setInputButtonErrors={setInputButtonErrors}
                     base={base}
                     setInputs={setInputs}
                     setChanged={setChanged}
                     changed={changed}
                     darkMode={darkMode}
+
                 />
             </Box>
             {/* Input for Atomic Name */}

diff --git a/src/components/Inputs/InputButtons.jsx b/src/components/Inputs/InputButtons.jsx
@@ -21,9 +21,8 @@ import transformInputArguments from './transformInputArguments';
 
 
 
-export default function InputButtons({ base, darkMode, setInputs, setChanged, changed }) {
+export default function InputButtons({ inputButtonErrors, setInputButtonErrors, base, darkMode, setInputs, setChanged, changed }) {
     const [open, setOpen] = React.useState(false);
-    const [errorMessage, setErrorMessage] = useState(null);
     const [samples, setSamples] = useState([]);
     const anchorRef = React.useRef(null);
 
@@ -54,7 +53,7 @@ export default function InputButtons({ base, darkMode, setInputs, setChanged, ch
     };
 
 
-    
+
 
     const loadSample = async (level) => {
         if (changed) {
@@ -87,15 +86,17 @@ export default function InputButtons({ base, darkMode, setInputs, setChanged, ch
                     base={base}
                     setInputs={setInputs}
                     darkMode={darkMode}
-                    setErrorMessage={setErrorMessage}
-                    errorMessage={errorMessage}
+                    setInputButtonErrors={setInputButtonErrors}
+                    inputButtonErrors={inputButtonErrors}
                     setChanged={setChanged}
                     changed={changed}
                 />
             </ButtonGroup>
-            {errorMessage &&
+            {inputButtonErrors.length > 0 &&
                 <Alert sx={{ mt: 1 }} variant={darkMode ? "outlined" : "filled"} severity='error'>
-                    {errorMessage}
+                        {inputButtonErrors.map((error, index) => (
+                            <li key={index}>{error}</li>
+                        ))}
                 </Alert>
             }
             <Popper

diff --git a/src/components/Inputs/UploadButton.jsx b/src/components/Inputs/UploadButton.jsx
@@ -18,14 +18,15 @@ const VisuallyHiddenInput = styled('input')({
 });
 
 
-export default function UploadButton({ setChanged, changed, base, darkMode, setInputs, setErrorMessage }) {
+export default function UploadButton({ inputButtonErrors, setInputButtonErrors, setChanged, changed, base, darkMode, setInputs }) {
     const [open, setOpen] = React.useState(false);
     const [atomicNames, setAtomicNames] = React.useState([]);
     const [techniqueName, setTechniqueName] = React.useState(null);
     const [techniqueId, setTechniqueId] = React.useState(null);
     const [fileContent, setFileContent] = React.useState(null);
 
     const handleFileUpload = async (event) => {
+        setInputButtonErrors([]);
         if (changed) {
             const confirm = window.confirm('Are you sure you want to load another test? Your current inputs will be overwritten.');
             if (!confirm) return;
@@ -34,7 +35,7 @@ export default function UploadButton({ setChanged, changed, base, darkMode, setI
         if (file) {
             const fileExtension = file.name.split('.').pop().toLowerCase();
             if (fileExtension !== "yaml" && fileExtension !== "yml") {
-                setErrorMessage("Only yaml files can be uploaded.");
+                setInputButtonErrors([...inputButtonErrors, "Only yaml files can be uploaded."]);
                 console.error("Only yaml files can be uploaded.");
                 return;
             }
@@ -54,10 +55,9 @@ export default function UploadButton({ setChanged, changed, base, darkMode, setI
 
             } catch (error) {
                 console.error("Error while file processing the yaml file, check format.", error);
-                setErrorMessage("Error while file processing the yaml file, check format.");
+                setInputButtonErrors([...inputButtonErrors, "Error while file processing the yaml file, check format."])
             } finally {
                 event.target.value = null;
-                setChanged(false); // // // // //
             }
         }
     };