Added SendQuery component

6 files changed, 58 insertions, 47 deletions

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 9d78a8accde..6c57a250920 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
@@ -1,5 +1,5 @@
 import { QueryInputContext } from '../Contexts/QueryInputContext';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import SimpleDropDownForm from './SimpleDropDownForm';
 
 export default function QueryDropdownFormn({ choices, id }) {
@@ -12,7 +12,11 @@ export default function QueryDropdownFormn({ choices, id }) {
     setInputs(inputs);
   };
 
-  //TODO: Try to move this into SimpleDropDownForm
+  useEffect(() => {
+    const index = inputs.findIndex((element) => element.id === id);
+    inputs[index].type = choices[0];
+    setInputs(inputs);
+  }, []);
 
   return (
     <SimpleDropDownForm
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 c645cd86cd5..764e42508bb 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,8 +18,8 @@ export default function QueryInput({ id }) {
 
   const updateInput = (e) => {
     e.preventDefault();
-    const id = parseInt(e.target.id.replace('v', ''));
-    const index = inputs.findIndex((element) => element.id === id);
+    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);
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx
new file mode 100644
index 00000000000..17bbf39e81a
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import SimpleDropDownForm from './SimpleDropDownForm';
+import SimpleButton from '../Buttons/SimpleButton';
+import SimpleForm from './SimpleForm';
+
+export default function SendQuery() {
+  const messageMethodArray = ['POST', 'GET'];
+  const [method, setMethod] = useState(messageMethodArray[0]);
+
+  const updateMethod = (e) => {
+    e.preventDefault();
+    const newMethod = e.target.value;
+    setMethod(newMethod);
+  };
+
+  //TODO: Handle sending the query
+  function handleClick() {
+    console.log('Click happened');
+  }
+
+  return (
+    <>
+      <SimpleDropDownForm
+        choices={messageMethodArray}
+        id="method"
+        className="methodselector"
+        onChange={updateMethod}
+      />
+      <SimpleForm
+        id="url"
+        className="textbox"
+        initial="http://localhost:8080/search/"
+        size="30"
+      />
+      <SimpleButton id="send" className="button" onClick={handleClick}>
+        Send
+      </SimpleButton>
+    </>
+  );
+}
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 5bf9bd1e3ab..7745d7e6445 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
@@ -1,4 +1,5 @@
-import React from 'react';
+import { useSetState } from '@mantine/hooks';
+import React, { useEffect } from 'react';
 import { useState } from 'react';
 
 export default function SimpleDropDownForm({
@@ -10,7 +11,7 @@ export default function SimpleDropDownForm({
   SimpleDropDownForm.defaultProps = {
     onChange: handleChange,
   };
-  const { choice, setChoice } = useState();
+  const { choice, setChoice } = useState(choices[0]);
 
   const options = choices.map((value, index) => {
     return (
@@ -26,7 +27,7 @@ export default function SimpleDropDownForm({
 
   return (
     <form id={id}>
-      <select className={className} value={choice} onChange={onChange}>
+      <select className={className} id={id} value={choice} onChange={onChange}>
         {options}
       </select>
     </form>
diff --git a/client/js/app/src/app/pages/querybuilder/index.jsx b/client/js/app/src/app/pages/querybuilder/index.jsx
index e9271892eb7..3feefce5da3 100644
--- a/client/js/app/src/app/pages/querybuilder/index.jsx
+++ b/client/js/app/src/app/pages/querybuilder/index.jsx
@@ -14,9 +14,9 @@ import ImageButton from 'Components/Buttons/ImageButton';
 import OverlayImageButton from 'Components/Buttons/OverlayImageButton';
 import AddQueryInput from 'Components/Buttons/AddQueryInputButton';
 import { QueryInputProvider } from 'Components/Contexts/QueryInputContext';
+import SendQuery from './Components/Text/SendQuery';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-const messageMethodArray = ['POST', 'GET'];
 
 const pasteImage = require('./assets/img/paste.svg').default;
 const copyImage = require('./assets/img/copy.svg').default;
@@ -31,20 +31,7 @@ root.render(
           <TextBox className={'intro-long'}>
             Select the method for sending a request and construct a query.
           </TextBox>
-          <SimpleDropDownForm
-            choices={messageMethodArray}
-            id="method"
-            className="methodselector"
-          ></SimpleDropDownForm>
-          <SimpleForm
-            id="url"
-            className="textbox"
-            initial="http://localhost:8080/search/"
-            size="30"
-          ></SimpleForm>
-          <SimpleButton id="send" className="button" onClick={handleClick}>
-            Send
-          </SimpleButton>
+          <SendQuery />
           <br />
           <QueryInputProvider>
             <div id="request">
@@ -65,12 +52,7 @@ root.render(
           </ImageButton>
           <SimpleButton className="showJSON">Show query JSON</SimpleButton>
           <TextBox className="response">Response</TextBox>
-          <textarea
-            className="responsebox"
-            readOnly
-            cols="70"
-            rows="25"
-          ></textarea>
+          <textarea className="responsebox" readOnly cols="70" rows="25" />
           <OverlayImageButton
             className="intro-copy"
             image={copyImage}
@@ -96,7 +78,3 @@ root.render(
     </React.StrictMode>
   </>
 );
-
-function handleClick() {
-  console.log('Click happened');
-}
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 1d6741770d0..6b73c223c5f 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -14,6 +14,7 @@ import refreshImage from './assets/img/reload.svg';
 
 import '../../styles/agency.css';
 import '../../styles/vespa.css';
+import SendQuery from './Components/Text/SendQuery';
 //import 'bootstrap/dist/css/bootstrap.min.css'; //TODO: Find out how to get this css
 
 export function QueryBuilder() {
@@ -27,24 +28,11 @@ export function QueryBuilder() {
           <TextBox className={'intro-long'}>
             Select the method for sending a request and construct a query.
           </TextBox>
-          <SimpleDropDownForm
-            choices={messageMethodArray}
-            id="method"
-            className="methodselector"
-          ></SimpleDropDownForm>
-          <SimpleForm
-            id="url"
-            className="textbox"
-            initial="http://localhost:8080/search/"
-            size="30"
-          ></SimpleForm>
-          <SimpleButton id="send" className="button">
-            Send
-          </SimpleButton>
+          <SendQuery />
           <br />
           <QueryInputProvider>
             <div id="request">
-              <QueryInput></QueryInput>
+              <QueryInput />
             </div>
             <br />
             <AddQueryInput />