Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1976 | Rev 1979 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
655 stevensc 1
import React, { useEffect, useState } from 'react'
2
import { useDispatch, useSelector } from 'react-redux'
1460 stevensc 3
import { useForm } from 'react-hook-form'
655 stevensc 4
import { CKEditor } from 'ckeditor4-react'
1460 stevensc 5
import { Form } from 'react-bootstrap'
1461 stevensc 6
import { Box } from '@mui/material'
1460 stevensc 7
 
8
import { CKEDITOR_OPTIONS, axios } from 'utils/index'
655 stevensc 9
import { addNotification } from '../../redux/notification/notification.actions'
5 stevensc 10
 
1460 stevensc 11
import Modal from 'components/UI/modal/Modal'
12
import TagsInput from 'components/UI/TagsInput'
13
import FormErrorFeedback from 'components/UI/form/FormErrorFeedback'
5 stevensc 14
 
15
const QuestionModal = ({ show, url, isEdit, onClose, onComplete }) => {
655 stevensc 16
  const [questionsCategories, setQuestionsCategories] = useState([])
17
  const [currentCategories, setCurrentCategories] = useState([])
18
  const labels = useSelector(({ intl }) => intl.labels)
19
  const dispatch = useDispatch()
5 stevensc 20
 
655 stevensc 21
  const { register, handleSubmit, getValues, setValue, errors } = useForm()
5 stevensc 22
 
1977 stevensc 23
  const onSubmit = handleSubmit(({ category_id, ...data }) => {
24
    axios
25
      .post(url, {
26
        ...data,
27
        'category_id[]': category_id
28
      })
29
      .then((response) => {
30
        const { data, success } = response.data
5 stevensc 31
 
1977 stevensc 32
        if (!success) {
33
          const errorMessage =
34
            typeof data === 'string'
35
              ? data
36
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
5 stevensc 37
 
1977 stevensc 38
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
39
          return
40
        }
5 stevensc 41
 
1977 stevensc 42
        onComplete()
43
        onClose()
44
      })
655 stevensc 45
  })
5 stevensc 46
 
47
  const getCategories = () => {
48
    axios
655 stevensc 49
      .get('/my-coach')
5 stevensc 50
      .then((response) => {
655 stevensc 51
        const { data, success } = response.data
5 stevensc 52
 
53
        if (!success) {
54
          const errorMessage =
655 stevensc 55
            typeof data === 'string'
5 stevensc 56
              ? data
655 stevensc 57
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
5 stevensc 58
 
655 stevensc 59
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
60
          return
5 stevensc 61
        }
62
 
63
        const categories = Object.entries(data.categories).map((values) => ({
64
          name: values[1],
655 stevensc 65
          value: values[0]
66
        }))
5 stevensc 67
 
655 stevensc 68
        setQuestionsCategories(categories)
5 stevensc 69
      })
655 stevensc 70
      .catch((err) => {
71
        dispatch(addNotification({ style: 'danger', msg: err.message }))
72
      })
73
  }
5 stevensc 74
 
75
  const onTagsChange = (tags) => {
655 stevensc 76
    const categories = tags.map((tag) => tag.value)
1977 stevensc 77
    setValue('category_id', categories)
655 stevensc 78
  }
5 stevensc 79
 
80
  useEffect(() => {
655 stevensc 81
    getCategories()
5 stevensc 82
 
1897 stevensc 83
    register('description', { required: 'Este campo es requerido.' })
1977 stevensc 84
    register('category_id', {
1897 stevensc 85
      required: 'Este campo es requerido.',
86
      validate: (val) =>
87
        val.length > 0 || 'Por favor, seleccione una categoria.'
88
    })
655 stevensc 89
  }, [])
5 stevensc 90
 
91
  useEffect(() => {
655 stevensc 92
    if (!url || !show || !isEdit || !questionsCategories.length) return
5 stevensc 93
 
94
    axios.get(url).then((response) => {
655 stevensc 95
      const { data, success } = response.data
5 stevensc 96
 
97
      if (!success) {
98
        const errorMessage =
655 stevensc 99
          typeof data === 'string'
5 stevensc 100
            ? data
655 stevensc 101
            : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
5 stevensc 102
 
103
        dispatch(
104
          addNotification({
655 stevensc 105
            style: 'danger',
106
            msg: errorMessage
5 stevensc 107
          })
655 stevensc 108
        )
109
        return
5 stevensc 110
      }
111
 
112
      const categories = data.category_id.map((uuid) =>
113
        questionsCategories.find((c) => c.value === uuid)
655 stevensc 114
      )
5 stevensc 115
 
655 stevensc 116
      setCurrentCategories(categories)
5 stevensc 117
 
655 stevensc 118
      setValue('title', data.title)
119
      setValue('description', data.description)
120
    })
121
  }, [url, show, isEdit, questionsCategories])
5 stevensc 122
 
123
  useEffect(() => {
124
    if (!show) {
655 stevensc 125
      setCurrentCategories([])
1977 stevensc 126
      setValue('category_id', [])
655 stevensc 127
      setValue('description', '')
128
      setValue('title', '')
5 stevensc 129
    }
655 stevensc 130
  }, [show])
5 stevensc 131
 
132
  return (
1460 stevensc 133
    <Modal
134
      title={`${isEdit ? labels.edit : labels.add} ${labels.question}`}
135
      show={show}
136
      onClose={onClose}
137
      onAccept={onSubmit}
138
    >
139
      <Form.Group>
140
        <Form.Label>{labels.title}</Form.Label>
141
        <Form.Control
142
          type='text'
143
          name='title'
144
          ref={register({ required: true })}
145
        />
5 stevensc 146
 
1460 stevensc 147
        {errors.title && (
148
          <FormErrorFeedback>{labels.error_field_empty}</FormErrorFeedback>
149
        )}
150
      </Form.Group>
5 stevensc 151
 
1898 stevensc 152
      <Box mt={2}>
153
        <label>Categorías</label>
154
        <TagsInput
155
          suggestions={questionsCategories}
156
          settedTags={currentCategories}
157
          onChange={onTagsChange}
158
        />
1977 stevensc 159
        {errors.category_id && (
160
          <FormErrorFeedback>{errors.category_id?.message}</FormErrorFeedback>
1898 stevensc 161
        )}
162
      </Box>
163
 
1460 stevensc 164
      <CKEditor
165
        onChange={(e) => setValue('description', e.editor.getData())}
166
        onInstanceReady={(e) => e.editor.setData(getValues('description'))}
167
        config={CKEDITOR_OPTIONS}
168
      />
169
      {errors.description && (
170
        <FormErrorFeedback>{labels.error_field_empty}</FormErrorFeedback>
171
      )}
5 stevensc 172
    </Modal>
655 stevensc 173
  )
174
}
5 stevensc 175
 
655 stevensc 176
export default QuestionModal