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 { newFolder } from 'providers/ReduxStore/slices/collections'; const NewFolder = ({collection, item, onClose}) => { const dispatch = useDispatch(); 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) => { dispatch(newFolder(values.folderName, collection.uid, item ? item.uid : null)) onClose(); } }); useEffect(() => { if(inputRef && inputRef.current) { inputRef.current.focus(); } }, [inputRef]); const onSubmit = () => formik.handleSubmit(); return (
{formik.touched.folderName && formik.errors.folderName ? (
{formik.errors.folderName}
) : null}
); }; export default NewFolder;