Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 5 Rev 655
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from "react";
 1 
import React, { useEffect, useState } from 'react'
2 
import { Button, Form, Modal } from "react-bootstrap";
 2 
import { Button, Form, Modal } from 'react-bootstrap'
3 
import { useDispatch, useSelector } from "react-redux";
 3 
import { useDispatch, useSelector } from 'react-redux'
4 
import { CKEditor } from "ckeditor4-react";
 4 
import { CKEditor } from 'ckeditor4-react'
5 
import { CKEDITOR_OPTIONS, axios } from "../../utils";
 5 
import { CKEDITOR_OPTIONS, axios } from '../../utils'
6 
import { useForm } from "react-hook-form";
 6 
import { useForm } from 'react-hook-form'
7 
import { addNotification } from "../../redux/notification/notification.actions";
 7 
import { addNotification } from '../../redux/notification/notification.actions'
8 
 
 8 
 
9 
import Spinner from "../UI/Spinner";
 9 
import Spinner from '../UI/Spinner'
10 
import TagsInput from "../UI/TagsInput";
 10 
import TagsInput from '../UI/TagsInput'
11 
import FormErrorFeedback from "../UI/FormErrorFeedback";
 11 
import FormErrorFeedback from '../UI/FormErrorFeedback'
12 
import { styled } from "styled-components";
 12 
import { styled } from 'styled-components'
Línea 13... Línea 13...
13 
 
 13 
 
14 
const TagsContainer = styled.div`
 14 
const TagsContainer = styled.div`
15 
  padding: 0.5rem;
 15 
  padding: 0.5rem;
16 
  border: 1px solid var(--border-primary);
 16 
  border: 1px solid var(--border-primary);
17 
  border-radius: var(--border-radius);
 17 
  border-radius: var(--border-radius);
18 
  margin-top: 1rem;
 18 
  margin-top: 1rem;
Línea 19... Línea 19...
19 
`;
 19 
`
20 
 
 20 
 
