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