feat: delete collection item

This commit is contained in:
Anoop M D 2022-03-19 01:05:43 +05:30
parent 7fc624d1a8
commit 4ded884501
12 changed files with 142 additions and 11 deletions

View File

@ -38,7 +38,7 @@ const ModalFooter = ({confirmText, cancelText, handleSubmit, handleCancel, confi
);
}
const ConfirmModal = ({
const Modal = ({
size,
title,
confirmText,
@ -91,4 +91,4 @@ const ConfirmModal = ({
);
};
export default ConfirmModal;
export default Modal;

View File

@ -83,6 +83,13 @@ const RequestTabPanel = () => {
}
const item = findItemInCollection(collection, activeTabUid);
if(!item || !item.uid) {
return (
<StyledWrapper>
Request not found!
</StyledWrapper>
);
}
const onUrlChange = (value) => {
dispatch(requestChanged({

View File

@ -47,7 +47,9 @@ const RequestTabs = () => {
const handleCloseClick = (event, tab) => {
event.stopPropagation();
event.preventDefault();
dispatch(closeTab(tab.uid))
dispatch(closeTab({
tabUid: tab.uid
}))
};
const createNewTab = () => {
@ -71,14 +73,22 @@ const RequestTabs = () => {
const collectionRequestTabs = filter(tabs, (t) => t.collectionUid === activeTab.collectionUid);
const item = findItemInCollection(activeCollection, activeTab.uid);
if(!item || !item.uid) {
return (
<StyledWrapper>
Request not found!
</StyledWrapper>
);
}
const getRequestName = (tab) => {
const item = findItemInCollection(activeCollection, tab.uid);
return item.name;
return item ? item.name : '';
}
const getRequestMethod = (tab) => {
const item = findItemInCollection(activeCollection, tab.uid);
return item.request.name;
return item ? item.request.method : '';
}
return (

View File

@ -0,0 +1,15 @@
import styled from 'styled-components';
const Wrapper = styled.div`
button.submit {
color: white;
background-color: var(--color-background-danger) !important;
border: inherit !important;
&:hover {
border: inherit !important;
}
}
`;
export default Wrapper;

View File

@ -0,0 +1,35 @@
import React from 'react';
import Modal from 'components/Modal';
import { isItemAFolder } from 'utils/tabs';
import { useDispatch } from 'react-redux';
import { closeTab } from 'providers/ReduxStore/slices/tabs';
import { deleteItem } from 'providers/ReduxStore/slices/collections';
import StyledWrapper from './StyledWrapper';
const DeleteCollectionItem = ({onClose, item, collection}) => {
const dispatch = useDispatch();
const isFolder = isItemAFolder(item);
const onConfirm = () =>{
dispatch(closeTab({
tabUid: item.uid
}));
dispatch(deleteItem(item.uid, collection.uid));
onClose();
};
return (
<StyledWrapper>
<Modal
size="sm"
title={`Delete ${isFolder ? 'Folder' : 'Request'}`}
confirmText="Delete"
handleConfirm={onConfirm}
handleCancel={onClose}
>
Are you sure you want to delete <span className="font-semibold">{item.name}</span> ?
</Modal>
</StyledWrapper>
);
};
export default DeleteCollectionItem;

View File

@ -47,6 +47,14 @@ const Wrapper = styled.div`
position: relative;
top: -0.625rem;
}
div.dropdown-item.delete-item {
color: var(--color-text-danger);
&:hover {
background-color: var(--color-background-danger);
color: white;
}
}
}
`;

View File

@ -1,4 +1,4 @@
import React, { useRef, forwardRef } from 'react';
import React, { useState, useRef, forwardRef } from 'react';
import range from 'lodash/range';
import get from 'lodash/get';
import { IconChevronRight, IconDots } from '@tabler/icons';
@ -8,6 +8,7 @@ import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
import { isItemARequest, isItemAFolder, itemIsOpenedInTabs } from 'utils/tabs';
import Dropdown from 'components/Dropdown';
import RequestMethod from './RequestMethod';
import DeleteCollectionItem from './DeleteCollectionItem';
import StyledWrapper from './StyledWrapper';
@ -16,6 +17,8 @@ const CollectionItem = ({item, collection}) => {
const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
const dispatch = useDispatch();
const [deleteItemModalOpen, setDeleteItemModalOpen] = useState(false);
const dropdownTippyRef = useRef();
const MenuIcon = forwardRef((props, ref) => {
return (
@ -62,6 +65,7 @@ const CollectionItem = ({item, collection}) => {
return (
<StyledWrapper className="flex flex-col">
{deleteItemModalOpen && <DeleteCollectionItem item={item} collection={collection} onClose={() => setDeleteItemModalOpen(false)}/>}
<div
className={itemRowClassName}
onClick={handleClick}
@ -119,8 +123,9 @@ const CollectionItem = ({item, collection}) => {
}}>
Rename
</div>
<div className="dropdown-item" onClick={(e) => {
<div className="dropdown-item delete-item" onClick={(e) => {
dropdownTippyRef.current.hide();
setDeleteItemModalOpen(true);
}}>
Delete
</div>

View File

@ -1,7 +1,7 @@
import React, { useRef, useEffect } from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import Modal from '../../Modal';
import Modal from 'components/Modal';
const CreateCollection = ({handleConfirm, handleCancel}) => {
const inputRef = useRef();

View File

@ -4,7 +4,14 @@ import cloneDeep from 'lodash/cloneDeep';
import { createSlice } from '@reduxjs/toolkit'
import { getCollectionsFromIdb, saveCollectionToIdb } from 'utils/idb';
import { sendNetworkRequest } from 'utils/network';
import { findCollectionByUid, findItemInCollection, cloneItem, transformCollectionToSaveToIdb, addDepth } from 'utils/collections';
import {
findCollectionByUid,
findItemInCollection,
cloneItem,
transformCollectionToSaveToIdb,
addDepth,
deleteItemInCollection
} from 'utils/collections';
// todo: errors should be tracked in each slice and displayed as toasts
@ -78,6 +85,13 @@ export const collectionsSlice = createSlice({
addDepth(collection.items);
}
},
_deleteItem: (state, action) => {
const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
if(collection) {
deleteItemInCollection(action.payload.itemUid, collection);
}
},
collectionClicked: (state, action) => {
const collection = findCollectionByUid(state.collections, action.payload);
@ -110,6 +124,7 @@ export const {
_saveRequest,
_newFolder,
_newRequest,
_deleteItem,
collectionClicked,
requestUrlChanged,
} = collectionsSlice.actions;
@ -233,4 +248,24 @@ export const newHttpRequest = (requestName, collectionUid) => (dispatch, getStat
});
};
export const deleteItem = (itemUid, collectionUid) => (dispatch, getState) => {
const state = getState();
const collection = findCollectionByUid(state.collections.collections, collectionUid);
if(collection) {
const collectionCopy = cloneDeep(collection);
deleteItemInCollection(itemUid, collectionCopy);
const collectionToSave = transformCollectionToSaveToIdb(collectionCopy);
saveCollectionToIdb(window.__idb, collectionToSave)
.then(() => {
dispatch(_deleteItem({
itemUid: itemUid,
collectionUid: collectionUid
}));
})
.catch((err) => console.log(err));
}
};
export default collectionsSlice.reducer;

View File

@ -26,7 +26,7 @@ export const tabsSlice = createSlice({
state.activeTabUid = action.payload.uid;
},
closeTab: (state, action) => {
state.tabs = filter(state.tabs, (t) => t.uid !== action.payload);
state.tabs = filter(state.tabs, (t) => t.uid !== action.payload.tabUid);
if(state.tabs && state.tabs.length) {
// todo: closing tab needs to focus on the right adjacent tab

View File

@ -11,6 +11,8 @@
--color-codemirror-border: #efefef;
--color-codemirror-background: rgb(243, 243, 243);
--color-text-link: #1663bb;
--color-text-danger: rgb(185, 28, 28);
--color-background-danger: #dc3545;
--color-method-get: rgb(5, 150, 105);
--color-method-post: #8e44ad;
--color-method-put: #8e44ad;

View File

@ -1,5 +1,6 @@
import each from 'lodash/each';
import find from 'lodash/find';
import filter from 'lodash/filter';
import cloneDeep from 'lodash/cloneDeep';
export const addDepth = (items = []) => {
@ -104,4 +105,17 @@ export const transformCollectionToSaveToIdb = (collection) => {
copyItems(collection.items, collectionToSave.items);
return collectionToSave;
};
};
// todo: optimize this
export const deleteItemInCollection = (itemUid, collection) => {
collection.items = filter(collection.items, (i) => i.uid !== itemUid);
let flattenedItems = flattenItems(collection.items);
each(flattenedItems, (i) => {
if(i.items && i.items.length) {
i.items = filter(i.items, (i) => i.uid !== itemUid);
}
});
};