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