Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import IconButton from '@mui/material/IconButton'
import EditIcon from '@mui/icons-material/Edit'
import FacebookIcon from '@mui/icons-material/Facebook'
import TwitterIcon from '@mui/icons-material/Twitter'
import InstagramIcon from '@mui/icons-material/Instagram'
import SocialNetworksModal from './SocialNetworksModal'

const SocialNetworks = ({
  facebook = '',
  twitter = '',
  instagram = '',
  profileId = '',
  type,
}) => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [settedFacebook, setSettedtedFacebook] = useState(facebook)
  const [settedTwitter, setSettedTwitter] = useState(twitter)
  const [settedInstagram, setSettedInstagram] = useState(instagram)

  const toggleModal = () => {
    setIsModalOpen(!isModalOpen)
  }

  const handleEdit = (rrss) => {
    setSettedtedFacebook(rrss.facebook)
    setSettedTwitter(rrss.twitter)
    setSettedInstagram(rrss.instagram)
  }

  useEffect(() => {
    setSettedtedFacebook(facebook)
    setSettedTwitter(twitter)
    setSettedInstagram(instagram)
  }, [twitter, facebook, instagram])

  return (
    <>
      <div className="social-network-header">
        <h3>Redes Sociales</h3>
        <IconButton onClick={toggleModal}>
          <EditIcon />
        </IconButton>
      </div>
      <ul className="social-links">
        {settedFacebook && (
          <li>
            <a href={settedFacebook} target="_blank" rel="noreferrer">
              <FacebookIcon />
              <span>{settedFacebook}</span>
            </a>
          </li>
        )}
        {settedTwitter && (
          <li>
            <a href={settedTwitter} target="_blank" rel="noreferrer">
              <TwitterIcon />
              <span>{settedTwitter}</span>
            </a>
          </li>
        )}
        {settedInstagram && (
          <li>
            <a href={settedInstagram} target="_blank" rel="noreferrer">
              <InstagramIcon />
              <span>{settedInstagram}</span>
            </a>
          </li>
        )}
      </ul>

      <SocialNetworksModal
        isOpen={isModalOpen}
        profileId={profileId}
        type={type}
        facebook={settedFacebook}
        instagram={settedInstagram}
        twitter={settedTwitter}
        onClose={toggleModal}
        onComplete={handleEdit}
      />
    </>
  )
}

export default SocialNetworks