Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */

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

import { useDispatch } 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 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='peopleYouMayKnow'>

      <div className="sd-title d-flex align-items-center justify-content-between">

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

        {peopleYouMayKnow.length >= 4 &&

          <label onClick={() => setLookMore(!lookMore)}>

            {lookMore ? LABELS.VIEW_LESS : LABELS.VIEW_MORE}

          </label>}

      </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