Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

import { getMonthName } from '../../utils/dates'

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

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

import parse from 'html-react-parser'

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

import EditIcon from '@mui/icons-material/Edit'

import DeleteIcon from '@mui/icons-material/Delete'

import IconButton from '@mui/material/IconButton'

import EmptySection from '../UI/EmptySection'

import ExperienceModal from './ExperienceModal'

import ConfirmModal from '../modals/ConfirmModal'

const ExperiencesList = ({ experiences = [], 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) => (

            <ExperiencesList.Item

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

              experience={experience}

              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'}

      />

    </>

  )

}

const Experience = ({ experience, onDelete, onEdit, isEdit }) => {

  const [isShow, setIsShow] = useState(false)

  const toggleConfirmModal = () => {

    setIsShow(!isShow)

  }

  return (

    <>

      <div className="experience-item">

        <div className="experience-item-header">

          <h3>{experience.company}</h3>

          {isEdit && (

            <div className="icon-buttons-group">

              <IconButton onClick={() => onEdit(experience.link_edit)}>

                <EditIcon />

              </IconButton>

              <IconButton onClick={toggleConfirmModal}>

                <DeleteIcon />

              </IconButton>

            </div>

          )}

        </div>

        <h4>{experience.title}</h4>

        <p>

          {`${getMonthName(experience.from_month)} ${experience.from_year} - ${

            experience.is_current === 'y'

              ? 'Actual'

              : `${getMonthName(experience.to_month)} ${experience.to_year}`

          }`}

        </p>

        <p>{`${experience.industry.name || experience.industry} / ${

          experience.size

        }`}</p>

        <p>{experience.formatted_address}</p>

        {experience.description && parse(experience.description)}

      </div>

      <ConfirmModal

        show={isShow}

        onClose={toggleConfirmModal}

        onAccept={() => onDelete(experience.link_delete)}

      />

    </>

  )

}

ExperiencesList.Item = Experience

export default ExperiencesList