Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */

import React, { useEffect, useState } from 'react'

import { axios } from '../../../../utils'

import { useDispatch } from 'react-redux'

import { addNotification } from '../../../../redux/notification/notification.actions'

import EastIcon from '@mui/icons-material/East'

import EmptySection from '../../../../shared/empty-section/EmptySection'

import './Widget.scss'

const PeopleYouMayKnow = () => {

  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([])

  const dispatch = useDispatch()

  const handleConnect = (url) => {

    axios.post(url)

      .then(({ data }) => {

        if (!data.success) {

          return dispatch(addNotification({

            style: 'danger',

            msg: typeof data.data === 'string'

              ? data.data

              : 'Ha ocurrido un error'

          }))

        }

        dispatch(addNotification({

          style: 'success',

          msg: data.data

        }))

        return getSuggestion()

      })

  }

  const getSuggestion = async (url = '/helpers/people-you-may-know') => {

    try {

      const { data: response } = await axios.get(url)

      if (response.success) setPeopleYouMayKnow(response.data.slice(0, 3))

    } catch (error) {

      console.log(error)

    }

  }

  useEffect(() => {

    getSuggestion()

  }, [])

  return (

        <div className='linked__widget'>

            <div className="linked__widget-header">

                <h3>{`${LABELS.CONNECT_WITH}:`}</h3>

            </div>

            <div className='linked__widget-list'>

                {peopleYouMayKnow.length

                  ? peopleYouMayKnow.map(({ id, image, link_cancel, link_request, name, profile }) => {

                    return (

                            <div className="linked__widget-content" key={id}>

                                <a href={profile} target="_blank" rel="noreferrer">

                                    <img src={image} alt={`${name} profile image`} />

                                </a>

                                <div className="linked__widget-info">

                                    <h4>{name}</h4>

                                    {link_request &&

                                        <button

                                            className="btn btn-primary"

                                            onClick={() => handleConnect(link_request)}

                                        >

                                            {LABELS.CONNECT}

                                        </button>

                                    }

                                    {link_cancel &&

                                        <button

                                            className="btn btn-secondary"

                                            onClick={() => handleConnect(link_cancel)}

                                        >

                                            {LABELS.CANCEL}

                                        </button>

                                    }

                                </div>

                            </div>

                    )

                  })

                  : <EmptySection message="Sin sugerencias" />

                }

            </div>

            <a href="/connection/people-you-may-know" target='_blank' >

                {LABELS.VIEW_RECOMMENDATIONS}

                <EastIcon className="ml-2" />

            </a>

        </div>

  )

}

export default PeopleYouMayKnow