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 } = responseif (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