Proyectos de Subversion LeadersLinked - Antes de SPA

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

import React from 'react'

import { useState, useRef } from 'react'

import Experience from './experience/Experience'

import Spinner from '../../../../shared/loading-spinner/Spinner'

import ExperienceModal from './experience/ExperienceModal'

const Experiences = (props) => {

  // props destructuring

  const {

    userExperiences,

    months,

    companySizesOptions,

    industriesOptions,

    userIdEncrypted

  } = props

  // states

  const [isModalOpen, setIsModalOpen] = useState(false)

  const [loading, setLoading] = useState(false)

  const [settedUserExperiences, setSettedUserExperiences] = useState(userExperiences)

  const [settedDescription, setSettedDescription] = useState('')

  // refs

  const postUrl = useRef('')

  const handleDelete = async (newUserExperiences) => setSettedUserExperiences(newUserExperiences)

  const addExperience = (event) => {

    event.preventDefault()

    postUrl.current = `/profile/my-profiles/experience/${userIdEncrypted}/operation/add`

    setSettedDescription('')

    setIsModalOpen(true)

  }

  const handleEdit = async (linkEdit) => {

    postUrl.current = linkEdit

    const currentDescription = settedUserExperiences.find(experience => experience.link_edit === linkEdit)

    setSettedDescription(currentDescription.description)

    setIsModalOpen(true)

  }

  return (

    <>

      <div className="user-profile-extended-ov st2 position-relative">

        <h3 style={{ display: 'flex' }}>

          Experiencia

          <div style={{ marginLeft: '5px' }}>

            <a

              href="#"

              className="btn-experience-add"

              onClick={addExperience}

            >

              <i className="fa fa-plus-square" />

            </a>

          </div>

        </h3>

        <span>

          {settedUserExperiences.length

            ? settedUserExperiences.map((userExperience, id) =>

              <Experience

                key={id}

                userExperience={userExperience}

                months={months}

                id={id}

                onDelete={handleDelete}

                setLoading={setLoading}

                handleEdit={handleEdit}

              />

            )

            : 'Sin información'

          }

        </span>

        {loading && <Spinner />}

      </div>

      <ExperienceModal

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

        companySizesOptions={companySizesOptions}

        industriesOptions={industriesOptions}

        months={months}

        postUrl={postUrl.current}

        setUserExperiences={(value) => setSettedUserExperiences(value)}

        settedDescription={settedDescription}

        show={isModalOpen}

      />

    </>

  )

}

export default Experiences