Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 955 | Rev 958 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5 stevensc 1 
import React, { useEffect, useState } from 'react'
949 stevensc 2 
import { Link } from 'react-router-dom'
5 stevensc 3 
import { axios } from '../../../utils'
4 
import { useSelector } from 'react-redux'
955 stevensc 5 
import { Box } from '@mui/material'
5 stevensc 6 
 
949 stevensc 7 
import StyledContainer from '../WidgetLayout'
5 stevensc 8 
import EmptySection from '../../UI/EmptySection'
9 
 
10 
const SuggestWidget = ({
11 
  title = 'Mis Grupos:',
12 
  url = '/helpers/my-groups',
949 stevensc 13 
  btnLabelAccept = 'Ver'
5 stevensc 14 
}) => {
15 
  const [widgetData, setWidgetData] = useState([])
16 
  const [lookMore, setLookMore] = useState(false)
17 
  const labels = useSelector(({ intl }) => intl.labels)
18 
 
19 
  const getData = (url) => {
20 
    axios.get(url).then(({ data: response }) => {
21 
      const { success, data } = response
22 
      if (success) {
23 
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
24 
      }
25 
    })
26 
  }
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 
    }
38 
 
39 
    return infoFollows
40 
  }
41 
 
42 
  return (
949 stevensc 43 
    <StyledContainer>
44 
      <StyledContainer.Header title={title}>
5 stevensc 45 
        {widgetData.length >= 3 && (
950 stevensc 46 
          <span
47 
            className='cursor-pointer'
48 
            onClick={() => setLookMore(!lookMore)}
49 
          >
5 stevensc 50 
            {lookMore ? labels.view_less : labels.view_more}
51 
          </span>
52 
        )}
949 stevensc 53 
      </StyledContainer.Header>
54 
 
55 
      <StyledContainer.Body>
956 stevensc 56 
        <Box
57 
          display='flex'
58 
          flexDirection='column'
59 
          maxHeight='350'
60 
          overflow='auto'
61 
        >
949 stevensc 62 
          {widgetData.length ? (
63 
            dataSlice().map((suggest) => (
64 
              <SuggestWidget.Item
65 
                key={suggest.id}
66 
                suggest={suggest}
67 
                btnLabelAccept={btnLabelAccept}
68 
              />
69 
            ))
70 
          ) : (
71 
            <EmptySection align='left' message={labels?.datatable_empty} />
72 
          )}
955 stevensc 73 
        </Box>
949 stevensc 74 
      </StyledContainer.Body>
75 
    </StyledContainer>
5 stevensc 76 
  )
77 
}
78 
 
79 
const Item = ({ suggest, btnLabelAccept }) => {
80 
  const labels = useSelector(({ intl }) => intl.labels)
950 stevensc 81 
 
5 stevensc 82 
  return (
949 stevensc 83 
    <div className='user'>
84 
      <div className='d-inline-flex align-items-center'>
5 stevensc 85 
        <Link to={suggest.profile}>
86 
          <img src={suggest.image} alt={`${suggest.name} profile image`} />
87 
        </Link>
949 stevensc 88 
        <h4 className='break-ellipsis'>{suggest.name}</h4>
5 stevensc 89 
      </div>
949 stevensc 90 
      <Link to={suggest.profile} className='btn btn-primary ml-auto'>
5 stevensc 91 
        {btnLabelAccept || labels.view_profile}
92 
      </Link>
93 
    </div>
94 
  )
95 
}
96 
 
97 
SuggestWidget.Item = Item
98 
 
99 
export default SuggestWidget