21 
const QuestionModal = ({ show, url, isEdit, onClose, onComplete }) => {
 21 
const QuestionModal = ({ show, url, isEdit, onClose, onComplete }) => {
22 
  const [loading, setLoading] = useState(false);
 22 
  const [loading, setLoading] = useState(false)
23 
  const [questionsCategories, setQuestionsCategories] = useState([]);
 23 
  const [questionsCategories, setQuestionsCategories] = useState([])
24 
  const [currentCategories, setCurrentCategories] = useState([]);
 24 
  const [currentCategories, setCurrentCategories] = useState([])
Línea 25... Línea 25...
25 
  const labels = useSelector(({ intl }) => intl.labels);
 25 
  const labels = useSelector(({ intl }) => intl.labels)
Línea 26... Línea 26...
26 
  const dispatch = useDispatch();
 26 
  const dispatch = useDispatch()
27 
 
 27 
 
28 
  const { register, handleSubmit, getValues, setValue, errors } = useForm();
 28 
  const { register, handleSubmit, getValues, setValue, errors } = useForm()
Línea 29... Línea 29...
29 
 
 29 
 
Línea 30... Línea 30...
30 
  const onSubmit = handleSubmit((data) => {
 30 
  const onSubmit = handleSubmit((data) => {
31 
    setLoading(true);
 31 
    setLoading(true)
32 
    const formData = new FormData();
 32 
    const formData = new FormData()
33 
 
 33 
 
Línea 34... Línea 34...
34 
    Object.entries(data).map(([key, value]) => formData.append(key, value));
 34 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
35 
 
 35 
 
36 
    axios
 36 
    axios
37 
      .post(url, formData)
 37 
      .post(url, formData)
38 
      .then((response) => {
 38 
      .then((response) => {
Línea 39... Línea 39...
39 
        const { data, success } = response.data;
 39 
        const { data, success } = response.data
40 
 
 40 
 
41 
        if (!success) {
 41 
        if (!success) {
Línea 42... Línea 42...
42 
          const errorMessage =
 42 
          const errorMessage =
43 
            typeof data === "string"
 43 
            typeof data === 'string'
44 
              ? data
 44 
              ? data
45 
              : "Error interno. Por favor, inténtelo de nuevo más tarde.";
 45 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
46 
 
 46 
 
Línea 47... Línea 47...
47 
          dispatch(addNotification({ style: "danger", msg: errorMessage }));
 47 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
48 
          return;
 48 
          return
49 
        }
 49 
        }
50 
 
 - 
 
51 
        onComplete();
 - 
 
52 
        onClose();
 - 
 
53 
      })
 - 
 
54 
      .finally(() => setLoading(false));
 50 
 
55 
  });
 51 
        onComplete()
Línea 56... Línea 52...
56 
 
 52 
        onClose()
57 
  const getCategories = () => {
 53 
      })
58 
    axios
 54 
      .finally(() => setLoading(false))
59 
      .get("/my-coach", {
 55 
  })
60 
        headers: {
 56 
 
Línea 61... Línea 57...
61 
          "Content-Type": "application/json",
 57 
  const getCategories = () => {
62 
        },
 58 
    axios
63 
      })
 59 
      .get('/my-coach')
Línea 64... Línea 60...
64 
      .then((response) => {
 60 
      .then((response) => {
65 
        const { data, success } = response.data;
 61 
        const { data, success } = response.data
66 
 
 62 
 
67 
        if (!success) {
 63 
        if (!success) {
Línea 68... Línea 64...
68 
          const errorMessage =
 64 
          const errorMessage =
69 
            typeof data === "string"
 65 
            typeof data === 'string'
70 
              ? data
 66 
              ? data
71 
              : "Error interno. Por favor, inténtelo de nuevo más tarde.";
 - 
 
72 
 
 - 
 
73 
          dispatch(addNotification({ style: "danger", msg: errorMessage }));
 - 
 
74 
          return;
 67 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
75 
        }
 - 
 
76 
 
 - 
 
77 
        const categories = Object.entries(data.categories).map((values) => ({
 - 
 
78 
          name: values[1],
 68 
 
79 
          value: values[0],
 69 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
Línea 80... Línea 70...
80 
        }));
 70 
          return
81 
 
 71 
        }
82 
        setQuestionsCategories(categories);
 72 
 
83 
      })
 73 
        const categories = Object.entries(data.categories).map((values) => ({
Línea 84... Línea 74...
84 
      .catch((error) => {
 74 
          name: values[1],
85 
        dispatch(
 75 
          value: values[0]
Línea 86... Línea 76...
86 
          addNotification({
 76 
        }))
87 
            style: "danger",
 77 
 
88 
            msg: "Error interno. Por favor, inténtelo de nuevo más tarde.",
 78 
        setQuestionsCategories(categories)
Línea 89... Línea 79...
89 
          })
 79 
      })
90 
        );
 80 
      .catch((err) => {
Línea 91... Línea 81...
91 
        throw new Error(error);
 81 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
92 
      });
 82 
      })
Línea 93... Línea 83...
93 
  };
 83 
  }
94 
 
 84 
 
95 
  const onTagsChange = (tags) => {
 85 
  const onTagsChange = (tags) => {
96 
    const categories = tags.map((tag) => tag.value);
 86 
    const categories = tags.map((tag) => tag.value)
97 
    setValue("category_id", categories);
 87 
    setValue('category_id', categories)
Línea 98... Línea 88...
98 
  };
 88 
  }
99 
 
 89 
 
100 
  useEffect(() => {
 90 
  useEffect(() => {
101 
    getCategories();
 91 
    getCategories()
102 
 
 92 
 
103 
    register("description", { required: true });
 93 
    register('description', { required: true })
104 
    register("category_id", { required: true });
 94 
    register('category_id', { required: true })
105 
  }, []);
 95 
  }, [])
Línea 106... Línea 96...
106 
 
 96 
 
107 
  useEffect(() => {
 97 
  useEffect(() => {
108 
    if (!url || !show || !isEdit || !questionsCategories.length) return;
 98 
    if (!url || !show || !isEdit || !questionsCategories.length) return
Línea 109... Línea 99...
109 
 
 99 
 
Línea 110... Línea 100...
110 
    axios.get(url).then((response) => {
 100 
    axios.get(url).then((response) => {
111 
      const { data, success } = response.data;
 101 
      const { data, success } = response.data
112 
 
 102 
 
113 
      if (!success) {
 103 
      if (!success) {
Línea 114... Línea 104...
114 
        const errorMessage =
 104 
        const errorMessage =
115 
          typeof data === "string"
 105 
          typeof data === 'string'
116 
            ? data
 106 
            ? data
117 
            : "Error interno. Por favor, inténtelo de nuevo más tarde.";
 107 
            : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
118 
 
 108 
 
119 
        dispatch(
 109 
        dispatch(
120 
          addNotification({
 110 
          addNotification({
121 
            style: "danger",
 111 
            style: 'danger',
Línea 122... Línea 112...
122 
            msg: errorMessage,
 112 
            msg: errorMessage
123 
          })
 113 
          })
124 
        );
 114 
        )
125 
        return;
 115 
        return
126 
      }
 116 
      }
127 
 
 117 
 
128 
      const categories = data.category_id.map((uuid) =>
 118 
      const categories = data.category_id.map((uuid) =>
129 
        questionsCategories.find((c) => c.value === uuid)
 119 
        questionsCategories.find((c) => c.value === uuid)
Línea 158... Línea 148...
158 
        ) : (
 148 
        ) : (
159 
          <Form onSubmit={onSubmit}>
 149 
          <Form onSubmit={onSubmit}>
160 
            <Form.Group>
 150 
            <Form.Group>
161 
              <Form.Label>{labels.title}</Form.Label>
 151 
              <Form.Label>{labels.title}</Form.Label>
162 
              <Form.Control
 152 
              <Form.Control
163 
                type="text"
 153 
                type='text'
164 
                name="title"
 154 
                name='title'
165 
                ref={register({ required: true })}
 155 
                ref={register({ required: true })}
166 
              />
 156 
              />
167 
              {errors.title && (
 157 
              {errors.title && (
168 
                <FormErrorFeedback>
 158 
                <FormErrorFeedback>
169 
                  {labels.error_field_empty}
 159 
                  {labels.error_field_empty}
170 
                </FormErrorFeedback>
 160 
                </FormErrorFeedback>
171 
              )}
 161 
              )}
172 
            </Form.Group>
 162 
            </Form.Group>
Línea 173... Línea 163...
173 
 
 163 
 
174 
            <CKEditor
 164 
            <CKEditor
175 
              onChange={(e) => setValue("description", e.editor.getData())}
 165 
              onChange={(e) => setValue('description', e.editor.getData())}
176 
              onInstanceReady={(e) =>
 166 
              onInstanceReady={(e) =>
177 
                e.editor.setData(getValues("description"))
 167 
                e.editor.setData(getValues('description'))
178 
              }
 168 
              }
179 
              config={CKEDITOR_OPTIONS}
 169 
              config={CKEDITOR_OPTIONS}
180 
            />
 170 
            />
181 
            {errors.description && (
 171 
            {errors.description && (
Línea 188... Línea 178...
188 
                settedTags={currentCategories}
 178 
                settedTags={currentCategories}
189 
                onChange={onTagsChange}
 179 
                onChange={onTagsChange}
190 
              />
 180 
              />
191 
            </TagsContainer>
 181 
            </TagsContainer>
Línea 192... Línea 182...
192 
 
 182 
 
193 
            <Button className="mt-3 mr-2" variant="primary" type="submit">
 183 
            <Button className='mt-3 mr-2' variant='primary' type='submit'>
194 
              {labels.accept}
 184 
              {labels.accept}
195 
            </Button>
 185 
            </Button>
196 
            <Button className="btn-secondary mt-3" onClick={onClose}>
 186 
            <Button className='btn-secondary mt-3' onClick={onClose}>
197 
              {labels.cancel}
 187 
              {labels.cancel}
198 
            </Button>
 188 
            </Button>
199 
          </Form>
 189 
          </Form>
200 
        )}
 190 
        )}
201 
      </Modal.Body>
 191 
      </Modal.Body>
202 
    </Modal>
 192 
    </Modal>
203 
  );
 193 
  )
Línea 204... Línea 194...
204 
};
 194 
}