Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { Avatar, Box } from '@mui/material'
import styled from 'styled-components'

import { axios } from '@app/utils'

import WidgetWrapper from '../WidgetLayout'
import EmptySection from '@app/components/UI/EmptySection'
import Button from '@app/components/UI/buttons/Buttons'

const WidgetHeader = styled(WidgetWrapper.Header)`
  align-items: baseline;
  border-bottom: 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(() => {
    if (!url) return
    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 (
    <WidgetWrapper>
      <WidgetHeader title={title}>
        {data.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>
    </WidgetWrapper>
  )
}

const Item = ({ suggest, btnLabelAccept }) => {
  const { name, profile, image } = suggest
  const labels = useSelector(({ intl }) => intl.labels)
  const navigate = useNavigate()

  return (
    <WidgetItem>
      <WidgetContent>
        <Avatar
          sx={{ width: 50, height: 50 }}
          src={image}
          alt={`${name} profile image`}
        />
        <h2 title={name}>{name}</h2>
      </WidgetContent>

      <Button onClick={() => navigate(profile)}>
        {btnLabelAccept || labels.view_profile}
      </Button>
    </WidgetItem>
  )
}

SuggestWidget.Item = Item

export default SuggestWidget