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;