Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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