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 GroupIcon from '@mui/icons-material/Group'

import EmptySection from '../../../../shared/empty-section/EmptySection'

const HelpersContainer = () => {

  return (

    <div className='sidebar__bottom'>

      <HelpersContainer.Item url="/helpers/my-groups" title="Mis Grupos" />

      <HelpersContainer.Item url="/helpers/groups-suggestion" title="Grupos" />

    </div>

  )

}

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

  const [widgetData, setWidgetData] = useState([]);

  const [displayMenu, setDisplayMenu] = useState(false);

  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, 1)

    }

    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)}>

            <ExpandMoreIcon />

          </button>

        </div>

      </section>

      <ul className={`helper__list ${displayMenu ? 'show' : 'hide'}`}>

        {widgetData.length

          ? dataSlice().map(({ id, name, profile }) =>

            <li key={id}>

              <a href={profile} className='helper__list-item'>

                <GroupIcon />

                <span>{name}</span>

              </a>

            </li>

          )

          : <EmptySection message='Sin resultados' />

        }

        {widgetData.length >= 3 &&

          <li onClick={() => setLookMore(!lookMore)}>

            <span className='helper__list-item text-center'>

              {lookMore ? 'Ver menos' : 'Ver mas'}

            </span>

          </li>

        }

      </ul>

    </div>

  )

}

HelpersContainer.Item = Item

export default HelpersContainer