Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2921 | Rev 2923 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2921 Rev 2922
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useMemo, useState } from 'react'
2 
import { useSelector } from 'react-redux'
 2 
import { useSelector } from 'react-redux'
3 
import { IconButton, styled } from '@mui/material'
 3 
import { IconButton, styled } from '@mui/material'
4 
import { ExpandLess, ExpandMore } from '@mui/icons-material'
 4 
import { ExpandLess, ExpandMore } from '@mui/icons-material'
Línea 5... Línea 5...
5 
 
 5 
 
Línea 6... Línea 6...
6 
import { axios } from '@utils'
 6 
import { useFetch } from '@hooks'
7 
 
 7 
 
Línea 8... Línea 8...
8 
import Widget from '@components/UI/Widget'
 8 
import Widget from '@components/UI/Widget'
Línea 30... Línea 30...
30 
      </Widget.Body>
 30 
      </Widget.Body>
31 
    </Widget>
 31 
    </Widget>
32 
  )
 32 
  )
33 
}
 33 
}
Línea 34... Línea -...
34 
 
 - 
 
35 
const Item = ({
 34 
 
36 
  url = '/helpers/my-groups',
 - 
 
37 
  title = 'Mis grupos',
 - 
 
38 
  display = false
 - 
 
39 
}) => {
 35 
const Item = ({ url = '/helpers/my-groups', title = 'Mis grupos' }) => {
40 
  const [widgetData, setWidgetData] = useState([])
 36 
  const { data } = useFetch(url)
41 
  const [displayMenu, setDisplayMenu] = useState(display)
 37 
  const [displayMenu, setDisplayMenu] = useState(false)
42 
  const [lookMore, setLookMore] = useState(false)
 38 
  const [lookMore, setLookMore] = useState(false)
Línea 43... Línea -...
43 
  const labels = useSelector(({ intl }) => intl.labels)
 - 
 
44 
 
 - 
 
45 
  const getData = () => {
 - 
 
46 
    axios.get(url).then((response) => {
 - 
 
47 
      const { success, data } = response.data
 - 
 
48 
 
 39 
  const labels = useSelector(({ intl }) => intl.labels)
49 
      if (success) {
 - 
 
50 
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
 - 
 
51 
      }
 - 
 
52 
    })
 40 
 
53 
  }
 - 
 
54 
 
 41 
  const items = useMemo(() => (lookMore ? data : data.slice(0, 3)), [lookMore])
55 
  const toggleMenu = () => {
 - 
 
56 
    setDisplayMenu(!displayMenu)
 - 
 
57 
  }
 - 
 
58 
 
 - 
 
59 
  const dataSlice = () => {
 - 
 
60 
    let infoFollows = [...widgetData]
 - 
 
61 
    if (!lookMore) {
 - 
 
62 
      infoFollows = infoFollows.slice(0, 3)
 - 
 
63 
    }
 - 
 
64 
    return infoFollows
 - 
 
65 
  }
 - 
 
66 
 
 - 
 
67 
  useEffect(() => {
 - 
 
Línea 68... Línea 42...
68 
    getData()
 42 
 
69 
  }, [])
 43 
  const toggleMenu = () => setDisplayMenu(!displayMenu)
70 
 
 44 
 
71 
  return (
 45 
  return (
Línea 76... Línea 50...
76 
          {displayMenu ? <ExpandLess /> : <ExpandMore />}
 50 
          {displayMenu ? <ExpandLess /> : <ExpandMore />}
77 
        </IconButton>
 51 
        </IconButton>
78 
      </HelperItem>
 52 
      </HelperItem>
Línea 79... Línea 53...
79 
 
 53 
 
80 
      <List styles={{ width: '100%', height: displayMenu ? 'auto' : 0 }}>
 54 
      <List styles={{ width: '100%', height: displayMenu ? 'auto' : 0 }}>
81 
        {dataSlice().map(({ id, name, profile, image }) => (
 55 
        {items.map(({ id, name, profile, image }) => (
82 
          <List.Item key={id} image={image} title={name} url={profile} />
 56 
          <List.Item key={id} image={image} title={name} url={profile} />
Línea 83... Línea 57...
83 
        ))}
 57 
        ))}
84 
 
 58 
 
85 
        {widgetData.length > 3 && (
 59 
        {items.length > 3 && (
86 
          <List.Item
 60 
          <List.Item
87 
            title={lookMore ? labels.view_less : labels.view_more}
 61 
            title={lookMore ? labels.view_less : labels.view_more}
88 
            onClick={() => setLookMore(!lookMore)}
 62 
            onClick={() => setLookMore(!lookMore)}