Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import EmptySection from '../../empty-section/EmptySection'
import { useSelector } from 'react-redux'

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

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

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

  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 }) => {
  return (
    <div className="user">
      <div className="d-inline-flex align-items-center">
        <a href={suggest.profile} target="_blank" rel="noreferrer">
          <img src={suggest.image} alt={`${suggest.name} profile image`} />
        </a>
        <h4 className="break-ellipsis">{suggest.name}</h4>
      </div>
      <a className="btn btn-primary ml-auto" href={suggest.profile}>
        {btnLabelAccept}
      </a>
    </div>
  )
}

SuggestWidget.Item = Item

export default SuggestWidget