Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import axios from '../../../../utils/axios'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import ExpandLessIcon from '@mui/icons-material/ExpandLess'
import EmptySection from '../../../../shared/empty-section/EmptySection'
import Avatar from '../../../../shared/Avatar/Avatar'

const HelpersContainer = () => {

  return (
    <div className='sidebar__bottom'>
      <HelpersContainer.Item url="/helpers/my-groups" title="Mis Grupos" display={true} />
      <HelpersContainer.Item url="/helpers/groups-suggestion" title="Grupos Sugeridos" />
    </div>
  )
}

const Item = ({ url = '/helpers/my-groups', title = 'Mis grupos', display = false }) => {

  const [widgetData, setWidgetData] = useState([]);
  const [displayMenu, setDisplayMenu] = useState(display);
  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={() => setDisplayMenu(!displayMenu)}>
            {displayMenu ? <ExpandLessIcon /> : <ExpandMoreIcon />}
          </button>
        </div>
      </section>

      <ul className={`helper__list ${displayMenu ? 'show' : 'hide'}`}>
        {widgetData.length
          ? dataSlice().map(({ id, name, profile, image }) =>
            <li key={id}>
              <a href={profile} className='helper__list-item' target='secondary'>
                <Avatar imageUrl={image} size='md' name={name} />
                <span>{name}</span>
              </a>
            </li>
          )
          : <EmptySection message='Sin resultados' />
        }
        {widgetData.length >= 3 &&
          <li className='helper__list-item justify-content-center cursor-pointer py-2' onClick={() => setLookMore(!lookMore)}>
            <span>
              {lookMore ? 'Ver menos' : 'Ver mas'}
            </span>
          </li>
        }
      </ul>

    </div>
  )
}

HelpersContainer.Item = Item

export default HelpersContainer