diff options
author | Leandro Alves <leandroalves@yahooinc.com> | 2022-08-11 13:15:36 +0200 |
---|---|---|
committer | Valerij Fredriksen <valerijf@yahooinc.com> | 2022-08-12 15:02:05 +0200 |
commit | 9a256f7e4dbec4a367d2afbb19d6e14cff651d57 (patch) | |
tree | 14e39777be2376acabfa12375225899044dba92d | |
parent | 5f442a311e4443f5014693023a1b20f103d41360 (diff) |
Style query-endpoint
-rw-r--r-- | client/js/app/src/app/pages/querybuilder/index.jsx | 2 | ||||
-rw-r--r-- | client/js/app/src/app/pages/querybuilder/query-endpoint/query-endpoint.jsx | 50 |
2 files changed, 24 insertions, 28 deletions
diff --git a/client/js/app/src/app/pages/querybuilder/index.jsx b/client/js/app/src/app/pages/querybuilder/index.jsx index 0ee09d91e50..a69881dfedc 100644 --- a/client/js/app/src/app/pages/querybuilder/index.jsx +++ b/client/js/app/src/app/pages/querybuilder/index.jsx @@ -10,7 +10,7 @@ import QueryEndpoint from 'app/pages/querybuilder/query-endpoint/query-endpoint' export function QueryBuilder() { return ( <QueryBuilderProvider> - <Container> + <Container sx={{ rowGap: '21px' }}> <QueryEndpoint /> <SimpleGrid cols={3}> <QueryFilters /> diff --git a/client/js/app/src/app/pages/querybuilder/query-endpoint/query-endpoint.jsx b/client/js/app/src/app/pages/querybuilder/query-endpoint/query-endpoint.jsx index 4894f616b55..d9fba15043c 100644 --- a/client/js/app/src/app/pages/querybuilder/query-endpoint/query-endpoint.jsx +++ b/client/js/app/src/app/pages/querybuilder/query-endpoint/query-endpoint.jsx @@ -1,11 +1,13 @@ import React, { useState } from 'react'; -import SimpleDropDownForm from 'app/pages/querybuilder/query-filters/SimpleDropDownForm'; +import { Select, TextInput, Button } from '@mantine/core'; import { ACTION, dispatch, useQueryBuilderContext, } from 'app/pages/querybuilder/context/query-builder-provider'; +import { Container, Content } from 'app/components'; +// TODO: notify when error function send(method, url, query) { dispatch(ACTION.SET_HTTP, { loading: true }); fetch(url, { @@ -23,34 +25,28 @@ function send(method, url, query) { } export default function QueryEndpoint() { - const messageMethods = { post: { name: 'POST' }, get: { name: 'GET' } }; - const [method, setMethod] = useState(messageMethods.post.name); + const httpMethods = ['POST', 'GET']; + const [method, setMethod] = useState('POST'); const [url, setUrl] = useState('http://localhost:8080/search/'); const query = useQueryBuilderContext((ctx) => ctx.query.input); - - const updateMethod = (e) => { - e.preventDefault(); - const newMethod = e.target.value; - setMethod(newMethod); - }; - return ( - <> - <SimpleDropDownForm - options={messageMethods} - value={method} - className="methodselector" - onChange={updateMethod} - /> - <input - size="30" - className="textbox" - value={url} - onChange={({ target }) => setUrl(target.value)} - /> - <button className="button" onClick={() => send(method, url, query)}> - Send - </button> - </> + <Content> + <Container sx={{ gridTemplateColumns: 'max-content auto max-content' }}> + <Select + data={httpMethods} + onChange={setMethod} + value={method} + radius={0} + /> + <TextInput + onChange={(event) => setUrl(event.currentTarget.value)} + value={url} + radius={0} + /> + <Button radius={0} onClick={() => send(method, url, query)}> + Send + </Button> + </Container> + </Content> ); } |