diff --git a/renderer/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js b/renderer/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js new file mode 100644 index 00000000..2d2549a3 --- /dev/null +++ b/renderer/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js @@ -0,0 +1,65 @@ +import React, { useRef, useEffect } from 'react'; +import { useFormik } from 'formik'; +import * as Yup from 'yup'; +import Modal from 'components/Modal'; +import { useDispatch } from 'react-redux'; +import { isItemAFolder } from 'utils/tabs'; +import { renameItem } from 'providers/ReduxStore/slices/collections'; + +const RenameCollectionItem = ({collection, item, onClose}) => { + const dispatch = useDispatch(); + const isFolder = isItemAFolder(item); + const inputRef = useRef(); + const formik = useFormik({ + enableReinitialize: true, + initialValues: { + name: item.name + }, + validationSchema: Yup.object({ + name: Yup.string() + .min(1, 'must be atleast 1 characters') + .max(50, 'must be 50 characters or less') + .required('name is required') + }), + onSubmit: (values) => { + dispatch(renameItem(values.name, item.uid, collection.uid)); + onClose(); + } + }); + + useEffect(() => { + if(inputRef && inputRef.current) { + inputRef.current.focus(); + } + }, [inputRef]); + + const onSubmit = () => formik.handleSubmit(); + + return ( + +
+
+ + + {formik.touched.name && formik.errors.name ? ( +
{formik.errors.name}
+ ) : null} +
+
+
+ ); +}; + +export default RenameCollectionItem; diff --git a/renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js b/renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js index ea8c73c8..1eb2b837 100644 --- a/renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js +++ b/renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js @@ -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 RenameCollectionItem from './RenameCollectionItem'; import DeleteCollectionItem from './DeleteCollectionItem'; import StyledWrapper from './StyledWrapper'; @@ -17,6 +18,7 @@ const CollectionItem = ({item, collection}) => { const activeTabUid = useSelector((state) => state.tabs.activeTabUid); const dispatch = useDispatch(); + const [renameItemModalOpen, setRenameItemModalOpen] = useState(false); const [deleteItemModalOpen, setDeleteItemModalOpen] = useState(false); const dropdownTippyRef = useRef(); @@ -65,6 +67,7 @@ const CollectionItem = ({item, collection}) => { return ( + {renameItemModalOpen && setRenameItemModalOpen(false)}/>} {deleteItemModalOpen && setDeleteItemModalOpen(false)}/>}
{ )}
{ dropdownTippyRef.current.hide(); + setRenameItemModalOpen(true); }}> Rename
diff --git a/renderer/providers/ReduxStore/slices/collections.js b/renderer/providers/ReduxStore/slices/collections.js index 444db95b..f0159116 100644 --- a/renderer/providers/ReduxStore/slices/collections.js +++ b/renderer/providers/ReduxStore/slices/collections.js @@ -58,7 +58,6 @@ export const collectionsSlice = createSlice({ const item = findItemInCollection(collection, action.payload.itemUid); if(item && item.draft) { - item.name = item.draft.name; item.request = item.draft.request; item.draft = null; } @@ -92,6 +91,17 @@ export const collectionsSlice = createSlice({ deleteItemInCollection(action.payload.itemUid, collection); } }, + _renameItem: (state, action) => { + const collection = findCollectionByUid(state.collections, action.payload.collectionUid); + + if(collection) { + const item = findItemInCollection(collection, action.payload.itemUid); + + if(item) { + item.name = action.payload.newName; + } + } + }, collectionClicked: (state, action) => { const collection = findCollectionByUid(state.collections, action.payload); @@ -125,6 +135,7 @@ export const { _newFolder, _newRequest, _deleteItem, + _renameItem, collectionClicked, requestUrlChanged, } = collectionsSlice.actions; @@ -268,4 +279,30 @@ export const deleteItem = (itemUid, collectionUid) => (dispatch, getState) => { } }; +export const renameItem = (newName, itemUid, collectionUid) => (dispatch, getState) => { + const state = getState(); + const collection = findCollectionByUid(state.collections.collections, collectionUid); + + if(collection) { + const collectionCopy = cloneDeep(collection); + const item = findItemInCollection(collectionCopy, itemUid); + if(item) { + item.name = newName; + } + const collectionToSave = transformCollectionToSaveToIdb(collectionCopy, { + ignoreDraft: true + }); + + saveCollectionToIdb(window.__idb, collectionToSave) + .then(() => { + dispatch(_renameItem({ + newName: newName, + itemUid: itemUid, + collectionUid: collectionUid + })); + }) + .catch((err) => console.log(err)); + } +}; + export default collectionsSlice.reducer; diff --git a/renderer/utils/collections/index.js b/renderer/utils/collections/index.js index 5cd24a1c..0278ca5b 100644 --- a/renderer/utils/collections/index.js +++ b/renderer/utils/collections/index.js @@ -53,7 +53,7 @@ export const cloneItem = (item) => { return cloneDeep(item); }; -export const transformCollectionToSaveToIdb = (collection) => { +export const transformCollectionToSaveToIdb = (collection, options = {}) => { const copyItems = (sourceItems, destItems) => { each(sourceItems, (si) => { const di = { @@ -61,10 +61,10 @@ export const transformCollectionToSaveToIdb = (collection) => { type: si.type }; - // if items is draft, then take data from draft to save - if(si.draft) { - di.name = si.draft.name; + di.name = si.name; + // if items is draft, then take data from draft to save + if(!options.ignoreDraft && si.draft) { if(si.draft.request) { di.request = { url: si.draft.request.url, @@ -74,8 +74,6 @@ export const transformCollectionToSaveToIdb = (collection) => { }; } } else { - di.name = si.name; - if(si.request) { di.request = { url: si.request.url,