Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { addNotification } from '../../../redux/notification/notification.actions'
import { axios } from '../../../utils'
import EmptySection from '../../empty-section/EmptySection'

const PeopleYouMayKnow = () => {
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([])
  const [lookMore, setLookMore] = useState(false)
  const dispatch = useDispatch()
  const labels = useSelector(state => state.labels)

  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)
    } catch (error) {
      console.log(error)
    }
  }

  useEffect(() => {
    getSuggestion()
  }, [])

  const dataSlice = () => {
    let infoFollows = [...peopleYouMayKnow]
    if (!lookMore) {
      infoFollows = infoFollows.slice(0, 3)
    }
    return infoFollows
  }

  return (
    <div className='suggests_widget'>
      <div className="suggests_widget-header">
        <h3>{`${labels.CONNECT_WITH}:`}</h3>
        {peopleYouMayKnow.length >= 4 &&
          <span onClick={() => setLookMore(!lookMore)}>
            {lookMore ? labels.VIEW_LESS : labels.VIEW_MORE}
          </span>}
      </div>
      <div className='suggest-list'>
        {peopleYouMayKnow.length
          ? dataSlice().map(({ id, image, link_cancel, link_request, name, profile }) =>
            <div className='user' key={id}>
              <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
                <a href={profile} target="_blank" rel="noreferrer">
                  <img src={image} alt={`${name} profile image`} />
                </a>
                <h4 className="break-ellipsis">{name}</h4>
              </div>
              {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>
          )
          : <EmptySection align='left' message={labels.DATATABLE_EMPTY} />
        }
      </div>
    </div>
  )
}

export default PeopleYouMayKnow