Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState } from "react";
import LanguagesModal from "./LanguagesModal";

const Languages = ({
  userLanguages,
  languagesOptions,
  userIdEncrypted
}) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [userLanguagesArray, setUserLanguagesArray] = useState(userLanguages);

  return (
    <>
      <div className="user-profile-ov">
        <h3>
          Idiomas
          <a
            href="#"
            title=""
            className="btn-languages-edit"
            onClick={() => setIsModalOpen(true)}
          >
            <i className="fa fa-pencil"></i>
          </a>
        </h3>
        <ul>
          {
            userLanguagesArray.length
              ? userLanguagesArray.map(({ name }) =>
                <li key={name}>
                  <a href="#" title="">
                    {name}
                  </a>
                </li>
              )
              : <li>Sin información</li>
          }
        </ul>
      </div>
      <LanguagesModal
        show={isModalOpen}
        closeModal={() => setIsModalOpen(false)}
        userIdEncrypted={userIdEncrypted}
        languagesOptions={languagesOptions}
        userLanguages={userLanguagesArray}
        setLanguages={(newLanguages) => setUserLanguagesArray(newLanguages)}
      />
    </>
  );
};

export default Languages;