Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';

import React, { useEffect, useState } from 'react';

import { useDispatch, useSelector } from 'react-redux';

import { useDispatch, useSelector } from 'react-redux';

import { IconButton } from '@mui/material';

import { IconButton } from '@mui/material';

import Edit from '@mui/icons-material/Edit';

import Edit from '@mui/icons-material/Edit';

import { updateSkills } from '@services/profile/profiles';

import { updateSkills } from '@services/profile/profiles';

import { addNotification } from '@store/notification/notification.actions';

import { addNotification } from '@store/notification/notification.actions';

import Widget from '@components/UI/Widget';

import Widget from '@components/UI/Widget';

import TagsList from '@components/UI/TagsList';

import TagsList from '@components/UI/TagsList';

import SkillsModal from './SkillsModal';

import SkillsModal from './SkillsModal';

const SkillsCard = ({ skills: defaultSkills = [], uuid = '', edit = false }) => {

const SkillsCard = ({ skills: defaultSkills = [], uuid = '', edit = false }) => {

  const [skills, setSkills] = useState([]);

  const [skills, setSkills] = useState([]);

  const [showModal, setShowModal] = useState(false);

  const [showModal, setShowModal] = useState(false);

  const labels = useSelector(({ intl }) => intl.labels);

  const labels = useSelector(({ intl }) => intl.labels);

  const dispatch = useDispatch();

  const dispatch = useDispatch();

  const toggleModal = () => setShowModal(!showModal);

  const toggleModal = () => setShowModal(!showModal);

  const handleEditSkills = ({ skills }) => {

  const handleEditSkills = ({ skills }) => {

    updateSkills(uuid, skills)

    updateSkills(uuid, skills)

      .then((skills) => {

      .then((skills) => {

        setSkills(skills);

        setSkills(skills);

        toggleModal();

        toggleModal();

      })

      })

      .catch((error) => {

      .catch((error) => {

        dispatch(addNotification({ style: 'danger', msg: error.message }));

        dispatch(addNotification({ style: 'danger', msg: error.message }));

      });

      });

  };

  };

  useEffect(() => {

  useEffect(() => {

    setSkills(defaultSkills);

    setSkills(defaultSkills);

  }, [defaultSkills]);

  }, [defaultSkills]);

  return (

  return (

    <>

    <>

      <Widget>

      <Widget>

        <Widget.Header

        <Widget.Header

          title={labels.skills}

          title={labels.skills}

          renderAction={() => {

          renderAction={() => {

            if (!edit) return;

            if (!edit) return;

            return (

            return (

              <IconButton onClick={toggleModal}>

              <IconButton onClick={toggleModal}>

                <Edit />

                <Edit />

              </IconButton>

              </IconButton>

            );

            );

          }}

          }}

        />

        />

        <Widget.Body>

        <Widget.Body>

          <TagsList tags={skills} />

          <TagsList tags={skills} />

        </Widget.Body>

        </Widget.Body>

      </Widget>

      </Widget>

      <SkillsModal

      <SkillsModal

        show={showModal}

        show={showModal}

        onClose={toggleModal}

        onClose={toggleModal}

        onConfirm={handleEditSkills}

        onConfirm={handleEditSkills}

        skills={skills}

        skills={skills}

      />

      />

    </>

    </>

  );

  );

};

};

export default SkillsCard;

export default SkillsCard;