Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import { axios } from '../../../utils'
import { useSelector } from 'react-redux'
import { Box } from '@mui/material'
import styled from 'styled-components'

import StyledContainer from '../WidgetLayout'
import EmptySection from '../../UI/EmptySection'

const WidgetHeader = styled(StyledContainer.Header)`
  padding-bottom: 0;
  align-items: baseline;
  span {
    cursor: pointer;
  }
`

const SuggestWidget = ({
  title = 'Mis Grupos:',
  url = '/helpers/my-groups',
  btnLabelAccept = 'Ver'
}) => {
  const [data, setData] = useState([])
  const [lookMore, setLookMore] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)

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

  const items = useMemo(
    () => (lookMore ? data : [...data].slice(0, 3)),
    [lookMore]
  )

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

  return (
    <StyledContainer>
      <WidgetHeader title={title}>
        {items.length >= 3 ? (
          <span onClick={() => setLookMore(!lookMore)}>
            {lookMore ? labels.view_less : labels.view_more}
          </span>
        ) : null}
      </WidgetHeader>

      <StyledContainer.Body>
        <Box
          display='flex'
          flexDirection='column'
          maxHeight='350'
          overflow='auto'
        >
          {data.length ? (
            items.map((suggest) => (
              <SuggestWidget.Item
                key={suggest.id}
                suggest={suggest}
                btnLabelAccept={btnLabelAccept}
              />
            ))
          ) : (
            <EmptySection align='left' message={labels?.datatable_empty} />
          )}
        </Box>
      </StyledContainer.Body>
    </StyledContainer>
  )
}

const Item = ({ suggest, btnLabelAccept }) => {
  const labels = useSelector(({ intl }) => intl.labels)

  return (
    <div className='user'>
      <div className='d-inline-flex align-items-center'>
        <Link to={suggest.profile}>
          <img src={suggest.image} alt={`${suggest.name} profile image`} />
        </Link>
        <h4 className='break-ellipsis'>{suggest.name}</h4>
      </div>
      <Link to={suggest.profile} className='btn btn-primary ml-auto'>
        {btnLabelAccept || labels.view_profile}
      </Link>
    </div>
  )
}

SuggestWidget.Item = Item

export default SuggestWidget