Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3269 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3269 Rev 3697
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useState } from 'react';
2 
import { useDispatch, useSelector } from 'react-redux'
 2 
import { useDispatch, useSelector } from 'react-redux';
3 
import { useForm } from 'react-hook-form'
 3 
import { useForm } from 'react-hook-form';
4 
 
 4 
 
5 
import { axios } from '@utils'
 5 
import { axios } from '@utils';
6 
import { addNotification } from '@store/notification/notification.actions'
 6 
import { addNotification } from '@store/notification/notification.actions';
7 
 
 7 
 
8 
import Modal from '@components/UI/modal/Modal'
 8 
import Modal from '@components/UI/modal/Modal';
9 
import Input from '@components/UI/inputs/Input'
 9 
import Input from '@components/UI/inputs/Input';
10 
import Ckeditor from '@components/common/ckeditor/Ckeditor'
 10 
import Ckeditor from '@components/common/ckeditor/Ckeditor';
11 
import TagsInput from '@components/UI/TagsInput'
 11 
import TagsInput from '@components/UI/TagsInput';
12 
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback'
 12 
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback';
Línea 13... Línea 13...
13 
 
 13 
 
14 
const QuestionModal = ({ show, url, isEdit, onClose, onComplete }) => {
 14 
const QuestionModal = ({ show, url, isEdit, onClose, onComplete }) => {
15 
  const [questionsCategories, setQuestionsCategories] = useState([])
 15 
  const [questionsCategories, setQuestionsCategories] = useState([]);
16 
  const [currentCategories, setCurrentCategories] = useState([])
 16 
  const [currentCategories, setCurrentCategories] = useState([]);
17 
  const labels = useSelector(({ intl }) => intl.labels)
 17 
  const labels = useSelector(({ intl }) => intl.labels);
Línea 18... Línea 18...
18 
  const dispatch = useDispatch()
 18 
  const dispatch = useDispatch();
19 
 
 19 
 
20 
  const {
 20 
  const {
21 
    register,
 21 
    register,
22 
    control,
 22 
    control,
23 
    handleSubmit,
 23 
    handleSubmit,
24 
    setValue,
 24 
    setValue,
Línea 25... Línea 25...
25 
    formState: { errors }
 25 
    formState: { errors }
26 
  } = useForm()
 26 
  } = useForm();
Línea 27... Línea 27...
27 
 
 27 
 
28 
  const onSubmit = handleSubmit(({ category_id, ...data }) => {
 28 
  const onSubmit = handleSubmit(({ category_id, ...data }) => {
Línea 29... Línea 29...
29 
    const formData = new FormData()
 29 
    const formData = new FormData();
30 
 
 30 
 
Línea 31... Línea 31...
31 
    category_id.map((value) => formData.append('category_id[]', value))
 31 
    category_id.map((value) => formData.append('category_id[]', value));
32 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
 32 
    Object.entries(data).map(([key, value]) => formData.append(key, value));
33 
 
 33 
 
34 
    axios.post(url, formData).then((response) => {
 34 
    axios.post(url, formData).then((response) => {
35 
      const { data, success } = response.data
 35 
      const { data, success } = response.data;
Línea 36... Línea 36...
36 
 
 36 
 
37 
      if (!success) {
 37 
      if (!success) {
38 
        const errorMessage =
 38 
        const errorMessage =
Línea 39... Línea 39...
39 
          typeof data === 'string'
 39 
          typeof data === 'string'
40 
            ? data
 40 
            ? data
41 
            : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
 41 
            : 'Error interno. Por favor, inténtelo de nuevo más tarde.';
42 
 
 42 
 
Línea 43... Línea 43...
43 
        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
 43 
        dispatch(addNotification({ style: 'danger', msg: errorMessage }));
44 
        return
 44 
        return;
45 
      }
 45 
      }
46 
 
 46 
 
47 
      onComplete()
 47 
      onComplete();
Línea 48... Línea 48...
48 
      onClose()
 48 
      onClose();
49 
    })
 49 
    });
50 
  })
 50 
  });
51 
 
 51 
 
52 
  const getCategories = () => {
 52 
  const getCategories = () => {
Línea 53... Línea 53...
53 
    axios
 53 
    axios
54 
      .get('/my-coach')
 54 
      .get('/my-coach')
55 
      .then((response) => {
 55 
      .then((response) => {
Línea 56... Línea 56...
56 
        const { data, success } = response.data
 56 
        const { data, success } = response.data;
57 
 
 57 
 
58 
        if (!success) {
 58 
        if (!success) {
59 
          const errorMessage =
 59 
          const errorMessage =
Línea 60... Línea 60...
60 
            typeof data === 'string'
 60 
            typeof data === 'string'
61 
              ? data
 61 
              ? data
62 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
 62 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.';
63 
 
 63 
 
64 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
 64 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }));
65 
          return
 65 
          return;
Línea 66... Línea 66...
66 
        }
 66 
        }
67 
 
 67 
 
68 
        const categories = Object.entries(data.categories).map((values) => ({
 68 
        const categories = Object.entries(data.categories).map((values) => ({
69 
          name: values[1],
 69 
          label: values[1],
Línea 70... Línea 70...
70 
          value: values[0]
 70 
          value: values[0]
71 
        }))
 71 
        }));
Línea 72... Línea 72...
72 
 
 72 
 
73 
        setQuestionsCategories(categories)
 73 
        setQuestionsCategories(categories);
74 
      })
 74 
      })
75 
      .catch((err) => {
 - 
 
76 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 75 
      .catch((err) => {
77 
      })
 76 
        dispatch(addNotification({ style: 'danger', msg: err.message }));
78 
  }
 77 
      });
