Sending query to backend now works

4 files changed, 79 insertions, 32 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/Components/Contexts/ResponseContext.jsx b/client/js/app/src/app/pages/querybuilder/Components/Contexts/ResponseContext.jsx
new file mode 100644
index 00000000000..54f5fc955fd
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Contexts/ResponseContext.jsx
@@ -0,0 +1,13 @@
+import React, { createContext, useState } from 'react';
+
+export const ResponseContext = createContext();
+
+export const ResponseProvider = (prop) => {
+  const [response, setResponse] = useState('');
+
+  return (
+    <ResponseContext.Provider value={{ response, setResponse }}>
+      {prop.children}
+    </ResponseContext.Provider>
+  );
+};
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/ResponseBox.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/ResponseBox.jsx
new file mode 100644
index 00000000000..08c65238434
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/ResponseBox.jsx
@@ -0,0 +1,17 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { ResponseContext } from '../Contexts/ResponseContext';
+
+export default function ResponseBox() {
+  const { response } = useContext(ResponseContext);
+
+  return (
+    <textarea
+      id="responsetext"
+      className="responsebox"
+      readOnly
+      cols="70"
+      rows="25"
+      value={response}
+    />
+  );
+}
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
index 17a0ca2e085..2dabb52cf87 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx
@@ -3,11 +3,14 @@ import SimpleDropDownForm from './SimpleDropDownForm';
 import SimpleButton from '../Buttons/SimpleButton';
 import SimpleForm from './SimpleForm';
 import { QueryInputContext } from '../Contexts/QueryInputContext';
+import { ResponseContext } from '../Contexts/ResponseContext';
 
 export default function SendQuery() {
   const { inputs } = useContext(QueryInputContext);
+  const { response, setResponse } = useContext(ResponseContext);
   const messageMethods = { post: { name: 'POST' }, get: { name: 'GET' } };
   const [method, setMethod] = useState(messageMethods.post.name);
+  const [url, setUrl] = useState('http://localhost:8080/search/');
 
   const updateMethod = (e) => {
     e.preventDefault();
@@ -15,15 +18,22 @@ export default function SendQuery() {
     setMethod(newMethod);
   };
 
-  //TODO: Handle sending the query
   function handleClick() {
     const json = buildJSON(inputs, {});
     send(json);
-    console.log(json);
   }
 
-  function send(json) {
-    console.log('Sending JSON');
+  async function send(json) {
+    let responses = await fetch(url, {
+      method: method,
+      headers: { 'Content-Type': 'application/json;charset=utf-8' },
+      body: JSON.stringify(json),
+    });
+    if (responses.ok) {
+      let result = await responses.json();
+      let resultObject = JSON.stringify(result);
+      setResponse(resultObject);
+    }
   }
 
   function buildJSON(inputs, json) {
@@ -62,6 +72,11 @@ export default function SendQuery() {
     }
   }
 
+  const updateUrl = (e) => {
+    const newUrl = e.target.value;
+    setUrl(newUrl);
+  };
+
   return (
     <>
       <SimpleDropDownForm
@@ -73,8 +88,9 @@ export default function SendQuery() {
       <SimpleForm
         id="url"
         className="textbox"
-        initial="http://localhost:8080/search/"
+        initial={url}
         size="30"
+        onChange={updateUrl}
       />
       <SimpleButton id="send" className="button" onClick={handleClick}>
         Send
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 3e3e27b27b4..11d13de9425 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -6,12 +6,16 @@ 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';
+import { ResponseProvider } from './Components/Contexts/ResponseContext';
+import ResponseBox from './Components/Text/ResponseBox';
+
 import pasteImage from './assets/img/paste.svg';
 import copyImage from './assets/img/copy.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() {
@@ -25,33 +29,30 @@ export function QueryBuilder() {
           <TextBox className={'intro-long'}>
             Select the method for sending a request and construct a query.
           </TextBox>
-          <QueryInputProvider>
-            <SendQuery />
+          <ResponseProvider>
+            <QueryInputProvider>
+              <SendQuery />
+              <br />
+              <div id="request">
+                <QueryInput />
+              </div>
+              <br />
+              <AddQueryInput />
+            </QueryInputProvider>
             <br />
-            <div id="request">
-              <QueryInput />
-            </div>
-            <br />
-            <AddQueryInput />
-          </QueryInputProvider>
-          <br />
-          <ImageButton
-            id="pasteJSON"
-            className="pasteJSON"
-            showImage={true}
-            image={pasteImage}
-            style={{ marginTop: '-2px', marginRight: '3px' }}
-          >
-            Paste JSON
-          </ImageButton>
-          <SimpleButton className="showJSON">Show query JSON</SimpleButton>
-          <TextBox className="response">Response</TextBox>
-          <textarea
-            className="responsebox"
-            readOnly
-            cols="70"
-            rows="25"
-          ></textarea>
+            <ImageButton
+              id="pasteJSON"
+              className="pasteJSON"
+              showImage={true}
+              image={pasteImage}
+              style={{ marginTop: '-2px', marginRight: '3px' }}
+            >
+              Paste JSON
+            </ImageButton>
+            <SimpleButton className="showJSON">Show query JSON</SimpleButton>
+            <TextBox className="response">Response</TextBox>
+            <ResponseBox />
+          </ResponseProvider>
           <OverlayImageButton
             className="intro-copy"
             image={copyImage}