Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import FacebookIcon from '@mui/icons-material/Facebook'
import TwitterIcon from '@mui/icons-material/Twitter'
import InstagramIcon from '@mui/icons-material/Instagram'
import { axios } from '../../../utils'
import { addNotification } from '../../../redux/notification/notification.actions'

const CompanyInfo = ({
  companyId,
  image,
  companyName,
  facebook,
  twitter,
  instagram,
  totalFollowers,
  markFollower
}) => {
  const [authLinks, setAuthLinks] = useState({})
  const [followers, setFollowers] = useState(totalFollowers)

  const authClasses = {
    link_unfollow: 'secondary',
    link_follow: 'secondary',
    link_request: 'tertiary',
    link_accept: 'tertiary',
    link_cancel: 'tertiary',
    link_reject: 'tertiary',
    link_leave: 'tertiary',
    link_contact: 'primary'
  }
  const authLabels = {
    link_unfollow: 'Dejar de seguir',
    link_follow: 'Seguir',
    link_request: '¿Trabaja en esta empresa?',
    link_accept: 'Aceptar',
    link_cancel: 'Cancelar',
    link_reject: 'Rechazar',
    link_leave: 'Abandonar esta empresa',
    link_contact: 'Mensaje'
  }

  const fetchAuthLinks = async () => {
    const response = await axios.get(`/company/view/${companyId}`)
    const { success, data } = response.data

    if (success) {
      const filterResponse = Object.entries(data).filter((key) => key[0].includes('link') && key[1] && key[0] !== 'link_inmail')
      const responseAuthLinks = Object.fromEntries(filterResponse)

      setAuthLinks(responseAuthLinks)
      setFollowers(data.total_followers)

      if (data.link_unfollow) {
        markFollower(true)
      } else {
        markFollower(false)
      }
    }
  }

  const handleButtonAction = async (link) => {
    const response = await axios.post(link)
    const { success, data } = response.data

    if (success) {
      addNotification({ style: 'success', msg: data })
      fetchAuthLinks()
    } else {
      addNotification({ style: 'danger', msg: 'ha ocurrido un error' })
    }
  }

  const openRrss = (rrss) => {
    window.open(rrss, '_blank')
  }

  useEffect(() => fetchAuthLinks(), [])

  return (
        <div className="company-info">
            <img
                src={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ''}`}
                alt="profile-image"
            />
            <h2>{companyName}</h2>
            <div className="row">
                {facebook && <FacebookIcon onClick={() => openRrss(facebook)} className="cursor-pointer" />}
                {twitter && <TwitterIcon onClick={() => openRrss(twitter)} className="cursor-pointer" />}
                {instagram && <InstagramIcon onClick={() => openRrss(instagram)} className="cursor-pointer" />}
            </div>
            <span>
                <b>{followers}</b>
                <br />
                Seguidores
            </span>
            <div className="row">
                {Object.entries(authLinks).map(([key, value]) => {
                  if (key.includes('contact')) {
                    return (
                            <a
                                key={key}
                                className={`btn btn-${authClasses[key]}`}
                                href={value}
                                target='_blank'
                                rel="noreferrer"
                            >
                                {authLabels[key]}
                            </a>
                    )
                  }

                  return (
                    <button
                        key={key}
                        className={`btn btn-${authClasses[key]}`}
                        onClick={() => handleButtonAction(value)}
                    >
                        {authLabels[key]}
                    </button>
                  )
                })}
            </div>
        </div>
  )
}

export default CompanyInfo