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