feat: add and update request headers

renderer/components/RequestPane/HttpRequestPane/index.js

@@ -4,7 +4,7 @@ import QueryParams from 'components/RequestPane/QueryParams';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import StyledWrapper from './StyledWrapper';
 
-const HttpRequestPane = ({leftPaneWidth}) => {
+const HttpRequestPane = ({item, collection, leftPaneWidth}) => {
   return (
     <StyledWrapper className="h-full">
       <Tabs className='react-tabs mt-1 flex flex-grow flex-col h-full' forceRenderTabPanel>
@@ -21,7 +21,7 @@ const HttpRequestPane = ({leftPaneWidth}) => {
           <div>Body</div>
         </TabPanel>
         <TabPanel>
-          <RequestHeaders />
+          <RequestHeaders item={item} collection={collection}/>
         </TabPanel>
         <TabPanel>
           <div>Auth</div>

renderer/components/RequestPane/RequestHeaders/index.js

@@ -1,36 +1,55 @@
-import React, { useState } from 'react';
-import { nanoid } from 'nanoid';
+import React from 'react';
+import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
+import { useDispatch } from 'react-redux';
+import { requestChanged } from 'providers/ReduxStore/slices/tabs';
+import { addRequestHeader, updateRequestHeader } from 'providers/ReduxStore/slices/collections';
 import StyledWrapper from './StyledWrapper';
 
-const initialState = [{
-  uid: nanoid(),
-  enabled: true
-}];
-
-const RequestHeaders = () => {
-  const [headers, setHeaders] = useState(initialState);
+const RequestHeaders = ({item, collection}) => {
+  const dispatch = useDispatch();
+  const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
 
   const addHeader = () => {
-    let newHeader = {
-      uid: nanoid(),
-      key: '',
-      value: '',
-      description: '',
-      enabled: true
-    };
-
-    let newHeaders = [...headers, newHeader];
-    setHeaders(newHeaders);
+    dispatch(requestChanged({
+      itemUid: item.uid,
+      collectionUid: collection.uid
+    }));
+    dispatch(addRequestHeader({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+    }));
   };
 
-  const handleHeaderValueChange = (e, index, menu) => {
-    // todo: yet to implement
+  const handleHeaderValueChange = (e, _header, type) => {
+    const header = cloneDeep(_header);
+    switch(type) {
+      case 'name' : {
+        header.name = e.target.value;
+        break;
+      }
+      case 'value' : {
+        header.value = e.target.value;
+        break;
+      }
+      case 'description' : {
+        header.description = e.target.value;
+        break;
+      }
+    }
+    dispatch(requestChanged({
+      itemUid: item.uid,
+      collectionUid: collection.uid
+    }));
+    dispatch(updateRequestHeader({
+      header: header,
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+    }));
   };
   
   const handleRemoveHeader = (index) => {
-    headers.splice(index, 1);
-    setHeaders([...headers]);
   };
   
   return (
@@ -51,28 +70,28 @@ const RequestHeaders = () => {
                 <td>
                   <input
                     type="text"
-                    name="key"
                     autoComplete="off"
-                    defaultValue={headers[index].key}
-                    onChange={(e) => handleHeaderValueChange(e, index, 'key')}
+                    value={header.name}
+                    className="mousetrap"
+                    onChange={(e) => handleHeaderValueChange(e, header, 'name')}
                   />
                 </td>
                 <td>
                   <input
                     type="text"
-                    name="value"
                     autoComplete="off"
-                    defaultValue={headers[index].value}
-                    onChange={(e) => handleHeaderValueChange(e, index, 'value')}
+                    value={header.value}
+                    className="mousetrap"
+                    onChange={(e) => handleHeaderValueChange(e, header, 'value')}
                   />
                 </td>
                 <td>
                   <input
                     type="text"
-                    name="description"
                     autoComplete="off"
-                    defaultValue={headers[index].description}
-                    onChange={(e) => handleHeaderValueChange(e, index, 'description')}
+                    value={header.description}
+                    className="mousetrap"
+                    onChange={(e) => handleHeaderValueChange(e, header, 'description')}
                   />
                 </td>
                 <td>
@@ -80,9 +99,9 @@ const RequestHeaders = () => {
                     <input
                       type="checkbox"
                       className="mr-3"
-                      defaultChecked={header.enabled}
-                      name="enabled"
-                      onChange={(e) => handleHeaderValueChange(e, index, 'enabled')}
+                      checked={header.enabled}
+                      className="mousetrap"
+                      onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
                     />
                     <button onClick={() => handleRemoveHeader(index)}>
                       <IconTrash strokeWidth={1.5} size={20}/>

renderer/components/RequestTabPanel/index.js

@@ -145,6 +145,8 @@ const RequestTabPanel = () => {
 
             {item.type === 'http-request' ? (
               <HttpRequestPane
+                item={item}
+                collection={collection}
                 leftPaneWidth={leftPaneWidth}
               />
             ) : null}

renderer/providers/ReduxStore/slices/collections.js

@@ -1,4 +1,5 @@
 import { nanoid } from 'nanoid';
+import find from 'lodash/find';
 import each from 'lodash/each';
 import cloneDeep from 'lodash/cloneDeep';
 import { createSlice } from '@reduxjs/toolkit'
@@ -129,6 +130,47 @@ export const collectionsSlice = createSlice({
           item.draft.request.url = action.payload.url;
         }
       }
+    },
+    addRequestHeader: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if(collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+        
+        if(item) {
+          if(!item.draft) {
+            item.draft = cloneItem(item);
+          }
+          item.draft.request.headers = item.draft.request.headers || [];
+          item.draft.request.headers.push({
+            uid: nanoid(),
+            name: '',
+            value: '',
+            description: '',
+            enabled: true
+          });
+        }
+      }
+    },
+    updateRequestHeader: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if(collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+        
+        if(item) {
+          if(!item.draft) {
+            item.draft = cloneItem(item);
+          }
+          const header = find(item.draft.request.headers, (h) => h.uid === action.payload.header.uid);
+          if(header) {
+            header.name = action.payload.header.name;
+            header.value = action.payload.header.value;
+            header.description = action.payload.header.description;
+            header.enabled = action.payload.header.enabled;
+          }
+        }
+      }
     }
   }
 });
@@ -145,6 +187,8 @@ export const {
   collectionClicked,
   collectionFolderClicked,
   requestUrlChanged,
+  addRequestHeader,
+  updateRequestHeader
 } = collectionsSlice.actions;
 
 export const loadCollectionsFromIdb = () => (dispatch) => {

renderer/utils/collections/index.js

@@ -1,5 +1,6 @@
 import each from 'lodash/each';
 import find from 'lodash/find';
+import map from 'lodash/map';
 import filter from 'lodash/filter';
 import cloneDeep from 'lodash/cloneDeep';
 
@@ -54,6 +55,18 @@ export const cloneItem = (item) => {
 };
 
 export const transformCollectionToSaveToIdb = (collection, options = {}) => {
+  const copyHeaders = (headers) => {
+    return map(headers, (header) => {
+      return {
+        uid: header.uid,
+        name: header.name,
+        value: header.value,
+        description: header.description,
+        enabled: header.enabled
+      }
+    });
+  };
+
   const copyItems = (sourceItems, destItems) => {
     each(sourceItems, (si) => {
       const di = {
@@ -69,7 +82,7 @@ export const transformCollectionToSaveToIdb = (collection, options = {}) => {
           di.request = {
             url: si.draft.request.url,
             method: si.draft.request.method,
-            headers: si.draft.request.headers,
+            headers: copyHeaders(si.draft.request.headers),
             body: si.draft.request.body
           };
         }
@@ -78,7 +91,7 @@ export const transformCollectionToSaveToIdb = (collection, options = {}) => {
           di.request = {
             url: si.request.url,
             method: si.request.method,
-            headers: si.request.headers,
+            headers: copyHeaders(si.request.headers),
             body: si.request.body
           }
         };

renderer/utils/network/index.js

@@ -1,3 +1,4 @@
+import each from 'lodash/each';
 import { rawRequest, gql } from 'graphql-request';
 
 const sendNetworkRequest = async (item) => {
@@ -26,10 +27,17 @@ const sendHttpRequest = async (request) => {
     const { ipcRenderer } = window.require("electron");
 
     console.log(request);
+    const headers = {};
+    each(request.headers, (h) => {
+      if(h.enabled) {
+        headers[h.name] = h.value;
+      }
+    });
 
     let options = {
       method: request.method,
       url: request.url,
+      headers: headers
     };
 
     ipcRenderer