Proyectos de Subversion LeadersLinked - SPA

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

import { useFetch } from '@hooks'

import Widget from '@components/UI/Widget'

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(
    () => (lookMore ? data : data.slice(0, 3)),
    [lookMore, data]
  )

  const toggleList = () => setLookMore(!lookMore)

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

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

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

GroupsWidget.Item = Item

export default GroupsWidget