mirror of
https://github.com/usebruno/bruno.git
synced 2025-06-22 13:01:44 +02:00
feat: send http request
This commit is contained in:
parent
0030a1b8d8
commit
8214255fe8
@ -46,3 +46,13 @@ ipcMain.handle('grafnode-account-request', async (_, request) => {
|
|||||||
const result = await axios(request)
|
const result = await axios(request)
|
||||||
return { data: result.data, status: result.status }
|
return { data: result.data, status: result.status }
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// handler for sending http request
|
||||||
|
ipcMain.handle('send-http-request', async (_, request) => {
|
||||||
|
const result = await axios(request)
|
||||||
|
return {
|
||||||
|
status: result.status,
|
||||||
|
headers: result.headers,
|
||||||
|
data: result.data
|
||||||
|
};
|
||||||
|
})
|
||||||
|
@ -11,6 +11,7 @@ import {
|
|||||||
flattenItems,
|
flattenItems,
|
||||||
findItem
|
findItem
|
||||||
} from '../../utils';
|
} from '../../utils';
|
||||||
|
import { sendRequest } from '../../network';
|
||||||
import useGraphqlSchema from '../../hooks/useGraphqlSchema';
|
import useGraphqlSchema from '../../hooks/useGraphqlSchema';
|
||||||
|
|
||||||
import StyledWrapper from './StyledWrapper';
|
import StyledWrapper from './StyledWrapper';
|
||||||
@ -88,23 +89,22 @@ const RequestTabPanel = () => {
|
|||||||
|
|
||||||
const focusedTab = find(requestTabs, (rt) => rt.uid === activeRequestTabUid);
|
const focusedTab = find(requestTabs, (rt) => rt.uid === activeRequestTabUid);
|
||||||
|
|
||||||
if(!focusedTab || !focusedTab.uid) {
|
if(!focusedTab || !focusedTab.uid || !focusedTab.collectionUid) {
|
||||||
return (
|
return (
|
||||||
<div className="pb-4 px-4">An error occured!</div>
|
<div className="pb-4 px-4">An error occured!</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
let collection;
|
let collection = find(collections, (c) => c.uid === focusedTab.collectionUid);
|
||||||
let item;
|
if(!collection || !collection.uid) {
|
||||||
|
return (
|
||||||
if(focusedTab.collectionUid) {
|
<div className="pb-4 px-4">Collection not found!</div>
|
||||||
collection = find(collections, (c) => c.uid === focusedTab.collectionUid);
|
);
|
||||||
let flattenedItems = flattenItems(collection.items);
|
|
||||||
item = findItem(flattenedItems, activeRequestTabUid);
|
|
||||||
} else {
|
|
||||||
item = focusedTab;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let flattenedItems = flattenItems(collection.items);
|
||||||
|
let item = findItem(flattenedItems, activeRequestTabUid);
|
||||||
|
|
||||||
const runQuery = async () => {
|
const runQuery = async () => {
|
||||||
storeDispatch({
|
storeDispatch({
|
||||||
type: actions.SEND_REQUEST,
|
type: actions.SEND_REQUEST,
|
||||||
@ -113,6 +113,10 @@ const RequestTabPanel = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const sendNetworkRequest = async () => {
|
||||||
|
sendRequest(item, collection.uid, storeDispatch);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledWrapper className="flex flex-col flex-grow">
|
<StyledWrapper className="flex flex-col flex-grow">
|
||||||
<div
|
<div
|
||||||
@ -125,7 +129,7 @@ const RequestTabPanel = () => {
|
|||||||
<QueryUrl
|
<QueryUrl
|
||||||
value = {item.request.url}
|
value = {item.request.url}
|
||||||
onChange={onUrlChange}
|
onChange={onUrlChange}
|
||||||
handleRun={runQuery}
|
handleRun={sendNetworkRequest}
|
||||||
collections={collections}
|
collections={collections}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -135,7 +139,7 @@ const RequestTabPanel = () => {
|
|||||||
className="px-4"
|
className="px-4"
|
||||||
style={{width: `${leftPaneWidth}px`, height: 'calc(100% - 5px)'}}
|
style={{width: `${leftPaneWidth}px`, height: 'calc(100% - 5px)'}}
|
||||||
>
|
>
|
||||||
{item.request.type === 'graphql' ? (
|
{item.type === 'graphql-request' ? (
|
||||||
<GraphQLRequestPane
|
<GraphQLRequestPane
|
||||||
onRunQuery={runQuery}
|
onRunQuery={runQuery}
|
||||||
schema={schema}
|
schema={schema}
|
||||||
@ -145,7 +149,7 @@ const RequestTabPanel = () => {
|
|||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{item.request.type === 'http' ? (
|
{item.type === 'http-request' ? (
|
||||||
<HttpRequestPane
|
<HttpRequestPane
|
||||||
leftPaneWidth={leftPaneWidth}
|
leftPaneWidth={leftPaneWidth}
|
||||||
/>
|
/>
|
||||||
|
@ -18,6 +18,10 @@ const Wrapper = styled.div`
|
|||||||
|
|
||||||
td {
|
td {
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
|
|
||||||
|
&.value {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
|
|||||||
|
|
||||||
const ResponseHeaders = ({headers}) => {
|
const ResponseHeaders = ({headers}) => {
|
||||||
return (
|
return (
|
||||||
<StyledWrapper className="mt-3 px-3">
|
<StyledWrapper className="mt-3 px-3 pb-4">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -15,8 +15,8 @@ const ResponseHeaders = ({headers}) => {
|
|||||||
{headers && headers.length ? headers.map((header, index) => {
|
{headers && headers.length ? headers.map((header, index) => {
|
||||||
return (
|
return (
|
||||||
<tr key={index}>
|
<tr key={index}>
|
||||||
<td>{header[0]}</td>
|
<td className="key">{header[0]}</td>
|
||||||
<td>{header[1]}</td>
|
<td className="value">{header[1]}</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
}) : null}
|
}) : null}
|
||||||
|
@ -1,7 +1,55 @@
|
|||||||
import actions from '../providers/Store/actions';
|
import actions from '../providers/Store/actions';
|
||||||
import { rawRequest, gql } from 'graphql-request';
|
import { rawRequest, gql } from 'graphql-request';
|
||||||
|
|
||||||
const sendRequest = async (request, collectionId, dispatch) => {
|
const sendRequest = async (item, collectionUid, dispatch) => {
|
||||||
|
if(item.type === 'http-request') {
|
||||||
|
dispatch({
|
||||||
|
type: actions.SENDING_REQUEST,
|
||||||
|
collectionUid: collectionUid,
|
||||||
|
itemUid: item.uid
|
||||||
|
});
|
||||||
|
|
||||||
|
const timeStart = Date.now();
|
||||||
|
sendHttpRequest(item.request)
|
||||||
|
.then((response) => {
|
||||||
|
console.log(response);
|
||||||
|
const timeEnd = Date.now();
|
||||||
|
dispatch({
|
||||||
|
type: actions.RESPONSE_RECEIVED,
|
||||||
|
response: {
|
||||||
|
data: response.data,
|
||||||
|
headers: Object.entries(response.headers),
|
||||||
|
size: response.headers["content-length"],
|
||||||
|
status: response.status,
|
||||||
|
duration: timeEnd - timeStart
|
||||||
|
},
|
||||||
|
collectionUid: collectionUid,
|
||||||
|
itemUid: item.uid
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((err) => console.log(err));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendHttpRequest = async (request) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const { ipcRenderer } = window.require("electron");
|
||||||
|
|
||||||
|
console.log(request);
|
||||||
|
|
||||||
|
let options = {
|
||||||
|
method: request.method,
|
||||||
|
url: request.url,
|
||||||
|
};
|
||||||
|
|
||||||
|
ipcRenderer
|
||||||
|
.invoke('send-http-request', options)
|
||||||
|
.then(resolve)
|
||||||
|
.catch(reject);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendGraphqlRequest = async (request, collectionId, dispatch) => {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: actions.SENDING_REQUEST,
|
type: actions.SENDING_REQUEST,
|
||||||
request: request,
|
request: request,
|
||||||
@ -34,5 +82,6 @@ const sendRequest = async (request, collectionId, dispatch) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export {
|
export {
|
||||||
sendRequest
|
sendRequest,
|
||||||
|
sendGraphqlRequest
|
||||||
};
|
};
|
||||||
|
@ -5,7 +5,6 @@ import useIdb from './useIdb';
|
|||||||
import useLoadCollectionsFromIdb from './useLoadCollectionsFromIdb';
|
import useLoadCollectionsFromIdb from './useLoadCollectionsFromIdb';
|
||||||
import useSyncCollectionsToIdb from './useSyncCollectionsToIdb';
|
import useSyncCollectionsToIdb from './useSyncCollectionsToIdb';
|
||||||
import { sendRequest } from '../../network';
|
import { sendRequest } from '../../network';
|
||||||
import actions from './actions';
|
|
||||||
|
|
||||||
export const StoreContext = createContext();
|
export const StoreContext = createContext();
|
||||||
|
|
||||||
|
@ -89,8 +89,8 @@ const reducer = (state, action) => {
|
|||||||
const item = {
|
const item = {
|
||||||
uid: uid,
|
uid: uid,
|
||||||
name: action.requestName,
|
name: action.requestName,
|
||||||
|
type: 'http-request',
|
||||||
request: {
|
request: {
|
||||||
type: 'http',
|
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
url: 'https://reqbin.com/echo/get/json',
|
url: 'https://reqbin.com/echo/get/json',
|
||||||
headers: [],
|
headers: [],
|
||||||
@ -188,9 +188,9 @@ const reducer = (state, action) => {
|
|||||||
draft.requestTabs.push({
|
draft.requestTabs.push({
|
||||||
uid: uid,
|
uid: uid,
|
||||||
name: 'New Tab',
|
name: 'New Tab',
|
||||||
method: 'GET',
|
type: 'http-request',
|
||||||
request: {
|
request: {
|
||||||
type: 'http',
|
method: 'GET',
|
||||||
url: 'https://api.spacex.land/graphql/',
|
url: 'https://api.spacex.land/graphql/',
|
||||||
body: {}
|
body: {}
|
||||||
},
|
},
|
||||||
@ -206,9 +206,9 @@ const reducer = (state, action) => {
|
|||||||
draft.requestTabs.push({
|
draft.requestTabs.push({
|
||||||
uid: uid,
|
uid: uid,
|
||||||
name: 'New Tab',
|
name: 'New Tab',
|
||||||
method: 'GET',
|
type: 'graphql-request',
|
||||||
request: {
|
request: {
|
||||||
type: 'graphql',
|
method: 'GET',
|
||||||
url: 'https://api.spacex.land/graphql/',
|
url: 'https://api.spacex.land/graphql/',
|
||||||
body: {
|
body: {
|
||||||
graphql: {
|
graphql: {
|
||||||
@ -228,7 +228,7 @@ const reducer = (state, action) => {
|
|||||||
|
|
||||||
if(collection) {
|
if(collection) {
|
||||||
let flattenedItems = flattenItems(collection.items);
|
let flattenedItems = flattenItems(collection.items);
|
||||||
let item = findItem(flattenedItems, action.requestTab.id);
|
let item = findItem(flattenedItems, action.requestTab.uid);
|
||||||
|
|
||||||
if(item) {
|
if(item) {
|
||||||
item.response = item.response || {};
|
item.response = item.response || {};
|
||||||
@ -245,14 +245,18 @@ const reducer = (state, action) => {
|
|||||||
case actions.SENDING_REQUEST: {
|
case actions.SENDING_REQUEST: {
|
||||||
return produce(state, (draft) => {
|
return produce(state, (draft) => {
|
||||||
const collection = findCollectionByUid(draft.collections, action.collectionUid);
|
const collection = findCollectionByUid(draft.collections, action.collectionUid);
|
||||||
|
console.log('collection');
|
||||||
|
console.log(collection);
|
||||||
|
|
||||||
if(collection) {
|
if(collection) {
|
||||||
let flattenedItems = flattenItems(collection.items);
|
let flattenedItems = flattenItems(collection.items);
|
||||||
let item = findItem(flattenedItems, action.request.id);
|
let item = findItem(flattenedItems, action.itemUid);
|
||||||
|
console.log('citemllection');
|
||||||
|
console.log(item);
|
||||||
|
|
||||||
if(item) {
|
if(item) {
|
||||||
|
item.response = item.response || {};
|
||||||
item.response.state = 'sending';
|
item.response.state = 'sending';
|
||||||
draft.requestQueuedToSend = null;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -264,7 +268,7 @@ const reducer = (state, action) => {
|
|||||||
|
|
||||||
if(collection) {
|
if(collection) {
|
||||||
let flattenedItems = flattenItems(collection.items);
|
let flattenedItems = flattenItems(collection.items);
|
||||||
let item = findItem(flattenedItems, action.request.id);
|
let item = findItem(flattenedItems, action.itemUid);
|
||||||
|
|
||||||
if(item) {
|
if(item) {
|
||||||
item.response = action.response;
|
item.response = action.response;
|
||||||
@ -300,8 +304,8 @@ const reducer = (state, action) => {
|
|||||||
"uid": nanoid(),
|
"uid": nanoid(),
|
||||||
"depth": 2,
|
"depth": 2,
|
||||||
"name": "Capsules 2",
|
"name": "Capsules 2",
|
||||||
|
"type": "graphql-request",
|
||||||
"request": {
|
"request": {
|
||||||
"type": "graphql",
|
|
||||||
"url": "https://api.spacex.land/graphql/",
|
"url": "https://api.spacex.land/graphql/",
|
||||||
"method": "POST",
|
"method": "POST",
|
||||||
"headers": [],
|
"headers": [],
|
||||||
|
Loading…
x
Reference in New Issue
Block a user