Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

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

import { useSelector } from 'react-redux'

import IconButton from '@mui/material/IconButton'

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

import SkillsModal from './SkillsModal'

import EmptySection from '../../../shared/empty-section/EmptySection'

const Skills = ({ skills, skillsOptions, userId, isEdit }) => {

  const [isModalOpen, setIsModalOpen] = useState(false)

  const [settedSkills, setSettedSkills] = useState(skills)

  const labels = useSelector((state) => state.labels)

  const handleEdit = () => {

    setIsModalOpen(true)

  }

  useEffect(() => {

    setSettedSkills(skills)

  }, [skills])

  return (

    <>

      <div className="profile-attr">

        <div className="profile-attr-header">

          <h2>{labels.SKILLS}</h2>

          {isEdit && (

            <IconButton onClick={handleEdit}>

              <EditIcon />

            </IconButton>

          )}

        </div>

        <ul>

          {settedSkills.length ? (

            settedSkills.map(({ name }) => (

              <li key={name}>

                <span>{name}</span>

              </li>

            ))

          ) : (

            <EmptySection align="left" message={labels.EMPTY} />

          )}

        </ul>

      </div>

      <SkillsModal

        show={isModalOpen}

        closeModal={() => setIsModalOpen(false)}

        userIdEncrypted={userId}

        skillsOptions={skillsOptions}

        userSkillsArray={settedSkills}

        setSkills={(newSkills) => setSettedSkills(newSkills)}

      />

    </>

  )

}

export default Skills