diff --git a/renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js b/renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js index 1eb2b8373..2d359879b 100644 --- a/renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js +++ b/renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js @@ -1,15 +1,17 @@ import React, { useState, useRef, forwardRef } from 'react'; -import range from 'lodash/range'; import get from 'lodash/get'; -import { IconChevronRight, IconDots } from '@tabler/icons'; +import range from 'lodash/range'; import classnames from 'classnames'; +import { IconChevronRight, IconDots } from '@tabler/icons'; import { useSelector, useDispatch } from 'react-redux'; import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs'; -import { isItemARequest, isItemAFolder, itemIsOpenedInTabs } from 'utils/tabs'; +import { collectionFolderClicked } from 'providers/ReduxStore/slices/collections'; import Dropdown from 'components/Dropdown'; +import NewRequest from 'components/Sidebar/NewRequest'; import RequestMethod from './RequestMethod'; import RenameCollectionItem from './RenameCollectionItem'; import DeleteCollectionItem from './DeleteCollectionItem'; +import { isItemARequest, isItemAFolder, itemIsOpenedInTabs } from 'utils/tabs'; import StyledWrapper from './StyledWrapper'; @@ -20,6 +22,7 @@ const CollectionItem = ({item, collection}) => { const [renameItemModalOpen, setRenameItemModalOpen] = useState(false); const [deleteItemModalOpen, setDeleteItemModalOpen] = useState(false); + const [newRequestModalOpen, setNewRequestModalOpen] = useState(false); const dropdownTippyRef = useRef(); const MenuIcon = forwardRef((props, ref) => { @@ -44,6 +47,10 @@ const CollectionItem = ({item, collection}) => { return; } + if(event && event.target && event.target.className === 'dropdown-item') { + return; + } + if(isItemARequest(item)) { if(itemIsOpenedInTabs(item, tabs)) { dispatch(focusTab({ @@ -56,19 +63,22 @@ const CollectionItem = ({item, collection}) => { })); } } else { - // todo for folder: must expand folder : item.collapsed = !item.collapsed; + dispatch(collectionFolderClicked({ + itemUid: item.uid, + collectionUid: collection.uid + })); } }; let indents = range(item.depth); const onDropdownCreate = (ref) => dropdownTippyRef.current = ref; - const isRequest = isItemARequest(item); const isFolder = isItemAFolder(item); return ( {renameItemModalOpen && setRenameItemModalOpen(false)}/>} {deleteItemModalOpen && setDeleteItemModalOpen(false)}/>} + {newRequestModalOpen && setNewRequestModalOpen(false)}/>}
{ <>
{ dropdownTippyRef.current.hide(); + setNewRequestModalOpen(true); }}> New Request
diff --git a/renderer/components/Sidebar/Collections/Collection/index.js b/renderer/components/Sidebar/Collections/Collection/index.js index 16188be59..9313c577d 100644 --- a/renderer/components/Sidebar/Collections/Collection/index.js +++ b/renderer/components/Sidebar/Collections/Collection/index.js @@ -44,17 +44,10 @@ const Collection = ({collection}) => { }; const hideNewFolderModal = () => setShowNewFolderModal(false); - const hideNewRequestModal = () => setShowNewRequestModal(false); return ( - {showNewRequestModal && ( - - )} + {showNewRequestModal && setShowNewRequestModal(false)}/>} {showNewFolderModal && ( { +const NewRequest = ({collection, item, onClose}) => { const dispatch = useDispatch(); const inputRef = useRef(); const formik = useFormik({ @@ -21,14 +21,14 @@ const NewRequest = ({collectionUid, handleCancel, handleClose}) => { .required('name is required') }), onSubmit: (values) => { - dispatch(newHttpRequest(values.requestName, collectionUid)) + dispatch(newHttpRequest(values.requestName, collection.uid, item ? item.uid : null)) .then((action) => { dispatch(addTab({ uid: action.payload.item.uid, - collectionUid: collectionUid + collectionUid: collection.uid })); }); - handleClose(); + onClose(); } }); @@ -46,7 +46,7 @@ const NewRequest = ({collectionUid, handleCancel, handleClose}) => { title='New Request' confirmText='Create' handleConfirm={onSubmit} - handleCancel={handleCancel} + handleCancel={onClose} >
diff --git a/renderer/providers/ReduxStore/slices/collections.js b/renderer/providers/ReduxStore/slices/collections.js index f0159116f..4bf4a9e61 100644 --- a/renderer/providers/ReduxStore/slices/collections.js +++ b/renderer/providers/ReduxStore/slices/collections.js @@ -80,7 +80,16 @@ export const collectionsSlice = createSlice({ const collection = findCollectionByUid(state.collections, action.payload.collectionUid); if(collection) { - collection.items.push(action.payload.item); + if(!action.payload.currentItemUid) { + collection.items.push(action.payload.item); + } else { + const item = findItemInCollection(collection, action.payload.currentItemUid); + + if(item) { + item.items = item.items || []; + item.items.push(action.payload.item); + } + } addDepth(collection.items); } }, @@ -109,6 +118,17 @@ export const collectionsSlice = createSlice({ collection.collapsed = !collection.collapsed; } }, + collectionFolderClicked: (state, action) => { + const collection = findCollectionByUid(state.collections, action.payload.collectionUid); + + if(collection) { + const item = findItemInCollection(collection, action.payload.itemUid); + + if(item && item.type === 'folder') { + item.collapsed = !item.collapsed; + } + } + }, requestUrlChanged: (state, action) => { const collection = findCollectionByUid(state.collections, action.payload.collectionUid); @@ -137,6 +157,7 @@ export const { _deleteItem, _renameItem, collectionClicked, + collectionFolderClicked, requestUrlChanged, } = collectionsSlice.actions; @@ -220,7 +241,7 @@ export const newFolder = (folderName, collectionUid) => (dispatch, getState) => } }; -export const newHttpRequest = (requestName, collectionUid) => (dispatch, getState) => { +export const newHttpRequest = (requestName, collectionUid, itemUid) => (dispatch, getState) => { return new Promise((resolve, reject) => { const state = getState(); const collection = findCollectionByUid(state.collections.collections, collectionUid); @@ -239,13 +260,22 @@ export const newHttpRequest = (requestName, collectionUid) => (dispatch, getStat body: null } }; - collectionCopy.items.push(item); + 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(() => { Promise.resolve(dispatch(_newRequest({ item: item, + currentItemUid: itemUid, collectionUid: collectionUid }))) .then((val) => resolve(val)) diff --git a/renderer/styles/globals.css b/renderer/styles/globals.css index c9ff50f96..1e499e5ad 100644 --- a/renderer/styles/globals.css +++ b/renderer/styles/globals.css @@ -30,7 +30,6 @@ html, body { font-kerning: none; text-rendering: optimizeSpeed; letter-spacing: normal; - /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; */ font-family: Inter, sans-serif !important; }