1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import React, { useContext, useEffect, useState } from 'react';
import SimpleButton from '../Buttons/SimpleButton';
import { QueryInputContext } from '../Contexts/QueryInputContext';
import { ResponseContext } from '../Contexts/ResponseContext';
import { QueryContext } from '../Contexts/QueryContext';
import SimpleForm from './SimpleForm';
import SimpleDropDownForm from './SimpleDropDownForm';
export default function SendQuery() {
const { inputs } = useContext(QueryInputContext);
const { setResponse } = useContext(ResponseContext);
const { showQuery, setQuery } = useContext(QueryContext);
const messageMethods = { post: { name: 'POST' }, get: { name: 'GET' } };
const [method, setMethod] = useState(messageMethods.post.name);
const [url, setUrl] = useState('http://localhost:8080/search/');
useEffect(() => {
const query = buildJSON(inputs, {});
setQuery(JSON.stringify(query, undefined, 4));
}, [showQuery]);
const updateMethod = (e) => {
e.preventDefault();
const newMethod = e.target.value;
setMethod(newMethod);
};
function handleClick() {
const json = buildJSON(inputs, {});
send(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, undefined, 4);
setResponse(resultObject);
}
}
function buildJSON(inputs, json) {
let queryJson = json;
for (let i = 0; i < inputs.length; i++) {
let current = inputs[i];
let key = current.type;
if (current.hasChildren) {
let child = {};
child = buildJSON(current.children, child);
queryJson[key] = child;
} else {
queryJson[key] = parseInput(current.input, current.typeof);
}
}
return queryJson;
}
function parseInput(input, type) {
switch (type) {
case 'Integer':
case 'Long':
return parseInt(input);
case 'Float':
return parseFloat(input);
case 'Boolean':
return input.toLowerCase() === 'true' ? true : false;
default:
return input;
}
}
const updateUrl = (e) => {
const newUrl = e.target.value;
setUrl(newUrl);
};
return (
<>
<SimpleDropDownForm
choices={messageMethods}
id="method"
className="methodselector"
onChange={updateMethod}
/>
<SimpleForm
id="url"
className="textbox"
initial={url}
size="30"
onChange={updateUrl}
/>
<SimpleButton id="send" className="button" onClick={handleClick}>
Send
</SimpleButton>
</>
);
}
|