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