diff options
author | Erlend <erlendniko@hotmail.com> | 2022-07-01 09:43:56 +0200 |
---|---|---|
committer | Erlend <erlendniko@hotmail.com> | 2022-07-01 09:43:56 +0200 |
commit | 0b1283ff9ac25044e06f2e88aaf2df319005a6c6 (patch) | |
tree | 08d3f1761a30320c04a37e595d2f7c73d2d0d1a4 | |
parent | 1d469bee3bf63471991aa05884b2d97ab2506017 (diff) |
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} |