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'))

      console.log(filterResponse)

      const responseAuthLinks = filterResponse.map((key) => Object.fromEntries([key]))

      console.log(responseAuthLinks)

      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="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="members_count">

                    <b style={{ fontSize: '1rem' }} id="total-followers">{followers}</b>

                    <p style={{ fontSize: '1rem' }} className="ellipsis">Seguidores</p>

                </div>

                <div className="row ">

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

                        <button

                            key={key}

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

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

                        >

                            {authLabels[key]}

                        </button>

                    ))}

                </div>

            </div>

        </div>

  )

}

export default CompanyInfo