Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import EmptySection from '../../../../shared/empty-section/EmptySection'
import HobbiesModal from './HobbiesModal'

const HobbiesAndInterests = ({ userHobbiesAndInterests, hobbiesAndInterestsOptions, userIdEncrypted }) => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [userHobbiesAndInterestsArray, setUserHobbiesAndInterestsArray] = useState(userHobbiesAndInterests)

  return (
    <>
      <div className="user-profile-ov">
        <h3>
          {LABELS.HOBBIES_AND_INTERESTS}
          <a
            href=""
            className="btn-hobbiesAndInterests-edit"
            onClick={() => setIsModalOpen(true)}
          >
            <i className="fa fa-pencil" />
          </a>
        </h3>
        <ul>
          {!userHobbiesAndInterestsArray.length
            ? <EmptySection align='left' message={LABELS.DATATABLE_EMPTY}/>
            : userHobbiesAndInterestsArray.map(({ name }) =>
              <li key={name}>
                <a href="#" title="">
                  {name}
                </a>
              </li>
            )}
        </ul>
      </div>
      <HobbiesModal
        show={isModalOpen}
        closeModal={() => setIsModalOpen(false)}
        userIdEncrypted={userIdEncrypted}
        hobbiesAndInterestsOptions={hobbiesAndInterestsOptions}
        userHobbiesAndInterests={userHobbiesAndInterestsArray}
        setUserHobbiesAndInterests={(newHobbiesAndInterests) => setUserHobbiesAndInterestsArray(newHobbiesAndInterests)}
      />
    </>
  )
}

export default HobbiesAndInterests