Rev 955 | Rev 958 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { axios } from '../../../utils'
import { useSelector } from 'react-redux'
import { Box } from '@mui/material'
import StyledContainer from '../WidgetLayout'
import EmptySection from '../../UI/EmptySection'
const SuggestWidget = ({
title = 'Mis Grupos:',
url = '/helpers/my-groups',
btnLabelAccept = 'Ver'
}) => {
const [widgetData, setWidgetData] = useState([])
const [lookMore, setLookMore] = useState(false)
const labels = useSelector(({ intl }) => intl.labels)
const getData = (url) => {
axios.get(url).then(({ data: response }) => {
const { success, data } = response
if (success) {
setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
}
})
}
useEffect(() => {
getData(url)
}, [url])
const dataSlice = () => {
let infoFollows = [...widgetData]
if (!lookMore) {
infoFollows = infoFollows.slice(0, 3)
}
return infoFollows
}
return (
<StyledContainer>
<StyledContainer.Header title={title}>
{widgetData.length >= 3 && (
<span
className='cursor-pointer'
onClick={() => setLookMore(!lookMore)}
>
{lookMore ? labels.view_less : labels.view_more}
</span>
)}
</StyledContainer.Header>
<StyledContainer.Body>
<Box
display='flex'
flexDirection='column'
maxHeight='350'
overflow='auto'
>
{widgetData.length ? (
dataSlice().map((suggest) => (
<SuggestWidget.Item
key={suggest.id}
suggest={suggest}
btnLabelAccept={btnLabelAccept}
/>
))
) : (
<EmptySection align='left' message={labels?.datatable_empty} />
)}
</Box>
</StyledContainer.Body>
</StyledContainer>
)
}
const Item = ({ suggest, btnLabelAccept }) => {
const labels = useSelector(({ intl }) => intl.labels)
return (
<div className='user'>
<div className='d-inline-flex align-items-center'>
<Link to={suggest.profile}>
<img src={suggest.image} alt={`${suggest.name} profile image`} />
</Link>
<h4 className='break-ellipsis'>{suggest.name}</h4>
</div>
<Link to={suggest.profile} className='btn btn-primary ml-auto'>
{btnLabelAccept || labels.view_profile}
</Link>
</div>
)
}
SuggestWidget.Item = Item
export default SuggestWidget