feat: send http request

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

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 (
       <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 () => {
     storeDispatch({
       type: actions.SEND_REQUEST,
@@ -113,6 +113,10 @@ const RequestTabPanel = () => {
     });
   };
 
+  const sendNetworkRequest =  async () => {
+    sendRequest(item, collection.uid, storeDispatch);
+  };
+
   return (
     <StyledWrapper className="flex flex-col flex-grow">
       <div
@@ -125,7 +129,7 @@ const RequestTabPanel = () => {
         <QueryUrl
           value = {item.request.url}
           onChange={onUrlChange}
-          handleRun={runQuery}
+          handleRun={sendNetworkRequest}
           collections={collections}
         />
       </div>
@@ -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' ? (
               <GraphQLRequestPane
                 onRunQuery={runQuery}
                 schema={schema}
@@ -145,7 +149,7 @@ const RequestTabPanel = () => {
               />
             ) : null}
 
-            {item.request.type === 'http' ? (
+            {item.type === 'http-request' ? (
               <HttpRequestPane
                 leftPaneWidth={leftPaneWidth}
               />

renderer/components/ResponsePane/ResponseHeaders/StyledWrapper.js

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

renderer/components/ResponsePane/ResponseHeaders/index.js

@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
 
 const ResponseHeaders = ({headers}) => {
   return (
-    <StyledWrapper className="mt-3 px-3">
+    <StyledWrapper className="mt-3 px-3 pb-4">
       <table>
         <thead>
           <tr>
@@ -15,8 +15,8 @@ const ResponseHeaders = ({headers}) => {
           {headers && headers.length ? headers.map((header, index) => {
             return (
               <tr key={index}>
-                <td>{header[0]}</td>
+                <td className="key">{header[0]}</td>
-                <td>{header[1]}</td>
+                <td className="value">{header[1]}</td>
               </tr>
             );
           }) : null}

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

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

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