feat: detect changes in request url

This commit is contained in:
Anoop M D 2022-01-23 18:08:01 +05:30
parent b4599b65b9
commit c3dde749e3
4 changed files with 39 additions and 9 deletions

View File

@ -27,6 +27,7 @@ const Wrapper = styled.div`
.tab-container {
width: 100%;
border-left: 1px solid #dcdcdc;
border-right: 1px solid transparent;
}
&.active {
@ -52,9 +53,9 @@ const Wrapper = styled.div`
.close-icon-container {
min-height: 20px;
border-radius: 3px;
display: none;
.close-icon {
display: none;
color: #9f9f9f;
width: 8px;
padding-bottom: 6px;
@ -65,16 +66,20 @@ const Wrapper = styled.div`
background-color: #eaeaea;
color: rgb(76 76 76);
}
.has-changes-icon {
height: 24px;
}
}
&.active {
.close-icon-container {
.close-icon-container .close-icon {
display: block;
}
}
&:hover{
.close-icon-container {
.close-icon-container .close-icon {
display: block;
}
}

View File

@ -60,9 +60,15 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
<span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
</div>
<div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
<svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
<path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
</svg>
{!rt.hasChanges ? (
<svg focusable="false"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
<path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
</svg>
) : (
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="8" height="16" fill="#cc7b1b" class="has-changes-icon" viewBox="0 0 8 8">
<circle cx="4" cy="4" r="3"/>
</svg>
) }
</div>
</div>
</li>

View File

@ -8,7 +8,9 @@ import {
flattenItems,
findItem,
isItemARequest,
itemIsOpenedInTabs
itemIsOpenedInTabs,
cloneItem,
updateRequestTabAsChanged
} from './utils';
const reducer = (state, action) => {
@ -42,7 +44,8 @@ const reducer = (state, action) => {
id: item.id,
name: item.name,
method: item.request.method,
collectionId: collection.id
collectionId: collection.id,
hasChanges: false
});
draft.activeRequestTabId = item.id;
}
@ -79,7 +82,11 @@ const reducer = (state, action) => {
let item = findItem(flattenedItems, action.requestTab.id);
if(item) {
item.request.url = action.url;
if(!item.draft) {
item.draft = cloneItem(item);
}
item.draft.request.url = action.url;
updateRequestTabAsChanged(draft.requestTabs, item.id);
}
}
});

View File

@ -1,5 +1,6 @@
import each from 'lodash/each';
import find from 'lodash/find';
import cloneDeep from 'lodash/cloneDeep';
export const flattenItems = (items = []) => {
const flattenedItems = [];
@ -30,3 +31,14 @@ export const isItemARequest = (item) => {
export const itemIsOpenedInTabs = (item, tabs) => {
return find(tabs, (t) => t.id === item.id);
};
export const cloneItem = (item) => {
return cloneDeep(item);
};
export const updateRequestTabAsChanged = (requestTabs, itemId) => {
let currentTab = find(requestTabs, (rt) => rt.id == itemId);
if(currentTab) {
currentTab.hasChanges = true;
}
};