diff --git a/main/index.js b/main/index.js
index c95b2d454..58e0b66d4 100644
--- a/main/index.js
+++ b/main/index.js
@@ -46,3 +46,13 @@ ipcMain.handle('grafnode-account-request', async (_, request) => {
const result = await axios(request)
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
+ };
+})
diff --git a/renderer/components/RequestTabPanel/index.js b/renderer/components/RequestTabPanel/index.js
index fe61dc70b..66b641da9 100644
--- a/renderer/components/RequestTabPanel/index.js
+++ b/renderer/components/RequestTabPanel/index.js
@@ -11,6 +11,7 @@ import {
flattenItems,
findItem
} from '../../utils';
+import { sendRequest } from '../../network';
import useGraphqlSchema from '../../hooks/useGraphqlSchema';
import StyledWrapper from './StyledWrapper';
@@ -88,23 +89,22 @@ const RequestTabPanel = () => {
const focusedTab = find(requestTabs, (rt) => rt.uid === activeRequestTabUid);
- if(!focusedTab || !focusedTab.uid) {
+ if(!focusedTab || !focusedTab.uid || !focusedTab.collectionUid) {
return (
An error occured!
);
}
- let collection;
- let item;
-
- if(focusedTab.collectionUid) {
- collection = find(collections, (c) => c.uid === focusedTab.collectionUid);
- let flattenedItems = flattenItems(collection.items);
- item = findItem(flattenedItems, activeRequestTabUid);
- } else {
- item = focusedTab;
+ let collection = find(collections, (c) => c.uid === focusedTab.collectionUid);
+ if(!collection || !collection.uid) {
+ return (
+ Collection not found!
+ );
}
+ let flattenedItems = flattenItems(collection.items);
+ let item = findItem(flattenedItems, activeRequestTabUid);
+
const runQuery = async () => {
storeDispatch({
type: actions.SEND_REQUEST,
@@ -113,6 +113,10 @@ const RequestTabPanel = () => {
});
};
+ const sendNetworkRequest = async () => {
+ sendRequest(item, collection.uid, storeDispatch);
+ };
+
return (
{
@@ -135,7 +139,7 @@ const RequestTabPanel = () => {
className="px-4"
style={{width: `${leftPaneWidth}px`, height: 'calc(100% - 5px)'}}
>
- {item.request.type === 'graphql' ? (
+ {item.type === 'graphql-request' ? (
{
/>
) : null}
- {item.request.type === 'http' ? (
+ {item.type === 'http-request' ? (
diff --git a/renderer/components/ResponsePane/ResponseHeaders/StyledWrapper.js b/renderer/components/ResponsePane/ResponseHeaders/StyledWrapper.js
index 47c4b960c..b02e7abf6 100644
--- a/renderer/components/ResponsePane/ResponseHeaders/StyledWrapper.js
+++ b/renderer/components/ResponsePane/ResponseHeaders/StyledWrapper.js
@@ -18,6 +18,10 @@ const Wrapper = styled.div`
td {
padding: 6px 10px;
+
+ &.value {
+ word-break: break-all;
+ }
}
}
`;
diff --git a/renderer/components/ResponsePane/ResponseHeaders/index.js b/renderer/components/ResponsePane/ResponseHeaders/index.js
index 5ff72b8ba..08ffe3aa5 100644
--- a/renderer/components/ResponsePane/ResponseHeaders/index.js
+++ b/renderer/components/ResponsePane/ResponseHeaders/index.js
@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
const ResponseHeaders = ({headers}) => {
return (
-
+
@@ -15,8 +15,8 @@ const ResponseHeaders = ({headers}) => {
{headers && headers.length ? headers.map((header, index) => {
return (
- | {header[0]} |
- {header[1]} |
+ {header[0]} |
+ {header[1]} |
);
}) : null}
diff --git a/renderer/network/index.js b/renderer/network/index.js
index 09adc9f40..ba7f22723 100644
--- a/renderer/network/index.js
+++ b/renderer/network/index.js
@@ -1,7 +1,55 @@
import actions from '../providers/Store/actions';
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({
type: actions.SENDING_REQUEST,
request: request,
@@ -34,5 +82,6 @@ const sendRequest = async (request, collectionId, dispatch) => {
};
export {
- sendRequest
+ sendRequest,
+ sendGraphqlRequest
};
diff --git a/renderer/providers/Store/index.js b/renderer/providers/Store/index.js
index db614f60b..d0da61b72 100644
--- a/renderer/providers/Store/index.js
+++ b/renderer/providers/Store/index.js
@@ -5,7 +5,6 @@ import useIdb from './useIdb';
import useLoadCollectionsFromIdb from './useLoadCollectionsFromIdb';
import useSyncCollectionsToIdb from './useSyncCollectionsToIdb';
import { sendRequest } from '../../network';
-import actions from './actions';
export const StoreContext = createContext();
diff --git a/renderer/providers/Store/reducer.js b/renderer/providers/Store/reducer.js
index 6519a67c6..a5d91adfd 100644
--- a/renderer/providers/Store/reducer.js
+++ b/renderer/providers/Store/reducer.js
@@ -89,8 +89,8 @@ const reducer = (state, action) => {
const item = {
uid: uid,
name: action.requestName,
+ type: 'http-request',
request: {
- type: 'http',
method: 'GET',
url: 'https://reqbin.com/echo/get/json',
headers: [],
@@ -188,9 +188,9 @@ const reducer = (state, action) => {
draft.requestTabs.push({
uid: uid,
name: 'New Tab',
- method: 'GET',
+ type: 'http-request',
request: {
- type: 'http',
+ method: 'GET',
url: 'https://api.spacex.land/graphql/',
body: {}
},
@@ -206,9 +206,9 @@ const reducer = (state, action) => {
draft.requestTabs.push({
uid: uid,
name: 'New Tab',
- method: 'GET',
+ type: 'graphql-request',
request: {
- type: 'graphql',
+ method: 'GET',
url: 'https://api.spacex.land/graphql/',
body: {
graphql: {
@@ -228,7 +228,7 @@ const reducer = (state, action) => {
if(collection) {
let flattenedItems = flattenItems(collection.items);
- let item = findItem(flattenedItems, action.requestTab.id);
+ let item = findItem(flattenedItems, action.requestTab.uid);
if(item) {
item.response = item.response || {};
@@ -245,14 +245,18 @@ const reducer = (state, action) => {
case actions.SENDING_REQUEST: {
return produce(state, (draft) => {
const collection = findCollectionByUid(draft.collections, action.collectionUid);
+ console.log('collection');
+ console.log(collection);
if(collection) {
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) {
+ item.response = item.response || {};
item.response.state = 'sending';
- draft.requestQueuedToSend = null;
}
}
});
@@ -264,7 +268,7 @@ const reducer = (state, action) => {
if(collection) {
let flattenedItems = flattenItems(collection.items);
- let item = findItem(flattenedItems, action.request.id);
+ let item = findItem(flattenedItems, action.itemUid);
if(item) {
item.response = action.response;
@@ -300,8 +304,8 @@ const reducer = (state, action) => {
"uid": nanoid(),
"depth": 2,
"name": "Capsules 2",
+ "type": "graphql-request",
"request": {
- "type": "graphql",
"url": "https://api.spacex.land/graphql/",
"method": "POST",
"headers": [],