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,
              user_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>
                    {user_profile && <p>{user_profile}</p>}
                    {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