Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import { axios } from '../../../utils'
import { useSelector } from 'react-redux'

import EmptySection from '../../UI/EmptySection'
import { Link } from 'react-router-dom'

const SuggestWidget = ({
  title = 'Mis Grupos:',
  url = '/helpers/my-groups',
  btnLabelAccept = 'Ver',
}) => {
  const [widgetData, setWidgetData] = useState([])
  const [lookMore, setLookMore] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)

  const getData = (url) => {
    axios.get(url).then(({ data: response }) => {
      const { success, data } = response
      if (success) {
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
      }
    })
  }

  useEffect(() => {
    getData(url)
  }, [url])

  const dataSlice = () => {
    let infoFollows = [...widgetData]

    if (!lookMore) {
      infoFollows = infoFollows.slice(0, 3)
    }

    return infoFollows
  }

  return (
    <div className="suggests_widget">
      <div className="suggests_widget-header">
        <h3>{title}</h3>
        {widgetData.length >= 3 && (
          <span onClick={() => setLookMore(!lookMore)}>
            {lookMore ? labels.view_less : labels.view_more}
          </span>
        )}
      </div>
      <div className="suggest-list">
        {widgetData.length ? (
          dataSlice().map((suggest) => (
            <SuggestWidget.Item
              key={suggest.id}
              suggest={suggest}
              btnLabelAccept={btnLabelAccept}
            />
          ))
        ) : (
          <EmptySection align="left" message={labels?.datatable_empty} />
        )}
      </div>
    </div>
  )
}

const Item = ({ suggest, btnLabelAccept }) => {
  const labels = useSelector(({ intl }) => intl.labels)
  return (
    <div className="user">
      <div className="d-inline-flex align-items-center">
        <Link to={suggest.profile}>
          <img src={suggest.image} alt={`${suggest.name} profile image`} />
        </Link>
        <h4 className="break-ellipsis">{suggest.name}</h4>
      </div>
      <Link to={suggest.profile} className="btn btn-primary ml-auto">
        {btnLabelAccept || labels.view_profile}
      </Link>
    </div>
  )
}

SuggestWidget.Item = Item

export default SuggestWidget