Rev 6785 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
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 LanguagesModal from './LanguagesModal'
import EmptySection from '../UI/EmptySection'
const Languages = ({ languages, userId, isEdit }) => {
const [settedLanguages, setSettedLanguages] = useState([])
const [isModalOpen, setIsModalOpen] = useState(false)
const labels = useSelector(({ intl }) => intl.labels)
const handleEdit = () => {
setIsModalOpen(true)
}
useEffect(() => {
languages && setSettedLanguages(languages)
}, [languages])
return (
<>
<div className="profile-attr">
<div className="profile-attr-header">
<h2>{labels.languages}</h2>
{isEdit && (
<IconButton onClick={handleEdit}>
<EditIcon />
</IconButton>
)}
</div>
{settedLanguages.length ? (
<ul id="list-languages">
{settedLanguages.map(({ name, value }) => (
<li key={value}>
<span>{name}</span>
</li>
))}
</ul>
) : (
<EmptySection align="left" message={labels.empty} />
)}
</div>
<LanguagesModal
show={isModalOpen}
closeModal={() => setIsModalOpen(false)}
userIdEncrypted={userId}
userLanguages={settedLanguages}
setLanguages={(newLanguages) => setSettedLanguages(newLanguages)}
/>
</>
)
}
export default Languages