Proyectos de Subversion LeadersLinked - SPA

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

import EmptySection from '../../UI/EmptySection'
import WidgetWrapper from '../../widgets/WidgetLayout'

const HelperContainer = styled(WidgetWrapper)`
  padding: 10px;
`

const HelperItem = styled.div`
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
`

const HelperList = styled.ul`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  height: 0;
  max-height: 210px;
  transition: all 0.2s ease-in-out;
  ${(props) =>
    props.show &&
    css`
      height: auto;
    `}
`

const HelperListItem = styled.div`
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: ${(props) => props.theme.border.radius};
  &:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }
`

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

  return (
    <HelperContainer>
      <GroupsWidget.Item
        url='/helpers/my-groups'
        title={labels.my_groups}
        display={true}
      />
      <GroupsWidget.Item
        url='/helpers/groups-suggestion'
        title={labels.suggest_groups}
      />
    </HelperContainer>
  )
}

const Item = ({
  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((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 (
    <>
      <HelperItem>
        <span>{title}</span>
        <IconButton onClick={toggleMenu}>
          {displayMenu ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </IconButton>
      </HelperItem>

      <HelperList show={displayMenu}>
        {widgetData.length ? (
          dataSlice().map(({ id, name, profile, image }) => (
            <li key={id}>
              <Link to={profile} target='secondary'>
                <HelperListItem>
                  <Avatar
                    src={image}
                    alt={`${name} group image`}
                    sx={{ width: '40px', height: '40px' }}
                  />
                  <span>{name}</span>
                </HelperListItem>
              </Link>
            </li>
          ))
        ) : (
          <EmptySection message={labels.datatable_empty} />
        )}

        {widgetData.length > 3 && (
          <li>
            <HelperListItem
              className='justify-content-center cursor-pointer'
              onClick={() => setLookMore(!lookMore)}
            >
              <span>{lookMore ? labels.view_less : labels.view_more}</span>
            </HelperListItem>
          </li>
        )}
      </HelperList>
    </>
  )
}

GroupsWidget.Item = Item

export default GroupsWidget