Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from "react";

import { axios } from "../../../utils";

import { Link } from "react-router-dom";

import { styled } from "styled-components";

import { useSelector } from "react-redux";

import IconButton from "@mui/material/IconButton";

import ExpandLessIcon from "@mui/icons-material/ExpandLess";

import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

import EmptySection from "../../UI/EmptySection";

import Avatar from "@components/common/Avatar";

const GroupWidget = styled.div`

  display: flex;

  flex-direction: column;

  width: 100%;

`;

const WidgetHeader = styled.div`

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex: 1;

  padding: 0 10px;

  p {

    font-size: 0.9rem;

    font-weight: 600;

    color: gray;

  }

`;

const WidgetList = styled.ul`

  display: flex;

  flex-direction: column;

  height: ${(props) => (props.$show ? "auto" : 0)};

  gap: 0.5rem;

  overflow: hidden;

  transition: all 0.2s ease-in-out;

`;

const ListItem = styled.li`

  align-items: center;

  display: flex;

  padding: 5px 10px;

  gap: 0.5rem;

  span {

    font-size: 0.9rem;

    font-weight: 600;

    color: gray;

    text-align: left;

  }

  &:hover {

    background-color: rgba(0, 0, 0, 0.08);

  }

`;

const GroupsInfo = ({

  url = "/helpers/my-groups",

  title = "Mis grupos",

  display = false,

}) => {

  const [widgetData, setWidgetData] = useState([]);

  const [displayMenu, setDisplayMenu] = useState(display);

  const [lookMore, setLookMore] = useState(false);

  const labels = useSelector(({ intl }) => intl.labels);

  const getData = () => {

    axios.get(url).then((response) => {

      const { success, data } = response.data;

      if (success) {

        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse());

      }

    });

  };

  const dataSlice = () => {

    let infoFollows = [...widgetData];

    if (!lookMore) {

      infoFollows = infoFollows.slice(0, 3);

    }

    return infoFollows;

  };

  const toggleList = () => {

    setDisplayMenu(!displayMenu);

  };

  useEffect(() => {

    getData();

  }, []);

  return (

    <GroupWidget>

      <WidgetHeader>

        <p>{title}</p>

        <IconButton onClick={toggleList}>

          {displayMenu ? <ExpandLessIcon /> : <ExpandMoreIcon />}

        </IconButton>

      </WidgetHeader>

      {widgetData.length ? (

        <WidgetList show={displayMenu}>

          {dataSlice().map(({ id, name, profile, image }) => (

            <ListItem key={id}>

              <Link to={profile}>

                <Avatar imageUrl={image} size="md" name={name} />

                <span>{name}</span>

              </Link>

            </ListItem>

          ))}

        </WidgetList>

      ) : (

        <EmptySection message={labels.empty} />

      )}

      {widgetData.length >= 3 && (

        <ListItem

          as="button"

          className="justify-content-center cursor-pointer py-2"

          onClick={() => setLookMore(!lookMore)}

        >

          <span>{lookMore ? labels.view_less : labels.view_more}</span>

        </ListItem>

      )}

    </GroupWidget>

  );

};

export default GroupsInfo;