feat: AddFolder Modal

renderer/components/Sidebar/AddFolder/index.js

@@ -0,0 +1,67 @@
+import React, { useRef, useEffect } from 'react';
+import {useFormik} from 'formik';
+import * as Yup from 'yup';
+import Modal from 'components/Modal';
+import actions from 'providers/Store/actions'
+import { useStore } from 'providers/Store';
+
+const AddFolder = ({collectionUid, handleCancel, handleClose}) => {
+  const [store, storeDispatch] = useStore();
+  const inputRef = useRef();
+  const formik = useFormik({
+		enableReinitialize: true,
+    initialValues: {
+      folderName: ''
+    },
+    validationSchema: Yup.object({
+      folderName: Yup.string()
+        .min(1, 'must be atleast 1 characters')
+        .max(50, 'must be 50 characters or less')
+        .required('name is required')
+    }),
+    onSubmit: (values) => {
+      storeDispatch({
+        type: actions.SIDEBAR_COLLECTION_ADD_FOLDER,
+        collectionUid: collectionUid,
+        folderName: values.folderName
+      });
+      handleClose();
+    }
+  });
+
+  useEffect(() => {
+    if(inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+
+  const onSubmit = () => formik.handleSubmit();
+
+  return (
+    <Modal
+      size="sm"
+      title='Add Folder'
+      confirmText='Add Folder'
+      handleConfirm={onSubmit}
+      handleCancel={handleCancel}
+    >
+      <form className="grafnode-form" onSubmit={formik.handleSubmit}>
+        <div>
+          <label htmlFor="folderName" className="block font-semibold">Folder Name</label>
+          <input
+            id="collection-name" type="text" name="folderName"
+            ref={inputRef}
+            className="block textbox mt-2 w-full"
+            onChange={formik.handleChange}
+            value={formik.values.folderName || ''}
+          />
+          {formik.touched.folderName && formik.errors.folderName ? (
+            <div className="text-red-500">{formik.errors.folderName}</div>
+          ) : null}
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+export default AddFolder;

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

@@ -1,15 +1,17 @@
-import React, { forwardRef, useRef } from 'react';
+import React, { useState, forwardRef, useRef } from 'react';
 import get from 'lodash/get';
 import classnames from 'classnames';
 import { IconChevronRight, IconDots } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
 import actions from 'providers/Store/actions'
 import { useStore } from 'providers/Store';
+import AddFolder from 'components/Sidebar/AddFolder';
 import CollectionItem from './CollectionItem';
 
 import StyledWrapper from './StyledWrapper';
 
 const Collection = ({collection}) => {
+  const [showAddFolderModal, setShowAddFolderModal] = useState(false);
   const [store, storeDispatch] = useStore();
 
   const {
@@ -42,17 +44,18 @@ const Collection = ({collection}) => {
     });
   };
 
-  const addFolder = () => {
+  const hideAddFolderModal = () => setShowAddFolderModal(false);
-    storeDispatch({
-      type: actions.SIDEBAR_COLLECTION_ADD_FOLDER,
-      collectionUid: collection.uid
-    });
-  };
-
   const collectionItems = get(collection, 'current.items');
 
   return (
     <StyledWrapper className="flex flex-col">
+      {showAddFolderModal && (
+        <AddFolder
+          collectionUid={collection.uid}
+          handleCancel={hideAddFolderModal}
+          handleClose={hideAddFolderModal}
+        />
+      )}
       <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.current.name}</span>
@@ -68,7 +71,7 @@ const Collection = ({collection}) => {
             <div>
               <div className="dropdown-item" onClick={(e) => {
                 menuDropdownTippyRef.current.hide();
-                addFolder();
+                setShowAddFolderModal(true)
               }}>
                 Add Folder
               </div>

renderer/components/Sidebar/TitleBar/index.js

@@ -59,6 +59,7 @@ const TitleBar = ({dispatch, actions}) => {
     saveCollectionToIdb(store.idbConnection, newCollection)
       .then(() => console.log('Collection created'))
       .catch((err) => {
+        console.log(err);
         setShowToast({
           show: true,
           type: 'error',

renderer/providers/Store/reducer.js

@@ -76,7 +76,7 @@ const reducer = (state, action) => {
         if(collection) {
           collection.current.items.push({
             "uid": nanoid(),
-            "name": "New Folder",
+            "name": action.folderName,
             "depth": 1,
             "items": []
           });

renderer/providers/Store/useIdb.js

@@ -20,7 +20,8 @@ const useIdb = (dispatch) => {
         type: actions.IDB_CONNECTION_READY,
         connection: connection
       });
-    });
+    })
+    .catch((err) => console.log(err));
   }, []);
 };