Línea 79... Línea 78...
79 
 
 78 
  };
80 
  const onTagsChange = (tags) => {
 79 
 
Línea 81... Línea 80...
81 
    const categories = tags.map((tag) => tag.value)
 80 
  const onTagsChange = (tags) => {
82 
    setValue('category_id', categories)
 81 
    const categories = tags.map((tag) => tag.value);
Línea 83... Línea 82...
83 
  }
 82 
    setValue('category_id', categories);
84 
 
 83 
  };
85 
  useEffect(() => {
 84 
 
86 
    getCategories()
 85 
  useEffect(() => {
87 
 
 86 
    getCategories();
Línea 88... Línea 87...
88 
    register('description', { required: 'Este campo es requerido.' })
 87 
 
89 
    register('category_id', {
 88 
    register('description', { required: 'Este campo es requerido.' });
90 
      required: 'Este campo es requerido.',
 89 
    register('category_id', {
91 
      validate: (val) =>
 90 
      required: 'Este campo es requerido.',
92 
        val.length > 0 || 'Por favor, seleccione una categoria.'
 91 
      validate: (val) => val.length > 0 || 'Por favor, seleccione una categoria.'
93 
    })
 92 
    });
94 
  }, [])
 93 
  }, []);
95 
 
 94 
 
Línea 96... Línea 95...
96 
  useEffect(() => {
 95 
  useEffect(() => {
97 
    if (!url || !show || !isEdit || !questionsCategories.length) return
 96 
    if (!url || !show || !isEdit || !questionsCategories.length) return;
98 
 
 97 
 
Línea 99... Línea 98...
99 
    axios.get(url).then((response) => {
 98 
    axios.get(url).then((response) => {
Línea 100... Línea 99...
100 
      const { data, success } = response.data
 99 
      const { data, success } = response.data;
101 
 
 100 
 
102 
      if (!success) {
 101 
      if (!success) {
103 
        const errorMessage =
 102 
        const errorMessage =
Línea 104... Línea 103...
104 
          typeof data === 'string'
 103 
          typeof data === 'string'
105 
            ? data
 104 
            ? data
106 
            : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
 105 
            : 'Error interno. Por favor, inténtelo de nuevo más tarde.';
107 
 
 106 
 
108 
        dispatch(
 107 
        dispatch(
109 
          addNotification({
 108 
          addNotification({
110 
            style: 'danger',
 109 
            style: 'danger',
111 
            msg: errorMessage
 110 
            msg: errorMessage
Línea 112... Línea 111...
112 
          })
 111 
          })
113 
        )
 112 
        );
114 
        return
 113 
        return;
115 
      }
 114 
      }
Línea 153... Línea 152...
153 
        name='category_id'
 152 
        name='category_id'
154 
        onChange={onTagsChange}
 153 
        onChange={onTagsChange}
155 
        suggestions={questionsCategories}
 154 
        suggestions={questionsCategories}
156 
        defaultValue={currentCategories}
 155 
        defaultValue={currentCategories}
157 
      />
 156 
      />
158 
      {errors.category_id && (
 - 
 
159 
        <FormErrorFeedback>{errors.category_id?.message}</FormErrorFeedback>
 157 
      {errors.category_id && <FormErrorFeedback>{errors.category_id?.message}</FormErrorFeedback>}
160 
      )}
 - 
 
Línea 161... Línea 158...
161 
 
 158 
 
162 
      <Ckeditor
 159 
      <Ckeditor
163 
        name='description'
 160 
        name='description'
164 
        control={control}
 161 
        control={control}
165 
        rules={{ required: labels.error_field_empty }}
 162 
        rules={{ required: labels.error_field_empty }}
166 
        error={errors.description?.message}
 163 
        error={errors.description?.message}
167 
      />
 164 
      />
168 
    </Modal>
 165 
    </Modal>
169 
  )
 166 
  );
Línea 170... Línea 167...
170 
}
 167 
};