From a14c51e26f85c0b9af02d9b72904b078512924ba Mon Sep 17 00:00:00 2001 From: Burak Karaduman Date: Fri, 13 Dec 2024 00:29:31 +0300 Subject: [PATCH] Upload button error handling added --- .env | 1 + package-lock.json | 3 +-- package.json | 5 ++--- src/App.jsx | 4 ++++ src/components/Inputs.jsx | 5 ++++- src/components/Inputs/InputButtons.jsx | 15 ++++++++------- src/components/Inputs/UploadButton.jsx | 8 ++++---- 7 files changed, 24 insertions(+), 17 deletions(-) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 0000000..ba7cc18 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +GENERATE_SOURCEMAP=false diff --git a/package-lock.json b/package-lock.json index aabcbe2..376b2ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,8 +24,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" }, "devDependencies": { "nodemon": "^3.1.7" diff --git a/package.json b/package.json index 76ad6cb..e49ec21 100644 --- 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 index 47ec9d7..edce52f 100644 --- 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} /> diff --git a/src/components/Inputs.jsx b/src/components/Inputs.jsx index 1f17e56..c87cdc7 100644 --- 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 {/* Input for Atomic Name */} diff --git a/src/components/Inputs/InputButtons.jsx b/src/components/Inputs/InputButtons.jsx index 9870845..1189c44 100644 --- 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} /> - {errorMessage && + {inputButtonErrors.length > 0 && - {errorMessage} + {inputButtonErrors.map((error, index) => ( +
  • {error}
    • + ))}     } { + 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); // // // // // } } };