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