Rev 4314 | AutorÃa | Ultima modificación | Ver Log |
/* eslint-disable react/prop-types */
import React, { useEffect } from 'react'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import GroupIcon from '@mui/icons-material/Group'
import { useState } from 'react'
import axios from '../../../../utils/axios'
import EmptySection from '../../../../shared/empty-section/EmptySection'
const HelpersContainer = (props) => {
const [recentItem1, setrecentItem1] = useState(false)
const [recentItem2, setrecentItem2] = useState(false)
return (
<div className='sidebar__bottom'>
<HelpersContainer.Item />
</div>
)
}
const Item = ({ url = '/helpers/my-groups', title = 'Mis grupos' }) => {
const [widgetData, setWidgetData] = useState([]);
const [lookMore, setLookMore] = useState(false);
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, 3)
}
return infoFollows
}
return (
<div className='sidebar__recent-item__container'>
<section className='sidebar__recent-item'>
<p>{title}</p>
<div className='sidebar__recent-actions'>
<button className='sidebar__recent-icon' onClick={() => setLookMore(!lookMore)}>
<ExpandMoreIcon />
</button>
</div>
</section>
<ul className={`helper__list ${lookMore ? 'show' : 'hide'}`}>
{widgetData.length
? dataSlice().map(({ id, name, profile }) =>
<li key={id}>
<a href={profile} className='helper__list-itemf'>
<GroupIcon />
<span>{name}</span>
</a>
</li>
)
: <EmptySection message='Sin resultados' />
}
</ul>
</div>
)
}
HelpersContainer.Item = Item
export default HelpersContainer