Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3432 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3432 Rev 3719
Línea 1... Línea 1...
1 
import React, { useEffect } from "react";
 1 
import React, { useEffect } from 'react';
2 
import { useLocation } from "react-router-dom";
 2 
import { useLocation } from 'react-router-dom';
3 
import { useDispatch } from "react-redux";
 3 
import { useDispatch } from 'react-redux';
4 
import { useForm } from "react-hook-form";
 4 
import { useForm } from 'react-hook-form';
5 
 
 5 
 
6 
import { axios } from "../../utils";
 6 
import { axios } from '../../utils';
7 
import { addNotification } from "../../redux/notification/notification.actions";
 7 
import { addNotification } from '../../redux/notification/notification.actions';
8 
 
 8 
 
9 
import CKEditor from "@components/common/ckeditor/Ckeditor";
 9 
import CKEditor from '@components/common/ckeditor/Ckeditor';
10 
import FormErrorFeedback from "components/UI/form/FormErrorFeedback";
 10 
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback';
11 
import Modal from "components/UI/modal/Modal";
 11 
import Modal from '@components/UI/modal/Modal';
12 
 
 12 
 
13 
const OverviewModal = ({
 13 
const OverviewModal = ({
14 
  isOpen = false,
 14 
  isOpen = false,
15 
  overview = "",
 15 
  overview = '',
16 
  id = "",
 16 
  id = '',
17 
  closeModal = function () {},
 17 
  closeModal = function () {},
18 
  onComplete = function () {},
 18 
  onComplete = function () {}
19 
}) => {
 19 
}) => {
20 
  const { pathname } = useLocation();
 20 
  const { pathname } = useLocation();
21 
  const dispatch = useDispatch();
 21 
  const dispatch = useDispatch();
22 
 
 22 
 
23 
  const {
 23 
  const {
24 
    register,
 24 
    register,
25 
    handleSubmit,
 25 
    handleSubmit,
26 
    setValue,
 26 
    setValue,
27 
    formState: { errors },
 27 
    formState: { errors }
28 
  } = useForm();
 28 
  } = useForm();
29 
 
 29 
 
30 
  const onSubmit = handleSubmit(({ description }) => {
 30 
  const onSubmit = handleSubmit(({ description }) => {
31 
    const typesUrl = {
 31 
    const typesUrl = {
32 
      profile: `/profile/my-profiles/extended/${id}`,
 32 
      profile: `/profile/my-profiles/extended/${id}`,
33 
      group: `/group/my-groups/extended/${id}`,
 33 
      group: `/group/my-groups/extended/${id}`
34 
    };
 34 
    };
35 
    const type = pathname.split("/")[1];
 35 
    const type = pathname.split('/')[1];
36 
 
 36 
 
37 
    const formData = new FormData();
 37 
    const formData = new FormData();
38 
    formData.append("description", description);
 38 
    formData.append('description', description);
39 
 
 39 
 
40 
    axios
 40 
    axios
41 
      .post(typesUrl[type], formData)
 41 
      .post(typesUrl[type], formData)
42 
      .then((response) => {
 42 
      .then((response) => {
43 
        const { data, success } = response.data;
 43 
        const { data, success } = response.data;
44 
        if (!success) {
 44 
        if (!success) {
45 
          const errorMessage =
 45 
          const errorMessage =
46 
            typeof data === "string"
 46 
            typeof data === 'string'
47 
              ? data
 47 
              ? data
48 
              : Object.entries(data).map(
 - 
 
49 
                  ([key, value]) => `${key}: ${value}`
 48 
              : Object.entries(data).map(([key, value]) => `${key}: ${value}`)[0];
50 
                )[0];
 - 
 
51 
          throw new Error(errorMessage);
 49 
          throw new Error(errorMessage);
52 
        }
 50 
        }
53 
 
 51 
 
54 
        onComplete(data.description || data);
 52 
        onComplete(data.description || data);
55 
        closeModal();
 53 
        closeModal();
56 
      })
 54 
      })
57 
      .catch((err) => {
 55 
      .catch((err) => {
58 
        dispatch(addNotification({ style: "danger", msg: err.message }));
 56 
        dispatch(addNotification({ style: 'danger', msg: err.message }));
59 
      });
 57 
      });
60 
  });
 58 
  });
61 
 
 59 
 
62 
  useEffect(() => {
 60 
  useEffect(() => {
63 
    register("description", { required: "Este campo es requerido" });
 61 
    register('description', { required: 'Este campo es requerido' });
64 
  }, []);
 62 
  }, []);
65 
 
 63 
 
66 
  return (
 64 
  return (
67 
    <Modal
 - 
 
68 
      title="Visión general"
 65 
    <Modal title='Visión general' show={isOpen} onClose={closeModal} onAccept={onSubmit}>
69 
      show={isOpen}
 - 
 
70 
      onClose={closeModal}
 - 
 
71 
      onAccept={onSubmit}
 - 
 
72 
    >
 - 
 
73 
      <CKEditor
 - 
 
74 
        onChange={(value) => setValue("description", value)}
 66 
      <CKEditor onChange={(value) => setValue('description', value)} defaultValue={overview} />
75 
        defaultValue={overview}
 - 
 
76 
      />
 - 
 
77 
      {errors.description && (
 - 
 
78 
        <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>
 67 
      {errors.description && <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>}
79 
      )}
 - 
 
80 
    </Modal>
 68 
    </Modal>
81 
  );
 69 
  );
82 
};
 70 
};
83 
 
 71 
 
84 
export default OverviewModal;
 72 
export default OverviewModal;