Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 955 | Rev 958 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |

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

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

const SuggestWidget = ({
  title = 'Mis Grupos:',
  url = '/helpers/my-groups',
  btnLabelAccept = 'Ver'
}) => {
  const [widgetData, setWidgetData] = 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) {
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
      }
    })
  }

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

  const dataSlice = () => {
    let infoFollows = [...widgetData]

    if (!lookMore) {
      infoFollows = infoFollows.slice(0, 3)
    }

    return infoFollows
  }

  return (
    <StyledContainer>
      <StyledContainer.Header title={title}>
        {widgetData.length >= 3 && (
          <span
            className='cursor-pointer'
            onClick={() => setLookMore(!lookMore)}
          >
            {lookMore ? labels.view_less : labels.view_more}
          </span>
        )}
      </StyledContainer.Header>

      <StyledContainer.Body>
        <Box
          display='flex'
          flexDirection='column'
          maxHeight='350'
          overflow='auto'
        >
          {widgetData.length ? (
            dataSlice().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