Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3432 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3719 stevensc 1 
import React, { useEffect, useState } from 'react';
2 
import { axios } from '../../../utils';
3 
import { Link } from 'react-router-dom';
4 
import { styled } from 'styled-components';
5 
import { useSelector } from 'react-redux';
6 
import IconButton from '@mui/material/IconButton';
7 
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
8 
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
9 
 
10 
import EmptySection from '../../UI/EmptySection';
11 
import Avatar from '@components/common/Avatar';
12 
 
13 
const GroupWidget = styled.div`
14 
  display: flex;
15 
  flex-direction: column;
16 
  width: 100%;
17 
`;
18 
 
19 
const WidgetHeader = styled.div`
20 
  display: flex;
21 
  align-items: center;
22 
  justify-content: space-between;
23 
  flex: 1;
24 
  padding: 0 10px;
25 
 
26 
  p {
27 
    font-size: 0.9rem;
28 
    font-weight: 600;
29 
    color: gray;
30 
  }
31 
`;
32 
 
33 
const WidgetList = styled.ul`
34 
  display: flex;
35 
  flex-direction: column;
36 
  height: ${(props) => (props.$show ? 'auto' : 0)};
37 
  gap: 0.5rem;
38 
  overflow: hidden;
39 
  transition: all 0.2s ease-in-out;
40 
`;
41 
 
42 
const ListItem = styled.li`
43 
  align-items: center;
44 
  display: flex;
45 
  padding: 5px 10px;
46 
  gap: 0.5rem;
47 
 
48 
  span {
49 
    font-size: 0.9rem;
50 
    font-weight: 600;
51 
    color: gray;
52 
    text-align: left;
53 
  }
54 
 
55 
  &:hover {
56 
    background-color: rgba(0, 0, 0, 0.08);
57 
  }
58 
`;
59 
 
60 
const GroupsInfo = ({ url = '/helpers/my-groups', title = 'Mis grupos', display = false }) => {
61 
  const [widgetData, setWidgetData] = useState([]);
62 
  const [displayMenu, setDisplayMenu] = useState(display);
63 
  const [lookMore, setLookMore] = useState(false);
64 
  const labels = useSelector(({ intl }) => intl.labels);
65 
 
66 
  const getData = () => {
67 
    axios.get(url).then((response) => {
68 
      const { success, data } = response.data;
69 
      if (success) {
70 
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse());
71 
      }
72 
    });
73 
  };
74 
 
75 
  const dataSlice = () => {
76 
    let infoFollows = [...widgetData];
77 
    if (!lookMore) {
78 
      infoFollows = infoFollows.slice(0, 3);
79 
    }
80 
    return infoFollows;
81 
  };
82 
 
83 
  const toggleList = () => {
84 
    setDisplayMenu(!displayMenu);
85 
  };
86 
 
87 
  useEffect(() => {
88 
    getData();
89 
  }, []);
90 
 
91 
  return (
92 
    <GroupWidget>
93 
      <WidgetHeader>
94 
        <p>{title}</p>
95 
        <IconButton onClick={toggleList}>
96 
          {displayMenu ? <ExpandLessIcon /> : <ExpandMoreIcon />}
97 
        </IconButton>
98 
      </WidgetHeader>
99 
 
100 
      {widgetData.length ? (
101 
        <WidgetList show={displayMenu}>
102 
          {dataSlice().map(({ id, name, profile, image }) => (
103 
            <ListItem key={id}>
104 
              <Link to={profile}>
105 
                <Avatar imageUrl={image} size='md' name={name} />
106 
                <span>{name}</span>
107 
              </Link>
108 
            </ListItem>
109 
          ))}
110 
        </WidgetList>
111 
      ) : (
112 
        <EmptySection message={labels.empty} />
113 
      )}
114 
 
115 
      {widgetData.length >= 3 && (
116 
        <ListItem
117 
          as='button'
118 
          className='justify-content-center cursor-pointer py-2'
119 
          onClick={() => setLookMore(!lookMore)}
120 
        >
121 
          <span>{lookMore ? labels.view_less : labels.view_more}</span>
122 
        </ListItem>
123 
      )}
124 
    </GroupWidget>
125 
  );
126 
};
127 
 
128 
export default GroupsInfo;