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>

                Seguidores

            </span>

            <div className="row">

                {Object.entries(authLinks).map(([key, value]) => (

                    <button

                        key={key}

                        className={`btn btn-${authClasses[key]}`}

                        onClick={() => handleButtonAction(value)}

                    >

                        {authLabels[key]}

                    </button>

                ))}

            </div>

        </div>

  )

}

export default CompanyInfo