Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 950 | Rev 956 | 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>
955 stevensc 56 
        <Box display='flex' flexDirection='column' maxHeight='350'>
949 stevensc 57 
          {widgetData.length ? (
58 
            dataSlice().map((suggest) => (
59 
              <SuggestWidget.Item
60 
                key={suggest.id}
61 
                suggest={suggest}
62 
                btnLabelAccept={btnLabelAccept}
63 
              />
64 
            ))
65 
          ) : (
66 
            <EmptySection align='left' message={labels?.datatable_empty} />
67 
          )}
955 stevensc 68 
        </Box>
949 stevensc 69 
      </StyledContainer.Body>
70 
    </StyledContainer>
5 stevensc 71 
  )
72 
}
73 
 
74 
const Item = ({ suggest, btnLabelAccept }) => {
75 
  const labels = useSelector(({ intl }) => intl.labels)
950 stevensc 76 
 
5 stevensc 77 
  return (
949 stevensc 78 
    <div className='user'>
79 
      <div className='d-inline-flex align-items-center'>
5 stevensc 80 
        <Link to={suggest.profile}>
81 
          <img src={suggest.image} alt={`${suggest.name} profile image`} />
82 
        </Link>
949 stevensc 83 
        <h4 className='break-ellipsis'>{suggest.name}</h4>
5 stevensc 84 
      </div>
949 stevensc 85 
      <Link to={suggest.profile} className='btn btn-primary ml-auto'>
5 stevensc 86 
        {btnLabelAccept || labels.view_profile}
87 
      </Link>
88 
    </div>
89 
  )
90 
}
91 
 
92 
SuggestWidget.Item = Item
93 
 
94 
export default SuggestWidget