feat: create new folder inside a folder

renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js

@@ -8,6 +8,7 @@ import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
 import { collectionFolderClicked } from 'providers/ReduxStore/slices/collections';
 import Dropdown from 'components/Dropdown';
 import NewRequest from 'components/Sidebar/NewRequest';
+import NewFolder from 'components/Sidebar/NewFolder';
 import RequestMethod from './RequestMethod';
 import RenameCollectionItem from './RenameCollectionItem';
 import DeleteCollectionItem from './DeleteCollectionItem';
@@ -23,6 +24,7 @@ const CollectionItem = ({item, collection}) => {
   const [renameItemModalOpen, setRenameItemModalOpen] = useState(false);
   const [deleteItemModalOpen, setDeleteItemModalOpen] = useState(false);
   const [newRequestModalOpen, setNewRequestModalOpen] = useState(false);
+  const [newFolderModalOpen, setNewFolderModalOpen] = useState(false);
 
   const dropdownTippyRef = useRef();
   const MenuIcon = forwardRef((props, ref) => {
@@ -79,6 +81,7 @@ const CollectionItem = ({item, collection}) => {
       {renameItemModalOpen && <RenameCollectionItem item={item} collection={collection} onClose={() => setRenameItemModalOpen(false)}/>}
       {deleteItemModalOpen && <DeleteCollectionItem item={item} collection={collection} onClose={() => setDeleteItemModalOpen(false)}/>}
       {newRequestModalOpen && <NewRequest item={item} collection={collection} onClose={() => setNewRequestModalOpen(false)}/>}
+      {newFolderModalOpen && <NewFolder item={item} collection={collection} onClose={() => setNewFolderModalOpen(false)}/>}
       <div
         className={itemRowClassName}
         onClick={handleClick}
@@ -127,6 +130,7 @@ const CollectionItem = ({item, collection}) => {
                   </div>
                   <div className="dropdown-item" onClick={(e) => {
                     dropdownTippyRef.current.hide();
+                    setNewFolderModalOpen(true);
                   }}>
                     New Folder
                   </div>

renderer/components/Sidebar/Collections/Collection/index.js

@@ -43,18 +43,10 @@ const Collection = ({collection}) => {
     dispatch(collectionClicked(collection.uid));
   };
 
-  const hideNewFolderModal = () => setShowNewFolderModal(false);
-
   return (
     <StyledWrapper className="flex flex-col">
       {showNewRequestModal && <NewRequest collection={collection} onClose={() => setShowNewRequestModal(false)}/>}
-      {showNewFolderModal && (
-        <NewFolder
-          collectionUid={collection.uid}
-          handleCancel={hideNewFolderModal}
-          handleClose={hideNewFolderModal}
-        />
-      )}
+      {showNewFolderModal && <NewFolder collection={collection} onClose={() => setShowNewFolderModal(false)}/>}
       <div className="flex py-1 collection-name items-center" onClick={handleClick}>
         <IconChevronRight size={16} strokeWidth={2} className={iconClassName} style={{width:16, color: 'rgb(160 160 160)'}}/>
         <span className="ml-1">{collection.name}</span>

renderer/components/Sidebar/NewFolder/index.js

@@ -5,7 +5,7 @@ import Modal from 'components/Modal';
 import { useDispatch } from 'react-redux';
 import { newFolder } from 'providers/ReduxStore/slices/collections';
 
-const NewFolder = ({collectionUid, handleCancel, handleClose}) => {
+const NewFolder = ({collection, item, onClose}) => {
   const dispatch = useDispatch();
   const inputRef = useRef();
   const formik = useFormik({
@@ -20,8 +20,8 @@ const NewFolder = ({collectionUid, handleCancel, handleClose}) => {
         .required('name is required')
     }),
     onSubmit: (values) => {
-      dispatch(newFolder(values.folderName, collectionUid));
-      handleClose();
+      dispatch(newFolder(values.folderName, collection.uid, item ? item.uid : null))
+      onClose();
     }
   });
 
@@ -39,7 +39,7 @@ const NewFolder = ({collectionUid, handleCancel, handleClose}) => {
       title='New Folder'
       confirmText='Create'
       handleConfirm={onSubmit}
-      handleCancel={handleCancel}
+      handleCancel={onClose}
     >
       <form className="grafnode-form" onSubmit={formik.handleSubmit}>
         <div>

renderer/providers/ReduxStore/slices/collections.js

@@ -63,20 +63,7 @@ export const collectionsSlice = createSlice({
         }
       }
     },
-    _newFolder: (state, action) => {
-      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
-
-      if(collection) {
-        collection.items.push({
-          uid: nanoid(),
-          name: action.payload.folderName,
-          type: 'folder',
-          items: []
-        });
-        addDepth(collection.items);
-      }
-    },
-    _newRequest: (state, action) => {
+    _newItem: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
 
       if(collection) {
@@ -152,8 +139,7 @@ export const {
   _requestSent,
   _responseReceived,
   _saveRequest,
-  _newFolder,
-  _newRequest,
+  _newItem,
   _deleteItem,
   _renameItem,
   collectionClicked,
@@ -216,24 +202,34 @@ export const saveRequest = (itemUid, collectionUid) => (dispatch, getState) => {
   }
 };
 
-export const newFolder = (folderName, collectionUid) => (dispatch, getState) => {
+export const newFolder = (folderName, collectionUid, itemUid) => (dispatch, getState) => {
   const state = getState();
   const collection = findCollectionByUid(state.collections.collections, collectionUid);
 
   if(collection) {
     const collectionCopy = cloneDeep(collection);
-    collectionCopy.items.push({
+    const item = {
       uid: nanoid(),
       name: folderName,
       type: 'folder',
       items: []
-    });
+    };
+    if(!itemUid) {
+      collectionCopy.items.push(item);
+    } else {
+      const currentItem = findItemInCollection(collectionCopy, itemUid);
+      if(currentItem && currentItem.type === 'folder') {
+        currentItem.items = currentItem.items || [];
+        currentItem.items.push(item);
+      }
+    }
     const collectionToSave = transformCollectionToSaveToIdb(collectionCopy);
 
     saveCollectionToIdb(window.__idb, collectionToSave)
       .then(() => {
-        dispatch(_newFolder({
-          folderName: folderName,
+        dispatch(_newItem({
+          item: item,
+          currentItemUid: itemUid,
           collectionUid: collectionUid
         }));
       })
@@ -273,7 +269,7 @@ export const newHttpRequest = (requestName, collectionUid, itemUid) => (dispatch
   
       saveCollectionToIdb(window.__idb, collectionToSave)
         .then(() => {
-          Promise.resolve(dispatch(_newRequest({
+          Promise.resolve(dispatch(_newItem({
             item: item,
             currentItemUid: itemUid,
             collectionUid: collectionUid