Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import { axios } from '../../../utils'
import { Link } from 'react-router-dom'
import { styled } from 'styled-components'
import { useSelector } from 'react-redux'
import IconButton from '@mui/material/IconButton'
import ExpandLessIcon from '@mui/icons-material/ExpandLess'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'

import Avatar from '../../UI/AvatarImage'
import EmptySection from '../../UI/EmptySection'

const GroupWidget = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
`

const WidgetHeader = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  padding: 0 10px;

  p {
    font-size: 0.9rem;
    font-weight: 600;
    color: gray;
  }
`

const WidgetList = styled.ul`
  display: flex;
  flex-direction: column;
  height: ${(props) => (props.$show ? 'auto' : 0)};
  gap: 0.5rem;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
`

const ListItem = styled.li`
  align-items: center;
  display: flex;
  padding: 5px 10px;
  gap: 0.5rem;

  span {
    font-size: 0.9rem;
    font-weight: 600;
    color: gray;
    text-align: left;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }
`

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 labels = useSelector(({ intl }) => intl.labels)

  const getData = () => {
    axios.get(url).then(({ data: response }) => {
      const { success, data } = response
      if (success) {
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
      }
    })
  }

  const dataSlice = () => {
    let infoFollows = [...widgetData]
    if (!lookMore) {
      infoFollows = infoFollows.slice(0, 3)
    }
    return infoFollows
  }

  const toggleList = () => {
    setDisplayMenu(!displayMenu)
  }

  useEffect(() => {
    getData()
  }, [])

  return (
    <GroupWidget>
      <WidgetHeader>
        <p>{title}</p>
        <IconButton onClick={toggleList}>
          {displayMenu ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </IconButton>
      </WidgetHeader>

      {widgetData.length ? (
        <WidgetList show={displayMenu}>
          {dataSlice().map(({ id, name, profile, image }) => (
            <ListItem key={id}>
              <Link to={profile}>
                <Avatar imageUrl={image} size="md" name={name} />
                <span>{name}</span>
              </Link>
            </ListItem>
          ))}
        </WidgetList>
      ) : (
        <EmptySection message={labels.empty} />
      )}

      {widgetData.length >= 3 && (
        <ListItem
          as="button"
          className="justify-content-center cursor-pointer py-2"
          onClick={() => setLookMore(!lookMore)}
        >
          <span>{lookMore ? labels.view_less : labels.view_more}</span>
        </ListItem>
      )}
    </GroupWidget>
  )
}

export default GroupsInfo