Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import OverviewModal from './OverviewModal'
import EmptySection from '../../../shared/empty-section/EmptySection'
import { useSelector } from 'react-redux'

const Overview = ({ overview, userId, isEdit }) => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [settedOverview, setSettedOverview] = useState(overview)

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

  const toggleModal = () => setIsModalOpen(true)

  function sanitize(str) {
    const map = {
      '&': '&',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;',
    }
    return str.replace(/[&<>"']/g, (m) => map[m])
  }

  useEffect(() => {
    setSettedOverview(overview)
  }, [overview])

  return (
    <>
      <div className="user-profile-extended-ov">
        <h3 style={{ display: 'flex' }}>
          Visión general
          {isEdit && (
            <button className="btn-extended-edit" onClick={toggleModal}>
              <i className="fa fa-pencil" />
            </button>
          )}
        </h3>
        {overview ? (
          <span id="overview-description">{sanitize(overview)}</span>
        ) : (
          <EmptySection align="left" message={labels.EMPTY} />
        )}
      </div>
      <OverviewModal
        isOpen={isModalOpen}
        overview={settedOverview}
        userIdEncrypted={userId}
        closeModal={toggleModal}
        setOverview={setSettedOverview}
      />
    </>
  )
}

export default Overview