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 items = useMemo(

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

    [lookMore, data]

  )

  useEffect(() => {

    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())

        }

      })

    }

    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