Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

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

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

import IconButton from '@mui/material/IconButton'

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

import EmptySection from '../UI/EmptySection'

import ExperienceItem from './ExperienceItem'

import ExperienceModal from './ExperienceModal'

const Experiences = ({ experiences = [], months = [], userId, isEdit }) => {

  const [settedExperiences, setSettedExperiences] = useState([])

  const [isModalOpen, setIsModalOpen] = useState(false)

  const actionUrl = useRef('')

  const actionType = useRef('add')

  const labels = useSelector(({ intl }) => intl.labels)

  const dispatch = useDispatch()

  const deleteExperience = (url) => {

    axios

      .post(url)

      .then(({ data: response }) => {

        const { success, data } = response

        if (!success) {

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

          return

        }

        setSettedExperiences(data)

      })

      .catch((err) => {

        dispatch(

          addNotification({ style: 'danger', msg: labels.there_was_an_error })

        )

        throw new Error(err)

      })

  }

  const addExperience = () => {

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

    actionType.current = 'add'

    setIsModalOpen(true)

  }

  const editExperience = async (url) => {

    actionUrl.current = url

    actionType.current = 'edit'

    setIsModalOpen(true)

  }

  useEffect(() => {

    setSettedExperiences(experiences)

  }, [experiences])

  return (

    <>

      <div className="profile-attr">

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

          <h2>{labels.experience}</h2>

          {isEdit && (

            <IconButton onClick={addExperience}>

              <AddIcon />

            </IconButton>

          )}

        </div>

        {settedExperiences.length ? (

          settedExperiences.map((experience) => (

            <ExperienceItem

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

              experience={experience}

              months={months}

              onDelete={deleteExperience}

              onEdit={editExperience}

              isEdit={isEdit}

            />

          ))

        ) : (

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

        )}

      </div>

      <ExperienceModal

        show={isModalOpen}

        url={actionUrl.current}

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

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

        isEdit={actionType.current === 'edit'}

      />

    </>

  )

}

export default Experiences