Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

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'

const GroupsInfo = ({

  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>

        <button className='sidebar__recent-icon' onClick={() => setDisplayMenu(!displayMenu)}>

          {displayMenu ? <ExpandLessIcon /> : <ExpandMoreIcon />}

        </button>

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