Proyectos de Subversion LeadersLinked - SPA

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 () => {
    try {
      const newCover = await axios.post(url, cover);
      onChange(newCover);
      onClose();
    } catch (error) {
      dispatch(
        addNotification({
          style: "danger",
          msg: "Error al actualizar el portada",
        })
      );
    }
  });

  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;