Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import React from 'react';

import { useDispatch, useSelector } from 'react-redux';

import { useDispatch, useSelector } from 'react-redux';

import { Controller, useForm } from 'react-hook-form';

import { Controller, useForm } from 'react-hook-form';

import { axios } from '@utils';

import { axios } from '@utils';

import { addNotification } from '@store/notification/notification.actions';

import { addNotification } from '@store/notification/notification.actions';

import Modal from '../modal/Modal';

import Modal from '../modal/Modal';

import FormErrorFeedback from '../form/FormErrorFeedback';

import FormErrorFeedback from '../form/FormErrorFeedback';

import DropzoneComponent from '@components/dropzone/DropzoneComponent';

import DropzoneComponent from '@components/dropzone/DropzoneComponent';

const CoverModal = ({

const CoverModal = ({

  show = false,

  show = false,

  sizes = '',

  sizes = '',

  onClose = () => {},

  onClose = () => {},

  onChange = () => {},

  onChange = () => {},

  url = ''

  url = ''

}) => {

}) => {

  const labels = useSelector(({ intl }) => intl.labels);

  const labels = useSelector(({ intl }) => intl.labels);

  const dispatch = useDispatch();

  const dispatch = useDispatch();

  const {

  const {

    control,

    control,

    formState: { isSubmitting },

    formState: { isSubmitting },

    handleSubmit

    handleSubmit

  } = useForm();

  } = useForm();

  const onSubmit = handleSubmit(async (cover) => {

  const onSubmit = handleSubmit(async (cover) => {

    try {

    try {

      const response = await axios.post(url, cover);

      const response = await axios.post(url, cover);

      const { data, success } = response.data;

      const { data, success } = response.data;

      if (!success) throw new Error('Error al actualizar el portada');

      if (!success) throw new Error('Error al actualizar el portada');

      onChange(data);

      onChange(data);

      onClose();

      onClose();

    } catch (error) {

    } catch (error) {

      dispatch(addNotification({ style: 'danger', msg: error.message }));

      dispatch(addNotification({ style: 'danger', msg: error.message }));

    }

    }

  });

  });

  return (

  return (

    <Modal

    <Modal

      title={labels.cover}

      title={labels.cover}

      show={show}

      show={show}

      onClose={onClose}

      onClose={onClose}

      onAccept={onSubmit}

      onAccept={onSubmit}

      loading={isSubmitting}

      loading={isSubmitting}

    >

    >

      <Controller

      <Controller

        name='cover'

        name='cover'

        control={control}

        control={control}

        rules={{ required: 'Portada requerida' }}

        rules={{ required: 'Portada requerida' }}

        render={({ field: { onChange, value }, fieldState: { error } }) => (

        render={({ field: { onChange, value }, fieldState: { error } }) => (

          <>

          <>

            <DropzoneComponent

            <DropzoneComponent

              type='IMAGE'

              type='IMAGE'

              onUploaded={onChange}

              onUploaded={onChange}

              settedFile={value}

              settedFile={value}

              recomendationText={`Imágenes recomendadas de ${sizes}`}

              recomendationText={`Imágenes recomendadas de ${sizes}`}

            />

            />

            {error && <FormErrorFeedback>{error.message}</FormErrorFeedback>}

            {error && <FormErrorFeedback>{error.message}</FormErrorFeedback>}

          </>

          </>

        )}

        )}

      />

      />

    </Modal>

    </Modal>

  );

  );

};

};

export default CoverModal;

export default CoverModal;