Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 5 | Rev 950 | 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'
5 
 
949 stevensc 6 
import StyledContainer from '../WidgetLayout'
5 stevensc 7 
import EmptySection from '../../UI/EmptySection'
8 
 
9 
const SuggestWidget = ({
10 
  title = 'Mis Grupos:',
11 
  url = '/helpers/my-groups',
949 stevensc 12 
  btnLabelAccept = 'Ver'
5 stevensc 13 
}) => {
14 
  const [widgetData, setWidgetData] = useState([])
15 
  const [lookMore, setLookMore] = useState(false)
16 
  const labels = useSelector(({ intl }) => intl.labels)
17 
 
18 
  const getData = (url) => {
19 
    axios.get(url).then(({ data: response }) => {
20 
      const { success, data } = response
21 
      if (success) {
22 
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
23 
      }
24 
    })
25 
  }
26 
 
27 
  useEffect(() => {
28 
    getData(url)
29 
  }, [url])
30 
 
31 
  const dataSlice = () => {
32 
    let infoFollows = [...widgetData]
33 
 
34 
    if (!lookMore) {
35 
      infoFollows = infoFollows.slice(0, 3)
36 
    }
37 
 
38 
    return infoFollows
39 
  }
40 
 
41 
  return (
949 stevensc 42 
    <StyledContainer>
43 
      <StyledContainer.Header title={title}>
5 stevensc 44 
        {widgetData.length >= 3 && (
45 
          <span onClick={() => setLookMore(!lookMore)}>
46 
            {lookMore ? labels.view_less : labels.view_more}
47 
          </span>
48 
        )}
949 stevensc 49 
      </StyledContainer.Header>
50 
 
51 
      <StyledContainer.Body>
52 
        <div className='suggest-list'>
53 
          {widgetData.length ? (
54 
            dataSlice().map((suggest) => (
55 
              <SuggestWidget.Item
56 
                key={suggest.id}
57 
                suggest={suggest}
58 
                btnLabelAccept={btnLabelAccept}
59 
              />
60 
            ))
61 
          ) : (
62 
            <EmptySection align='left' message={labels?.datatable_empty} />
63 
          )}
64 
        </div>
65 
      </StyledContainer.Body>
66 
    </StyledContainer>
5 stevensc 67 
  )
68 
}
69 
 
70 
const Item = ({ suggest, btnLabelAccept }) => {
71 
  const labels = useSelector(({ intl }) => intl.labels)
72 
  return (
949 stevensc 73 
    <div className='user'>
74 
      <div className='d-inline-flex align-items-center'>
5 stevensc 75 
        <Link to={suggest.profile}>
76 
          <img src={suggest.image} alt={`${suggest.name} profile image`} />
77 
        </Link>
949 stevensc 78 
        <h4 className='break-ellipsis'>{suggest.name}</h4>
5 stevensc 79 
      </div>
949 stevensc 80 
      <Link to={suggest.profile} className='btn btn-primary ml-auto'>
5 stevensc 81 
        {btnLabelAccept || labels.view_profile}
82 
      </Link>
83 
    </div>
84 
  )
85 
}
86 
 
87 
SuggestWidget.Item = Item
88 
 
89 
export default SuggestWidget