Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'

import { axios } from '../../../utils'

import { Link } from 'react-router-dom'

import { Avatar } from '@mui/material'

import { useSelector } from 'react-redux'

import ExpandLessIcon from '@mui/icons-material/ExpandLess'

import ExpandMoreIcon from '@mui/icons-material/ExpandMore'

import EmptySection from '../../UI/EmptySection'

const Groups = () => {

  const labels = useSelector(({ intl }) => intl.labels)

  return (

    <div className="sidebar__bottom">

      <Groups.Item

        url="/helpers/my-groups"

        title={labels.my_groups}

        display={true}

      />

      <Groups.Item

        url="/helpers/groups-suggestion"

        title={labels.suggest_groups}

      />

    </div>

  )

}

const Item = ({

  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((response) => {

      const { success, data } = response.data

      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

                  src={image}

                  alt={`${name} group image`}

                  sx={{ width: '40px', height: '40px' }}

                />

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

  )

}

Groups.Item = Item

export default Groups