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,
  Typography
} from '@mui/material';
import ExpandMore from '@mui/icons-material/ExpandMore';

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 />}>
        <Typography variant='overline'>{title}</Typography>
      </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;