feat: send http request

This commit is contained in:
Anoop M D 2022-03-14 23:16:49 +05:30
parent 0030a1b8d8
commit 8214255fe8
7 changed files with 99 additions and 29 deletions

View File

@ -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
};
})

View File

@ -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}
/> />

View File

@ -18,6 +18,10 @@ const Wrapper = styled.div`
td { td {
padding: 6px 10px; padding: 6px 10px;
&.value {
word-break: break-all;
}
} }
} }
`; `;

View File

@ -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}

View File

@ -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
}; };

View File

@ -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();

View File

@ -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": [],