holm/bruno
1
0
Fork 0
forked from extern/bruno
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add and update request headers

Browse Source
This commit is contained in:
Anoop M D 2022-03-19 18:33:16 +05:30
parent 5cbf163e26
commit cb96a175df
6 changed files with 125 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
renderer/components/RequestPane/HttpRequestPane/index.js
View File

@ -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>

89
renderer/components/RequestPane/RequestHeaders/index.js
View File

@ -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
dispatch(requestChanged({
itemUid: item.uid,
collectionUid: collection.uid
}));
dispatch(addRequestHeader({
itemUid: item.uid,
collectionUid: collection.uid,
}));
};
let newHeaders = [...headers, newHeader];
setHeaders(newHeaders);
};
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}/>

2
renderer/components/RequestTabPanel/index.js
View File

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

44
renderer/providers/ReduxStore/slices/collections.js
View File

@ -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) => {

17
renderer/utils/collections/index.js
View File

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

8
renderer/utils/network/index.js
View File

@ -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