feat: clone request, resolves #3

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

@@ -0,0 +1,66 @@
+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 { cloneItem } from 'providers/ReduxStore/slices/collections';
+
+const CloneCollectionItem = ({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(cloneItem(values.name, item.uid, collection.uid));
+      onClose();
+    }
+  });
+
+  useEffect(() => {
+    if(inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+
+  const onSubmit = () => formik.handleSubmit();
+
+  return (
+    <Modal
+      size="sm"
+      title={`Clone ${isFolder ? 'Folder' : 'Request'}`}
+      confirmText='Clone'
+      handleConfirm={onSubmit}
+      handleCancel={onClose}
+    >
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <div>
+          <label htmlFor="name" className="block font-semibold">{isFolder ? 'Folder' : 'Request'} Name</label>
+          <input
+            id="collection-item-name" type="text" name="name"
+            ref={inputRef}
+            className="block textbox mt-2 w-full"
+            autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false"
+            onChange={formik.handleChange}
+            value={formik.values.name || ''}
+          />
+          {formik.touched.name && formik.errors.name ? (
+            <div className="text-red-500">{formik.errors.name}</div>
+          ) : null}
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+export default CloneCollectionItem;

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

@@ -10,6 +10,7 @@ import NewRequest from 'components/Sidebar/NewRequest';
 import NewFolder from 'components/Sidebar/NewFolder';
 import RequestMethod from './RequestMethod';
 import RenameCollectionItem from './RenameCollectionItem';
+import CloneCollectionItem from './CloneCollectionItem';
 import DeleteCollectionItem from './DeleteCollectionItem';
 import { isItemARequest, isItemAFolder, itemIsOpenedInTabs } from 'utils/tabs';
 
@@ -22,6 +23,7 @@ const CollectionItem = ({item, collection}) => {
   const dispatch = useDispatch();
 
   const [renameItemModalOpen, setRenameItemModalOpen] = useState(false);
+  const [cloneItemModalOpen, setCloneItemModalOpen] = useState(false);
   const [deleteItemModalOpen, setDeleteItemModalOpen] = useState(false);
   const [newRequestModalOpen, setNewRequestModalOpen] = useState(false);
   const [newFolderModalOpen, setNewFolderModalOpen] = useState(false);
@@ -74,6 +76,7 @@ const CollectionItem = ({item, collection}) => {
   return (
     <StyledWrapper className={className}>
       {renameItemModalOpen && <RenameCollectionItem item={item} collection={collection} onClose={() => setRenameItemModalOpen(false)}/>}
+      {cloneItemModalOpen && <CloneCollectionItem item={item} collection={collection} onClose={() => setCloneItemModalOpen(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)}/>}
@@ -137,6 +140,14 @@ const CollectionItem = ({item, collection}) => {
               }}>
                 Rename
               </div>
+              {!isFolder && (
+                <div className="dropdown-item" onClick={(e) => {
+                  dropdownTippyRef.current.hide();
+                  setCloneItemModalOpen(true);
+                }}>
+                  Clone
+                </div>
+              )}
               <div className="dropdown-item delete-item" onClick={(e) => {
                 dropdownTippyRef.current.hide();
                 setDeleteItemModalOpen(true);

renderer/components/Sidebar/Collections/index.js

@@ -4,6 +4,7 @@ import Collection from './Collection';
 
 const Collections = () => {
   const collections = useSelector((state) => state.collections.collections);
+  console.log(collections);
 
   return (
     <div className="mt-4 flex flex-col">