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 { Avatar, Box } from '@mui/material'

import styled from 'styled-components'

import StyledContainer from '../WidgetLayout'

import EmptySection from '../../UI/EmptySection'

const WidgetHeader = styled(StyledContainer.Header)`

  align-items: baseline;

  border: 1px solid var(--border-primary);

  span {

    cursor: pointer;

  }

`

const WidgetItem = styled.div`

  align-items: center;

  border-bottom: 1px solid var(--border-primary);

  display: flex;

  padding: 0.5rem 1rem;

  gap: 0.5rem;

  width: 100%;

  justify-content: space-between;

`

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>

      <Box

        display='flex'

        flexDirection='column'

        maxHeight='210'

        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>

  )

}

const Item = ({ suggest, btnLabelAccept }) => {

  const { name, profile, image } = suggest

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

  return (

    <WidgetItem>

      <div className='d-inline-flex align-items-center'>

        <Avatar

          sx={{ width: 60, height: 60 }}

          src={image}

          alt={`${name} profile image`}

        />

        <h4 className='break-ellipsis' title={name}>

          {name}

        </h4>

      </div>

      <Link to={profile} className='btn btn-primary ml-auto'>

        {btnLabelAccept || labels.view_profile}

      </Link>

    </WidgetItem>

  )

}

SuggestWidget.Item = Item

export default SuggestWidget