Proyectos de Subversion LeadersLinked - SPA

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

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

import Modal from '@components/UI/modal/Modal';
import DropzoneComponent from '@components/dropzone/DropzoneComponent';
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback';

const ImageModal = ({
  show = false,
  url = '',
  message = 'Imágenes recomendadas de 250x250',
  onComplete = () => {},
  onClose = () => {}
}) => {
  const dispatch = useDispatch();

  const {
    control,
    formState: { isSubmitting },
    handleSubmit,
    reset
  } = useForm({
    defaultValues: { image: '' }
  });

  const onSubmit = handleSubmit(async (image) => {
    try {
      const response = await axios.post(url, image);
      const { data, success } = response.data;
      if (!success) throw new Error('Error al actualizar la imagen');

      const newImage = data.profile ?? data;

      if (data.update_navbar) sessionStorage.setItem('user_session_image', data.user);

      dispatch(addNotification({ style: 'success', msg: 'Imagen actualizada' }));
      onComplete(newImage);
      reset();
      onClose();
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }));
    }
  });

  return (
    <Modal
      show={show}
      title='Imagen'
      onClose={onClose}
      onReject={onClose}
      onAccept={onSubmit}
      loading={isSubmitting}
    >
      <Controller
        name='image'
        control={control}
        rules={{ required: 'Imagen requerida' }}
        render={({ field: { onChange, value }, fieldState: { error } }) => (
          <>
            <DropzoneComponent
              type='IMAGE'
              onUploaded={(file) => onChange(file)}
              settedFile={value}
              recomendationText={message}
            />
            {error && <FormErrorFeedback>{error.message}</FormErrorFeedback>}
          </>
        )}
      />
    </Modal>
  );
};

export default ImageModal;