Rev 3432 | Rev 3450 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Controller, useForm } from 'react-hook-form';
import { axios } from '@utils';
import { addNotification } from '@store/notification/notification.actions';
import Modal from '../modal/Modal';
import FormErrorFeedback from '../form/FormErrorFeedback';
import DropzoneComponent from '@components/dropzone/DropzoneComponent';
const CoverModal = ({
show = false,
sizes = '',
onClose = () => {},
onChange = () => {},
url = ''
}) => {
const labels = useSelector(({ intl }) => intl.labels);
const dispatch = useDispatch();
const {
control,
formState: { isSubmitting },
handleSubmit
} = useForm();
const onSubmit = handleSubmit(async ({ cover }) => {
try {
const formData = new FormData();
formData.append('cover', cover);
const response = await axios.post(url, formData);
const { data, success } = response.data;
if (!success) throw new Error('Error al actualizar el portada');
onChange(data);
onClose();
} catch (error) {
console.log(error);
dispatch(addNotification({ style: 'danger', msg: error.message }));
}
});
return (
<Modal
title={labels.cover}
show={show}
onClose={onClose}
onAccept={onSubmit}
loading={isSubmitting}
>
<Controller
name='cover'
control={control}
rules={{ required: 'Portada requerida' }}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<>
<DropzoneComponent
type='IMAGE'
onUploaded={onChange}
settedFile={value}
recomendationText={`Imágenes recomendadas de ${sizes}`}
/>
{error && <FormErrorFeedback>{error.message}</FormErrorFeedback>}
</>
)}
/>
</Modal>
);
};
export default CoverModal;