Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react'
import { useSelector } from 'react-redux'
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Avatar,
  List,
  ListItemAvatar,
  ListItemButton,
  ListItemText
} from '@mui/material'
import { ExpandMore } from '@mui/icons-material'

import { useFetch } from '@hooks'

import Widget from '@components/UI/Widget'
import { Link } from 'react-router-dom'

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

  return (
    <Widget>
      <Widget.Body>
        <GroupsWidget.Item url='/helpers/my-groups' title={labels.my_groups} />
        <GroupsWidget.Item
          url='/helpers/groups-suggestion'
          title={labels.suggest_groups}
        />
      </Widget.Body>
    </Widget>
  )
}

const Item = ({ url = '/helpers/my-groups', title = 'Mis grupos' }) => {
  const labels = useSelector(({ intl }) => intl.labels)
  const [lookMore, setLookMore] = useState(false)

  const { data } = useFetch(url, [])

  const items = useMemo(() => {
    if (!lookMore) return [...data].slice(0, 3)
    return data
  }, [lookMore, data])

  return (
    <Accordion>
      <AccordionSummary expandIcon={<ExpandMore />}>{title}</AccordionSummary>
      <AccordionDetails>
        <List>
          {items.map(({ id, name, profile, image }) => (
            <ListItemButton key={id} to={profile} LinkComponent={Link}>
              <ListItemAvatar>
                <Avatar src={image} />
              </ListItemAvatar>

              <ListItemText primary={name} />
            </ListItemButton>
          ))}

          {data.length > 3 && (
            <ListItemButton
              sx={{ textAlign: 'center' }}
              onClick={() => setLookMore(!lookMore)}
            >
              {lookMore ? labels.view_less : labels.view_more}
            </ListItemButton>
          )}
        </List>
      </AccordionDetails>
    </Accordion>
  )
}

GroupsWidget.Item = Item

export default GroupsWidget