Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6837 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 Avatar from '../../UI/AvatarImage'
11 
import EmptySection from '../../UI/EmptySection'
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 = ({
61 
  url = '/helpers/my-groups',
62 
  title = 'Mis grupos',
63 
  display = false,
64 
}) => {
65 
  const [widgetData, setWidgetData] = useState([])
66 
  const [displayMenu, setDisplayMenu] = useState(display)
67 
  const [lookMore, setLookMore] = useState(false)
68 
  const labels = useSelector(({ intl }) => intl.labels)
69 
 
70 
  const getData = () => {
71 
    axios.get(url).then(({ data: response }) => {
72 
      const { success, data } = response
73 
      if (success) {
74 
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
75 
      }
76 
    })
77 
  }
78 
 
79 
  const dataSlice = () => {
80 
    let infoFollows = [...widgetData]
81 
    if (!lookMore) {
82 
      infoFollows = infoFollows.slice(0, 3)
83 
    }
84 
    return infoFollows
85 
  }
86 
 
87 
  const toggleList = () => {
88 
    setDisplayMenu(!displayMenu)
89 
  }
90 
 
91 
  useEffect(() => {
92 
    getData()
93 
  }, [])
94 
 
95 
  return (
96 
    <GroupWidget>
97 
      <WidgetHeader>
98 
        <p>{title}</p>
99 
        <IconButton onClick={toggleList}>
100 
          {displayMenu ? <ExpandLessIcon /> : <ExpandMoreIcon />}
101 
        </IconButton>
102 
      </WidgetHeader>
103 
 
104 
      {widgetData.length ? (
105 
        <WidgetList show={displayMenu}>
106 
          {dataSlice().map(({ id, name, profile, image }) => (
107 
            <ListItem key={id}>
108 
              <Link to={profile}>
109 
                <Avatar imageUrl={image} size="md" name={name} />
110 
                <span>{name}</span>
111 
              </Link>
112 
            </ListItem>
113 
          ))}
114 
        </WidgetList>
115 
      ) : (
116 
        <EmptySection message={labels.empty} />
117 
      )}
118 
 
119 
      {widgetData.length >= 3 && (
120 
        <ListItem
121 
          as="button"
122 
          className="justify-content-center cursor-pointer py-2"
123 
          onClick={() => setLookMore(!lookMore)}
124 
        >
125 
          <span>{lookMore ? labels.view_less : labels.view_more}</span>
126 
        </ListItem>
127 
      )}
128 
    </GroupWidget>
129 
  )
130 
}
131 
 
132 
export default GroupsInfo