Proyectos de Subversion LeadersLinked - Antes de SPA

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

import ConfirmationBox from '../../../shared/confirmation-box/ConfirmationBox'

import parse from 'html-react-parser'

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

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

import IconButton from '@mui/material/IconButton'

const Experience = ({ experience, months = [], onDelete, onEdit }) => {

  const [isConfirmationBoxShow, setIsConfirmationBoxShow] = useState(false)

  const [monthOptions, setMonthOptions] = useState({})

  useEffect(() => {

    setMonthOptions(

      months.reduce((obj, item, i) => ({ ...obj, [i + 1]: item }), {})

    )

  }, [months, monthOptions])

  const toggleConfirmModal = () =>

    setIsConfirmationBoxShow(!isConfirmationBoxShow)

  return (

    <>

      <div className="experience-item">

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

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

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

            <EditIcon className="cursor-pointer" />

          </IconButton>

          <IconButton onClick={toggleConfirmModal}>

            <DeleteIcon className="cursor-pointer" />

          </IconButton>

        </div>

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

        <p>

          {`${monthOptions[experience.from_month]} ${experience.from_year} - ${

            monthOptions[experience.to_month]

          } ${experience.is_current === 'y' ? 'Actual' : experience.to_year}`}

        </p>

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

          experience.size

        }`}</p>

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

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

      </div>

      <ConfirmationBox

        show={isConfirmationBoxShow}

        onClose={toggleConfirmModal}

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

      />

    </>

  )

}

export default Experience