Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6762 | | Comparar con el anterior | Ultima modificación | Ver Log |

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