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 />

    </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.slice(0, 3).sort((a, b) => a.priority - b.priority).reverse());

        }

      });

  }

  useEffect(() => {

    getData()

  }, []);

  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

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

            <li key={id}>

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

                <GroupIcon />

                <span>{name}</span>

              </a>

            </li>

          )

          : <EmptySection message='Sin resultados' />

        }

      </ul>

    </div>

  )

}

HelpersContainer.Item = Item

export default HelpersContainer