Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

import { useSelector } from 'react-redux'

import parse from 'html-react-parser'

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

import IconButton from '@mui/material/IconButton'

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

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

import Spinner from '../UI/Spinner'

import EmptySection from '../UI/EmptySection'

import EducationModal from './EducationModal'

import ConfirmModal from '../modals/ConfirmModal'

const EducationsList = ({ educations, id, isEdit }) => {

  const [settedEducations, setSettedEducations] = useState(educations)

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

  const [isModalOpen, setIsModalOpen] = useState(false)

  const [loading, setLoading] = useState(false)

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

  const postUrl = useRef('')

  const addEducation = () => {

    postUrl.current = `/profile/my-profiles/education/${id}/operation/add`

    setSettedDescription('')

    setIsModalOpen(true)

  }

  const handleDelete = async (delete_link) => {

    setLoading(true)

    axios

      .post(delete_link)

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

        if (response.success) setSettedEducations(response.data)

      })

      .finally(() => setLoading(false))

  }

  const handleEdit = async (edit_link) => {

    postUrl.current = edit_link

    const currentDescription = settedEducations.find(

      (education) => education.link_edit === edit_link

    )

    setSettedDescription(currentDescription.description)

    setIsModalOpen(true)

  }

  useEffect(() => {

    setSettedEducations(educations)

  }, [educations])

  return (

    <>

      <div className="profile-attr">

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

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

          {isEdit && (

            <IconButton onClick={addEducation}>

              <AddIcon />

            </IconButton>

          )}

        </div>

        {loading && <Spinner />}

        {settedEducations?.length ? (

          settedEducations.map((education) => (

            <EducationsList.Item

              key={education.link_edit}

              education={education}

              onDelete={handleDelete}

              onEdit={handleEdit}

              isEdit={isEdit}

            />

          ))

        ) : (

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

        )}

      </div>

      <EducationModal

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

        postUrl={postUrl.current}

        setEducations={(newEducations) => setSettedEducations(newEducations)}

        settedDescription={settedDescription}

        show={isModalOpen}

      />

    </>

  )

}

const Education = ({ education, onDelete, onEdit, isEdit }) => {

  const [isShowModal, setIsShowModal] = useState(false)

  const toggleConfirmModal = () => {

    setIsShowModal(!isShowModal)

  }

  return (

    <>

      <div className="education-item">

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

          <h3>{education.degree}</h3>

          {isEdit && (

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

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

                <EditIcon />

              </IconButton>

              <IconButton onClick={toggleConfirmModal}>

                <DeleteIcon />

              </IconButton>

            </div>

          )}

        </div>

        <h4>{education.university}</h4>

        <p>{`${education.from_year} - ${

          education.to_year ? education.to_year : 'Actualidad'

        }`}</p>

        {education.field_of_study && <p>{education.field_of_study}</p>}

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

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

      </div>

      <ConfirmModal

        show={isShowModal}

        onClose={toggleConfirmModal}

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

      />

    </>

  )

}

EducationsList.Item = Education

export default EducationsList