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;