QueryInput now switches between input and button depending on the chosen method

6 files changed, 16 insertions, 16 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx
index 90625397d1d..5af361a85d1 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx
@@ -7,7 +7,7 @@ export default function AddQueryInput() {
 
   const updateInputs = (e) => {
     e.preventDefault();
-    setId(id + 1);
+    setId((id) => id + 1);
     setInputs((prevInputs) => [
       ...prevInputs,
       { id: id + 1, type: '', input: '', hasChildren: false, children: [] },
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx
index 378b9c96d4f..b316c30027a 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx
@@ -14,7 +14,7 @@ export const QueryInputProvider = (prop) => {
     },
   ]);
 
-  // id is the id if the newest QueryInput, gets updated each time a new one is added
+  // This is the id of the newest QueryInput, gets updated each time a new one is added
   const [id, setId] = useState(1);
 
   // These are the methods that can be chosen in a QueryInput
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
index 4df3c27c261..30cafac08fc 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
@@ -10,18 +10,20 @@ export default function QueryDropdownFormn({ choices, id }) {
   const updateType = (e) => {
     e.preventDefault();
     const newType = e.target.value;
-    const index = inputs.findIndex((element) => element.id === id);
-    inputs[index].type = newType;
+    const newInputs = inputs.slice();
+    const index = newInputs.findIndex((element) => element.id === id);
+    newInputs[index].type = newType;
     let hasChildren = levelZeroParameters[newType].hasChildren;
-    inputs[index].hasChildren = hasChildren;
-    setInputs(inputs);
+    newInputs[index].hasChildren = hasChildren;
+    setInputs(newInputs);
   };
 
   // On start set the type of the first QueryInput to the first in the list of choices
   useEffect(() => {
-    const index = inputs.findIndex((element) => element.id === id);
+    const newInputs = inputs.slice();
+    const index = newInputs.findIndex((element) => element.id === id);
     const key = Object.keys(choices)[0];
-    inputs[index].type = choices[key].name;
+    newInputs[index].type = choices[key].name;
     setInputs(inputs);
   }, []);
 
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
index a651088ff60..427498229ce 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
@@ -18,10 +18,11 @@ export default function QueryInput() {
   const updateInput = (e) => {
     e.preventDefault();
     const fid = parseInt(e.target.id.replace('v', ''));
-    const index = inputs.findIndex((element) => element.id === fid);
-    inputs[index].input = e.target.value;
-    setInputs(inputs);
-    console.log(inputs);
+    const newInputs = inputs.slice();
+    const index = newInputs.findIndex((element) => element.id === fid);
+    newInputs[index].input = e.target.value;
+    setInputs(newInputs);
+    console.log(newInputs);
   };
 
   const inputList = inputs.map((value, index) => {
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
index a734a861a89..8fb283c54dd 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
@@ -22,7 +22,7 @@ export default function SimpleDropDownForm({
   });
 
   function handleChange(e) {
-    setChoice(e.target.value);
+    setChoice((choice) => (choice = e.target.value));
   }
 
   return (
diff --git a/client/js/app/src/app/pages/querybuilder/query-builder.jsx b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
index 8598cbda54e..44a37f424fb 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import SimpleButton from './Components/Buttons/SimpleButton';
 import QueryInput from './Components/Text/QueryInput';
-import SimpleDropDownForm from './Components/Text/SimpleDropDownForm';
-import SimpleForm from './Components/Text/SimpleForm';
 import TextBox from './Components/Text/TextBox';
 import ImageButton from './Components/Buttons/ImageButton';
 import OverlayImageButton from './Components/Buttons/OverlayImageButton';
@@ -10,7 +8,6 @@ import AddQueryInput from './Components/Buttons/AddQueryInputButton';
 import { QueryInputProvider } from './Components/Contexts/QueryInputContext';
 import pasteImage from './assets/img/paste.svg';
 import copyImage from './assets/img/copy.svg';
-import refreshImage from './assets/img/reload.svg';
 
 import '../../styles/agency.css';
 import '../../styles/vespa.css';