Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { useDispatch } from "react-redux";
import { useForm } from "react-hook-form";

import { axios } from "../../utils";
import { addNotification } from "../../redux/notification/notification.actions";

import CKEditor from "@components/common/ckeditor/Ckeditor";
import FormErrorFeedback from "components/UI/form/FormErrorFeedback";
import Modal from "components/UI/modal/Modal";

const OverviewModal = ({
  isOpen = false,
  overview = "",
  id = "",
  closeModal = function () {},
  onComplete = function () {},
}) => {
  const { pathname } = useLocation();
  const dispatch = useDispatch();

  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm();

  const onSubmit = handleSubmit(({ description }) => {
    const typesUrl = {
      profile: `/profile/my-profiles/extended/${id}`,
      group: `/group/my-groups/extended/${id}`,
    };
    const type = pathname.split("/")[1];

    const formData = new FormData();
    formData.append("description", description);

    axios
      .post(typesUrl[type], formData)
      .then((response) => {
        const { data, success } = response.data;
        if (!success) {
          const errorMessage =
            typeof data === "string"
              ? data
              : Object.entries(data).map(
                  ([key, value]) => `${key}: ${value}`
                )[0];
          throw new Error(errorMessage);
        }

        onComplete(data.description || data);
        closeModal();
      })
      .catch((err) => {
        dispatch(addNotification({ style: "danger", msg: err.message }));
      });
  });

  useEffect(() => {
    register("description", { required: "Este campo es requerido" });
  }, []);

  return (
    <Modal
      title="Visión general"
      show={isOpen}
      onClose={closeModal}
      onAccept={onSubmit}
    >
      <CKEditor
        onChange={(value) => setValue("description", value)}
        defaultValue={overview}
      />
      {errors.description && (
        <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>
      )}
    </Modal>
  );
};

export default OverviewModal;