hamid zarghami
100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
import { FC } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Button from '../../../../components/Button'
|
|
import DefaulModal from '../../../../components/DefaulModal'
|
|
import Input from '../../../../components/Input'
|
|
import { useFormik } from 'formik'
|
|
import * as Yup from 'yup'
|
|
import { toast } from '../../../../components/Toast';
|
|
import { TickCircle } from 'iconsax-react'
|
|
import { useCreateGroupIcon } from '../../hooks/useIconData'
|
|
import { CreateGroupIconType } from '../../types/Types'
|
|
import { ErrorType } from '../../../../helpers/types'
|
|
|
|
interface CreateGroupIconProps {
|
|
open: boolean
|
|
close: () => void
|
|
onSuccess?: () => void
|
|
}
|
|
|
|
const CreateGroupIcon: FC<CreateGroupIconProps> = ({ open, close, onSuccess }) => {
|
|
const { t } = useTranslation('global')
|
|
const createGroupIcon = useCreateGroupIcon()
|
|
|
|
const formik = useFormik<CreateGroupIconType>({
|
|
initialValues: {
|
|
name: ''
|
|
},
|
|
validationSchema: Yup.object({
|
|
name: Yup.string()
|
|
.required(t('errors.required'))
|
|
}),
|
|
onSubmit: (values) => {
|
|
createGroupIcon.mutate(values, {
|
|
onSuccess: () => {
|
|
formik.resetForm()
|
|
close()
|
|
toast(t('success'), 'success')
|
|
onSuccess?.()
|
|
},
|
|
onError: (error: ErrorType) => {
|
|
toast(error.response?.data?.error?.message[0], 'error')
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
const handleClose = () => {
|
|
formik.resetForm()
|
|
close()
|
|
}
|
|
|
|
return (
|
|
<DefaulModal
|
|
open={open}
|
|
close={handleClose}
|
|
title_header={t('icon.add_new_group')}
|
|
isHeader
|
|
>
|
|
<div className='mt-6'>
|
|
<Input
|
|
label={t('title')}
|
|
className='bg-white bg-opacity-30'
|
|
name='name'
|
|
value={formik.values.name}
|
|
onChange={formik.handleChange}
|
|
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
|
|
/>
|
|
|
|
<div className='mt-12 border-t border-border pt-5 flex justify-end'>
|
|
<div className='flex gap-5 items-center'>
|
|
<Button
|
|
className='w-[150px] bg-white bg-opacity-15 text-description'
|
|
label={t('cancel')}
|
|
onClick={handleClose}
|
|
/>
|
|
|
|
<Button
|
|
onClick={() => formik.handleSubmit()}
|
|
isLoading={createGroupIcon.isPending}
|
|
>
|
|
<div className='flex gap-2'>
|
|
<TickCircle
|
|
size={20}
|
|
color='white'
|
|
/>
|
|
<div>
|
|
{t('submit')}
|
|
</div>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DefaulModal>
|
|
)
|
|
}
|
|
|
|
export default CreateGroupIcon
|
|
|