feat: delete request headers

renderer/components/RequestPane/RequestHeaders/index.js

@@ -4,7 +4,7 @@ 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 { addRequestHeader, updateRequestHeader, deleteRequestHeader } from 'providers/ReduxStore/slices/collections';
 import StyledWrapper from './StyledWrapper';
 
 const RequestHeaders = ({item, collection}) => {
@@ -45,11 +45,20 @@ const RequestHeaders = ({item, collection}) => {
     dispatch(updateRequestHeader({
       header: header,
       itemUid: item.uid,
-      collectionUid: collection.uid,
+      collectionUid: collection.uid
     }));
   };
   
-  const handleRemoveHeader = (index) => {
+  const handleRemoveHeader = (header) => {
+    dispatch(requestChanged({
+      itemUid: item.uid,
+      collectionUid: collection.uid
+    }));
+    dispatch(deleteRequestHeader({
+      headerUid: header.uid,
+      itemUid: item.uid,
+      collectionUid: collection.uid
+    }));
   };
   
   return (
@@ -98,12 +107,11 @@ const RequestHeaders = ({item, collection}) => {
                   <div className="flex items-center">
                     <input
                       type="checkbox"
-                      className="mr-3"
                       checked={header.enabled}
-                      className="mousetrap"
+                      className="mr-3 mousetrap"
                       onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
                     />
-                    <button onClick={() => handleRemoveHeader(index)}>
+                    <button onClick={() => handleRemoveHeader(header)}>
                       <IconTrash strokeWidth={1.5} size={20}/>
                     </button>
                   </div>

renderer/providers/ReduxStore/slices/collections.js

@@ -1,5 +1,6 @@
 import { nanoid } from 'nanoid';
 import find from 'lodash/find';
+import filter from 'lodash/filter';
 import each from 'lodash/each';
 import cloneDeep from 'lodash/cloneDeep';
 import { createSlice } from '@reduxjs/toolkit'
@@ -11,7 +12,8 @@ import {
   cloneItem,
   transformCollectionToSaveToIdb,
   addDepth,
-  deleteItemInCollection
+  deleteItemInCollection,
+  isItemARequest
 } from 'utils/collections';
 
 // todo: errors should be tracked in each slice and displayed as toasts
@@ -123,7 +125,7 @@ export const collectionsSlice = createSlice({
       if(collection) {
         const item = findItemInCollection(collection, action.payload.itemUid);
         
-        if(item) {
+        if(item && isItemARequest(item)) {
           if(!item.draft) {
             item.draft = cloneItem(item);
           }
@@ -137,7 +139,7 @@ export const collectionsSlice = createSlice({
       if(collection) {
         const item = findItemInCollection(collection, action.payload.itemUid);
         
-        if(item) {
+        if(item && isItemARequest(item)) {
           if(!item.draft) {
             item.draft = cloneItem(item);
           }
@@ -158,7 +160,7 @@ export const collectionsSlice = createSlice({
       if(collection) {
         const item = findItemInCollection(collection, action.payload.itemUid);
         
-        if(item) {
+        if(item && isItemARequest(item)) {
           if(!item.draft) {
             item.draft = cloneItem(item);
           }
@@ -171,6 +173,20 @@ export const collectionsSlice = createSlice({
           }
         }
       }
+    },
+    deleteRequestHeader: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if(collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+        
+        if(item && isItemARequest(item)) {
+          if(!item.draft) {
+            item.draft = cloneItem(item);
+          }
+          item.draft.request.headers = filter(item.draft.request.headers, (h) => h.uid !== action.payload.headerUid);
+        }
+      }
     }
   }
 });
@@ -188,7 +204,8 @@ export const {
   collectionFolderClicked,
   requestUrlChanged,
   addRequestHeader,
-  updateRequestHeader
+  updateRequestHeader,
+  deleteRequestHeader
 } = collectionsSlice.actions;
 
 export const loadCollectionsFromIdb = () => (dispatch) => {

renderer/utils/collections/index.js

@@ -130,3 +130,11 @@ export const deleteItemInCollection = (itemUid, collection) => {
     }
   });
 };
+
+export const isItemARequest = (item) => {
+  return item.hasOwnProperty('request') && ['http-request', 'graphql-request'].includes(item.type);
+};
+
+export const isItemAFolder = (item) => {
+  return !item.hasOwnProperty('request') && item.type === 'folder';
+};