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'

}) => {

  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, 1)

    }

    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(({ id, name, image, profile }) =>

            <div className='user' key={id}>

              <div className="d-inline-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>

              <a className="btn btn-primary ml-auto" href={profile}>

                {labels.GROUP_VIEW}

              </a>

            </div>

          )

          : <EmptySection align='left' message={labels.DATATABLE_EMPTY} />

        }

      </div>

    </div>

  )

}

export default SuggestWidget