Proyectos de Subversion LeadersLinked - Antes de SPA

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

import React, { useState, useRef } from 'react'

import { axios } from '../../../utils'

import { useDispatch, useSelector } from 'react-redux'

import { addNotification } from '../../../redux/notification/notification.actions'

import ExperienceItem from './ExperienceItem'

import ExperienceModal from './ExperienceModal'

import EmptySection from '../../../shared/empty-section/EmptySection'

import IconButton from '@mui/material/IconButton'

import AddIcon from '@mui/icons-material/Add'

const Experiences = ({

  experiences,

  months,

  companySizesOptions,

  industriesOptions,

  userId,

  isEdit,

}) => {

  const [isModalOpen, setIsModalOpen] = useState(false)

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

  const [settedExperiences, setSettedExperiences] = useState(experiences)

  const labels = useSelector((state) => state.labels)

  const dispatch = useDispatch()

  const postUrl = useRef('')

  const handleDelete = (deleteUrl) => {

    axios.post(deleteUrl).then(({ data: response }) => {

      if (!response.success) {

        dispatch(addNotification({ style: 'danger', msg: response.data }))

      }

      setSettedExperiences(response.data)

    })

  }

  const addExperience = () => {

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

    setSettedDescription('')

    setIsModalOpen(true)

  }

  const handleEdit = async (linkEdit) => {

    postUrl.current = linkEdit

    const currentDescription = settedExperiences.find(

      (experience) => experience.link_edit === linkEdit

    )

    setSettedDescription(currentDescription.description)

    setIsModalOpen(true)

  }

  return (

    <>

      <div className="profile-attr">

        <div className="profile-attr-header">

          <h2>Experiencia</h2>

          {isEdit && (

            <IconButton onClick={addExperience}>

              <AddIcon />

            </IconButton>

          )}

        </div>

        {settedExperiences.length ? (

          settedExperiences.map((experience) => (

            <ExperienceItem

              key={`${experience.company} - ${experience.title}`}

              experience={experience}

              months={months}

              onDelete={handleDelete}

              onEdit={handleEdit}

              isEdit={isEdit}

            />

          ))

        ) : (

          <EmptySection align="left" message={labels.EMPTY} />

        )}

      </div>

      <ExperienceModal

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

        companySizesOptions={companySizesOptions}

        industriesOptions={industriesOptions}

        months={months}

        postUrl={postUrl.current}

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

        settedDescription={settedDescription}

        show={isModalOpen}

      />

    </>

  )

}

export default Experiences