Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 956 Rev 958
Línea 1... Línea 1...
1
import React, { useEffect, useState } from 'react'
1
import React, { useEffect, useMemo, useState } from 'react'
2
import { Link } from 'react-router-dom'
2
import { Link } from 'react-router-dom'
3
import { axios } from '../../../utils'
3
import { axios } from '../../../utils'
4
import { useSelector } from 'react-redux'
4
import { useSelector } from 'react-redux'
5
import { Box } from '@mui/material'
5
import { Box } from '@mui/material'
-
 
6
import styled from 'styled-components'
Línea 6... Línea 7...
6
 
7
 
7
import StyledContainer from '../WidgetLayout'
8
import StyledContainer from '../WidgetLayout'
Línea -... Línea 9...
-
 
9
import EmptySection from '../../UI/EmptySection'
-
 
10
 
-
 
11
const WidgetHeader = styled(StyledContainer.Header)`
-
 
12
  padding-bottom: 0;
-
 
13
  align-items: baseline;
-
 
14
  span {
-
 
15
    cursor: pointer;
-
 
16
  }
8
import EmptySection from '../../UI/EmptySection'
17
`
9
 
18
 
10
const SuggestWidget = ({
19
const SuggestWidget = ({
11
  title = 'Mis Grupos:',
20
  title = 'Mis Grupos:',
12
  url = '/helpers/my-groups',
21
  url = '/helpers/my-groups',
13
  btnLabelAccept = 'Ver'
22
  btnLabelAccept = 'Ver'
14
}) => {
23
}) => {
15
  const [widgetData, setWidgetData] = useState([])
24
  const [data, setData] = useState([])
Línea 16... Línea 25...
16
  const [lookMore, setLookMore] = useState(false)
25
  const [lookMore, setLookMore] = useState(false)
17
  const labels = useSelector(({ intl }) => intl.labels)
26
  const labels = useSelector(({ intl }) => intl.labels)
18
 
27
 
19
  const getData = (url) => {
28
  const getData = (url) => {
20
    axios.get(url).then(({ data: response }) => {
29
    axios.get(url).then(({ data: response }) => {
21
      const { success, data } = response
30
      const { success, data } = response
22
      if (success) {
31
      if (success) {
23
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
32
        setData(data.sort((a, b) => a.priority - b.priority).reverse())
Línea -... Línea 33...
-
 
33
      }
-
 
34
    })
-
 
35
  }
-
 
36
 
-
 
37
  const items = useMemo(
24
      }
38
    () => (lookMore ? data : [...data].slice(0, 3)),
25
    })
39
    [lookMore]
26
  }
40
  )
Línea 27... Línea -...
27
 
-
 
28
  useEffect(() => {
-
 
29
    getData(url)
-
 
30
  }, [url])
-
 
31
 
-
 
32
  const dataSlice = () => {
-
 
33
    let infoFollows = [...widgetData]
-
 
34
 
-
 
35
    if (!lookMore) {
-
 
36
      infoFollows = infoFollows.slice(0, 3)
-
 
37
    }
41
 
38
 
42
  useEffect(() => {
39
    return infoFollows
43
    getData(url)
40
  }
44
  }, [url])
41
 
-
 
42
  return (
-
 
43
    <StyledContainer>
45
 
44
      <StyledContainer.Header title={title}>
-
 
45
        {widgetData.length >= 3 && (
46
  return (
46
          <span
47
    <StyledContainer>
47
            className='cursor-pointer'
48
      <WidgetHeader title={title}>
48
            onClick={() => setLookMore(!lookMore)}
49
        {items.length >= 3 ? (
Línea 49... Línea 50...
49
          >
50
          <span onClick={() => setLookMore(!lookMore)}>
50
            {lookMore ? labels.view_less : labels.view_more}
51
            {lookMore ? labels.view_less : labels.view_more}
51
          </span>
52
          </span>
52
        )}
53
        ) : null}
53
      </StyledContainer.Header>
54
      </WidgetHeader>
54
 
55
 
55
      <StyledContainer.Body>
56
      <StyledContainer.Body>
56
        <Box
57
        <Box
57
          display='flex'
58
          display='flex'
58
          flexDirection='column'
59
          flexDirection='column'
59
          maxHeight='350'
60
          maxHeight='350'
60
          overflow='auto'
61
          overflow='auto'
61
        >
62
        >
62
          {widgetData.length ? (
63
          {data.length ? (