Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5431 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |

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