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 { ButtonPrimary } from '@buttons'

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 WidgetContent = styled.div`

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  overflow: hidden;

  max-width: 100%;

  h2 {

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

  }

`

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='201'

        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>

      <WidgetContent>

        <Avatar

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

          src={image}

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

        />

        <h2 title={name}>{name}</h2>

      </WidgetContent>

      <Link to={profile}>

        <ButtonPrimary label={btnLabelAccept || labels.view_profile} />

      </Link>

    </WidgetItem>

  )

}

SuggestWidget.Item = Item

export default SuggestWidget