Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import axios from '../../../../utils/axios'
import Avatar from '../../../../shared/Avatar/Avatar'
import EmptySection from '../../../../shared/empty-section/EmptySection'
import ExpandLessIcon from '@mui/icons-material/ExpandLess'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'

const GroupsInfo = ({
  url = '/helpers/my-groups',
  title = 'Mis grupos',
  display = false,
}) => {
  const [widgetData, setWidgetData] = useState([])
  const [displayMenu, setDisplayMenu] = useState(display)
  const labels = useSelector(({ intl }) => intl.labels)
  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())
      }
    })
  }

  const toggleMenu = () => {
    setDisplayMenu(!displayMenu)
  }

  const dataSlice = () => {
    let infoFollows = [...widgetData]
    if (!lookMore) {
      infoFollows = infoFollows.slice(0, 3)
    }
    return infoFollows
  }

  useEffect(() => {
    getData()
  }, [])

  return (
    <div className="sidebar__recent-item__container">
      <section className="sidebar__recent-item">
        <p>{title}</p>
        <button className="sidebar__recent-icon" onClick={toggleMenu}>
          {displayMenu ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </button>
      </section>

      <ul className={`helper__list ${displayMenu ? 'show' : 'hide'}`}>
        {widgetData.length ? (
          dataSlice().map(({ id, name, profile, image }) => (
            <li key={id}>
              <Link
                href={profile}
                className="helper__list-item"
                target="secondary"
              >
                <Avatar imageUrl={image} size="md" name={name} />
                <span>{name}</span>
              </Link>
            </li>
          ))
        ) : (
          <EmptySection message={labels.datatable_empty} />
        )}

        {widgetData.length >= 3 && (
          <li
            className="helper__list-item justify-content-center cursor-pointer py-2"
            onClick={() => setLookMore(!lookMore)}
          >
            <span>{lookMore ? labels.view_less : labels.view_more}</span>
          </li>
        )}
      </ul>
    </div>
  )
}

export default GroupsInfo