Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 949 | Rev 955 | 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 && (
950 stevensc 45 
          <span
46 
            className='cursor-pointer'
47 
            onClick={() => setLookMore(!lookMore)}
48 
          >
5 stevensc 49 
            {lookMore ? labels.view_less : labels.view_more}
50 
          </span>
51 
        )}
949 stevensc 52 
      </StyledContainer.Header>
53 
 
54 
      <StyledContainer.Body>
55 
        <div className='suggest-list'>
56 
          {widgetData.length ? (
57 
            dataSlice().map((suggest) => (
58 
              <SuggestWidget.Item
59 
                key={suggest.id}
60 
                suggest={suggest}
61 
                btnLabelAccept={btnLabelAccept}
62 
              />
63 
            ))
64 
          ) : (
65 
            <EmptySection align='left' message={labels?.datatable_empty} />
66 
          )}
67 
        </div>
68 
      </StyledContainer.Body>
69 
    </StyledContainer>
5 stevensc 70 
  )
71 
}
72 
 
73 
const Item = ({ suggest, btnLabelAccept }) => {
74 
  const labels = useSelector(({ intl }) => intl.labels)
950 stevensc 75 
 
5 stevensc 76 
  return (
949 stevensc 77 
    <div className='user'>
78 
      <div className='d-inline-flex align-items-center'>
5 stevensc 79 
        <Link to={suggest.profile}>
80 
          <img src={suggest.image} alt={`${suggest.name} profile image`} />
81 
        </Link>
949 stevensc 82 
        <h4 className='break-ellipsis'>{suggest.name}</h4>
5 stevensc 83 
      </div>
949 stevensc 84 
      <Link to={suggest.profile} className='btn btn-primary ml-auto'>
5 stevensc 85 
        {btnLabelAccept || labels.view_profile}
86 
      </Link>
87 
    </div>
88 
  )
89 
}
90 
 
91 
SuggestWidget.Item = Item
92 
 
93 
export default SuggestWidget