From 8214255fe8d5e8c371922c29b03e43c577443608 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Mon, 14 Mar 2022 23:16:49 +0530 Subject: [PATCH] feat: send http request --- main/index.js | 10 ++++ renderer/components/RequestTabPanel/index.js | 30 ++++++----- .../ResponseHeaders/StyledWrapper.js | 4 ++ .../ResponsePane/ResponseHeaders/index.js | 6 +-- renderer/network/index.js | 53 ++++++++++++++++++- renderer/providers/Store/index.js | 1 - renderer/providers/Store/reducer.js | 24 +++++---- 7 files changed, 99 insertions(+), 29 deletions(-) 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 ( - - + + ); }) : 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": [],
{header[0]}{header[1]}{header[0]}{header[1]}