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;