diff --git a/renderer/components/RequestPane/RequestHeaders/index.js b/renderer/components/RequestPane/RequestHeaders/index.js index 560dacf01..aaa12199c 100644 --- a/renderer/components/RequestPane/RequestHeaders/index.js +++ b/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}) => {
handleHeaderValueChange(e, header, 'enabled')} /> -
diff --git a/renderer/providers/ReduxStore/slices/collections.js b/renderer/providers/ReduxStore/slices/collections.js index 9f198e2c2..632bd989c 100644 --- a/renderer/providers/ReduxStore/slices/collections.js +++ b/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) => { diff --git a/renderer/utils/collections/index.js b/renderer/utils/collections/index.js index a8e7e3b02..472ae2b86 100644 --- a/renderer/utils/collections/index.js +++ b/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'; +};