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, 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((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