Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { 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(null)
  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) {
      setAuthLinks(data)
      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')
  }

  return (
        <div className="user_profile">
            <div className="user-pro-img">
                <img
                    src={`/storage/type/company/code/${companyId}/${image ? `filename/${image}` : ''}`}
                    alt="profile-image"
                />
            </div>
            <div className="user_pro_status horizontal-list">
                <h1>{companyName}</h1>
                <div className="row px-5" style={{ marginTop: '10px' }}>
                    {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>
                <div className="container horizontal-list">
                    <div className="row ">
                        <div className="members_count">
                            <b style={{ fontSize: '1rem' }} id="total-followers">{followers}</b>
                            <p style={{ fontSize: '1rem' }} className="ellipsis">Seguidores</p>
                        </div>
                        {Object.entries(authLinks).map(([key, value]) => (
                            <button
                                key={key}
                                className={`btn ${authClasses[key]}`}
                                onClick={() => handleButtonAction(value)}
                            >
                                {authLabels[key]}
                            </button>
                        ))}
                    </div>
                </div>
            </div>
        </div>
  )
}

export default CompanyInfo