Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3694 Rev 3719
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 { IconButton } from '@mui/material';
 3 
import { IconButton } from '@mui/material';
4 
import Edit from '@mui/icons-material/Edit';
 4 
import Edit from '@mui/icons-material/Edit';
5 
 
 5 
 
6 
import { axios } from '@utils';
 6 
import { axios } from '@utils';
7 
import { addNotification } from '@store/notification/notification.actions';
 7 
import { addNotification } from '@store/notification/notification.actions';
8 
 
 8 
 
9 
import Widget from '@components/UI/Widget';
 9 
import Widget from '@components/UI/Widget';
10 
import TagsList from '@components/UI/TagsList';
 10 
import TagsList from '@components/UI/TagsList';
11 
import LanguagesModal from './LanguagesModal';
 11 
import LanguagesModal from './LanguagesModal';
12 
 
 12 
 
13 
const LanguagesCard = ({ languages: defaultLanguages = [], uuid = '', edit = false }) => {
 13 
const LanguagesCard = ({ languages: defaultLanguages = [], uuid = '', edit = false }) => {
14 
  const [languages, setLanguages] = useState([]);
 14 
  const [languages, setLanguages] = useState([]);
15 
  const [showModal, setShowModal] = useState(false);
 15 
  const [showModal, setShowModal] = useState(false);
16 
  const labels = useSelector(({ intl }) => intl.labels);
 16 
  const labels = useSelector(({ intl }) => intl.labels);
17 
  const dispatch = useDispatch();
 17 
  const dispatch = useDispatch();
18 
 
 18 
 
19 
  const toggleModal = () => setShowModal(!showModal);
 19 
  const toggleModal = () => setShowModal(!showModal);
20 
 
 20 
 
21 
  const handleEditLanguages = (languages) => {
 21 
  const handleEditLanguages = (languages) => {
22 
    axios
 22 
    axios
23 
      .post(`/profile/my-profiles/language/${uuid}`, languages)
 23 
      .post(`/profile/my-profiles/language/${uuid}`, languages)
24 
      .then((response) => {
 24 
      .then((response) => {
25 
        const { success, data } = response.data;
 25 
        const { success, data } = response.data;
26 
 
 26 
 
27 
        if (!success) {
 27 
        if (!success) {
28 
          const errorMessage = typeof data === 'string' ? data : data.languages[0];
 28 
          const errorMessage = typeof data === 'string' ? data : data.languages[0];
29 
          throw new Error(errorMessage);
 29 
          throw new Error(errorMessage);
30 
        }
 30 
        }
31 
 
 31 
 
32 
        setLanguages(data);
 32 
        setLanguages(data);
33 
        toggleModal();
 33 
        toggleModal();
34 
      })
 34 
      })
35 
      .catch((err) => {
 35 
      .catch((err) => {
36 
        dispatch(addNotification({ style: 'danger', msg: err.message }));
 36 
        dispatch(addNotification({ style: 'danger', msg: err.message }));
37 
      });
 37 
      });
38 
  };
 38 
  };
39 
 
 39 
 
40 
  useEffect(() => {
 40 
  useEffect(() => {
41 
    setLanguages(defaultLanguages);
 41 
    setLanguages(defaultLanguages);
42 
  }, [defaultLanguages]);
 42 
  }, [defaultLanguages]);
43 
 
 43 
 
44 
  return (
 44 
  return (
45 
    <>
 45 
    <>
46 
      <Widget>
 46 
      <Widget>
47 
        <Widget.Header
 47 
        <Widget.Header
48 
          title={labels.languages}
 48 
          title={labels.languages}
49 
          renderAction={() => {
 49 
          renderAction={() => {
50 
            if (!edit) return;
 50 
            if (!edit) return;
51 
            return (
 51 
            return (
52 
              <IconButton onClick={toggleModal}>
 52 
              <IconButton onClick={toggleModal}>
53 
                <Edit />
 53 
                <Edit />
54 
              </IconButton>
 54 
              </IconButton>
55 
            );
 55 
            );
56 
          }}
 56 
          }}
57 
        />
 57 
        />
58 
        <Widget.Body>
 58 
        <Widget.Body>
59 
          <TagsList tags={languages} />
 59 
          <TagsList tags={languages} />
60 
        </Widget.Body>
 60 
        </Widget.Body>
61 
      </Widget>
 61 
      </Widget>
62 
 
 62 
 
63 
      <LanguagesModal
 63 
      <LanguagesModal
64 
        show={showModal}
 64 
        show={showModal}
65 
        onClose={toggleModal}
 65 
        onClose={toggleModal}
66 
        onConfirm={handleEditLanguages}
 66 
        onConfirm={handleEditLanguages}
67 
        languages={languages}
 67 
        languages={languages}
68 
      />
 68 
      />
69 
    </>
 69 
    </>
70 
  );
 70 
  );
71 
};
 71 
};
72 
 
 72 
 
73 
export default LanguagesCard;
 73 
export default LanguagesCard;