Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5904 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5904 Rev 7110
Línea 1... Línea -...
1 
/* eslint-disable react/prop-types */
 - 
 
2 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useState } from 'react'
3 
import axios from '../../../../utils/axios'
 2 
import axios from '../../../../utils/axios'
4 
import Avatar from '../../../../shared/Avatar/Avatar'
 3 
import Avatar from '../../../../shared/Avatar/Avatar'
5 
import EmptySection from '../../../../shared/empty-section/EmptySection'
 4 
import EmptySection from '../../../../shared/empty-section/EmptySection'
6 
import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 5 
import ExpandLessIcon from '@mui/icons-material/ExpandLess'
7 
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 6 
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
- 
 
 7 
import { useSelector } from 'react-redux'
- 
 
 8 
import { Link } from 'react-router-dom'
Línea 8... Línea 9...
8 
 
 9 
 
9 
const GroupsInfo = ({
 10 
const GroupsInfo = ({
10 
  url = '/helpers/my-groups',
 11 
  url = '/helpers/my-groups',
11 
  title = 'Mis grupos',
 12 
  title = 'Mis grupos',
12 
  display = false,
 13 
  display = false,
13 
}) => {
 14 
}) => {
14 
  const [widgetData, setWidgetData] = useState([])
 15 
  const [widgetData, setWidgetData] = useState([])
- 
 
 16 
  const [displayMenu, setDisplayMenu] = useState(display)
15 
  const [displayMenu, setDisplayMenu] = useState(display)
 17 
  const labels = useSelector(({ intl }) => intl.labels)
Línea 16... Línea 18...
16 
  const [lookMore, setLookMore] = useState(false)
 18 
  const [lookMore, setLookMore] = useState(false)
17 
 
 19 
 
18 
  const getData = () => {
 20 
  const getData = () => {
Línea 22... Línea 24...
22 
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
 24 
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
23 
      }
 25 
      }
24 
    })
 26 
    })
25 
  }
 27 
  }
Línea 26... Línea 28...
26 
 
 28 
 
27 
  useEffect(() => {
 29 
  const toggleMenu = () => {
28 
    getData()
 30 
    setDisplayMenu(!displayMenu)
Línea 29... Línea 31...
29 
  }, [])
 31 
  }
30 
 
 32 
 
31 
  const dataSlice = () => {
 33 
  const dataSlice = () => {
32 
    let infoFollows = [...widgetData]
 34 
    let infoFollows = [...widgetData]
33 
    if (!lookMore) {
 35 
    if (!lookMore) {
34 
      infoFollows = infoFollows.slice(0, 3)
 36 
      infoFollows = infoFollows.slice(0, 3)
35 
    }
 37 
    }
Línea -... Línea 38...
- 
 
 38 
    return infoFollows
- 
 
 39 
  }
- 
 
 40 
 
- 
 
 41 
  useEffect(() => {
36 
    return infoFollows
 42 
    getData()
37 
  }
 43 
  }, [])
38 
 
 44 
 
39 
  return (
 45 
  return (
40 
    <div className="sidebar__recent-item__container">
 - 
 
41 
      <section className="sidebar__recent-item">
 46 
    <div className="sidebar__recent-item__container">
42 
        <p>{title}</p>
 - 
 
43 
        <button
 - 
 
44 
          className="sidebar__recent-icon"
 47 
      <section className="sidebar__recent-item">
45 
          onClick={() => setDisplayMenu(!displayMenu)}
 48 
        <p>{title}</p>
46 
        >
 49 
        <button className="sidebar__recent-icon" onClick={toggleMenu}>
Línea 47... Línea 50...
47 
          {displayMenu ? <ExpandLessIcon /> : <ExpandMoreIcon />}
 50 
          {displayMenu ? <ExpandLessIcon /> : <ExpandMoreIcon />}
48 
        </button>
 51 
        </button>
49 
      </section>
 52 
      </section>
50 
 
 53 
 
51 
      <ul className={`helper__list ${displayMenu ? 'show' : 'hide'}`}>
 54 
      <ul className={`helper__list ${displayMenu ? 'show' : 'hide'}`}>
52 
        {widgetData.length ? (
 55 
        {widgetData.length ? (
53 
          dataSlice().map(({ id, name, profile, image }) => (
 56 
          dataSlice().map(({ id, name, profile, image }) => (
54 
            <li key={id}>
 57 
            <li key={id}>
55 
              <a
 58 
              <Link
56 
                href={profile}
 59 
                href={profile}
57 
                className="helper__list-item"
 60 
                className="helper__list-item"
58 
                target="secondary"
 61 
                target="secondary"
59 
              >
 62 
              >
60 
                <Avatar imageUrl={image} size="md" name={name} />
 63 
                <Avatar imageUrl={image} size="md" name={name} />
61 
                <span>{name}</span>
 64 
                <span>{name}</span>
62 
              </a>
 65 
              </Link>
63 
            </li>
 66 
            </li>
Línea 64... Línea 67...
64 
          ))
 67 
          ))
65 
        ) : (
 68 
        ) : (
66 
          <EmptySection message={LABELS.DATATABLE_EMPTY} />
 69 
          <EmptySection message={labels.datatable_empty} />
67 
        )}
 70 
        )}
68 
 
 71 
 
69 
        {widgetData.length >= 3 && (
 72 
        {widgetData.length >= 3 && (
70 
          <li
 73 
          <li
71 
            className="helper__list-item justify-content-center cursor-pointer py-2"
 74 
            className="helper__list-item justify-content-center cursor-pointer py-2"
72 
            onClick={() => setLookMore(!lookMore)}
 75 
            onClick={() => setLookMore(!lookMore)}
73 
          >
 76 
          >
74 
            <span>{lookMore ? LABELS.VIEW_LESS : LABELS.VIEW_MORE}</span>
 77 
            <span>{lookMore ? labels.view_less : labels.view_more}</span>