Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from "react";
import { Link } from "react-router-dom";
import { useSelector } from "react-redux";
import {
  Avatar,
  Button,
  List,
  ListItem,
  ListItemAvatar,
  ListItemButton,
  ListItemText,
} from "@mui/material";

import { useFetch } from "@hooks";
import colors from "@styles/colors";

import Widget from "@components/UI/Widget";
import Spinner from "@components/UI/Spinner";
import EmptySection from "@components/UI/EmptySection";

const SuggestWidget = ({ title, url }) => {
  const { data, loading } = useFetch(url, []);
  const [lookMore, setLookMore] = useState(false);
  const labels = useSelector(({ intl }) => intl.labels);

  const items = useMemo(
    () => (lookMore ? data : [...data].slice(0, 3)),
    [lookMore, data]
  );

  return (
    <Widget>
      <Widget.Header
        title={title}
        renderAction={() => {
          if (data.length <= 3) return null;

          return (
            <Button onClick={() => setLookMore(!lookMore)}>
              {lookMore ? labels.view_less : labels.view_more}
            </Button>
          );
        }}
      />
      <Widget.Body styles={data.length > 0 && { padding: "0 !important" }}>
        {loading && <Spinner />}

        {!loading && data.length === 0 ? (
          <EmptySection message={labels?.datatable_empty} />
        ) : (
          <List sx={{ maxHeight: "225px", overflow: "auto" }}>
            {items.map(({ name, profile, image, id }) => (
              <ListItem
                key={id}
                sx={{ borderTop: `1px solid ${colors.border.primary}` }}
              >
                <ListItemButton LinkComponent={Link} to={profile} disableRipple>
                  <ListItemAvatar>
                    <Avatar src={image} alt={`${name} profile avatar`} />
                  </ListItemAvatar>

                  <ListItemText primary={name} />
                </ListItemButton>
              </ListItem>
            ))}
          </List>
        )}
      </Widget.Body>
    </Widget>
  );
};

export default SuggestWidget;