diff --git a/src/components/Modals/AddCategoryModal/AddCategoryModal.tsx b/src/components/Modals/AddCategoryModal/AddCategoryModal.tsx new file mode 100644 index 0000000..40208a2 --- /dev/null +++ b/src/components/Modals/AddCategoryModal/AddCategoryModal.tsx @@ -0,0 +1,80 @@ +import React from 'react'; +import BaseModal from '@educt/components/Modal'; +import { FormControl, FormHelperText, FormLabel, Input, Stack, Textarea } from '@chakra-ui/react'; +import { ICategory } from '@educt/interfaces'; +import { MdCategory } from 'react-icons/md'; +import { yupResolver } from '@hookform/resolvers/yup'; + +/** + * Schema + */ +import AddCategorySchema from './AddCategoryModal.validator'; + +/** + * Hooks + */ +import { useForm } from 'react-hook-form'; +import { useCreateCategory } from '@educt/hooks/queries'; + +type AddCategoryModalPropsType = { + isOpen: boolean; + onClose: () => void; + onAdded?: (category: ICategory) => void; +}; + +type AddCategoryInputType = { + title: string; + description: string; +}; + +const AddCategoryModal: React.FC = ({ isOpen, onClose, onAdded }) => { + const { + register, + handleSubmit, + reset, + formState: { errors }, + } = useForm({ + resolver: yupResolver(AddCategorySchema), + }); + const { createCategory, isLoading } = useCreateCategory(); + + const onSubmit = async (data: AddCategoryInputType) => { + try { + const category = await createCategory(data); + onClose(); + onAdded && onAdded(category); + reset({}); + } catch (error) { + console.error(error); + } + }; + + return ( + + + + Name + + {errors.title && {errors?.title.message}} + + + + Description +